피그마 기초강좌 파해치기 [Auto Layout을 활용한 피그마 버튼 ]

저 또한 피그마를 기초부터 배우게 되면서 처음 버튼을 만들어 보았는데요, 오늘은 오토 레이아웃을 활용한 버튼을 만들어 보겠습니다.

text 단축키 t를 눌러 Button이라는 단어를 써줍니다.

shift + a 눌러 auto layout을 만들어줍니다.

오른쪽 디자인 패널에 auto layout칸이 새롭게 생성되는데 단어의 상하 좌우 간격 조정이 가능합니다.

배경을 만들어주기위해 디자인패널 하단의 fill을 눌러 원하는 색상을 넣어줍니다. local style을 지정했다면 플러스 버튼 옆의 원이 나열되어있는 아이콘을 누르면 자동으로 리스트가 나옵니다.

해당 배경을 저는 orange컬러를 해주었고 현재 버튼의 프레임을 누르면 text의 색상까지 나옵니다. 저는 text의 색상을 추가로 화이트로 변경하기 위해 000000 -> local style white로 변경해 주었습니다.

이렇게 오렌지 배경에 화이트 컬러의 텍스트가 생성되는데 버튼의 크기를 조절하고 싶을 경우 버튼 프레임을 마우스로 클릭하여 자유롭게 조절해주면 됩니다. 또한 텍스트를 가운데로 정렬하고 싶을 경우 auto layout에서 보이는 alignment 아이콘을 따라 설정해주면 끝!

버튼에 단어를 추가하고 싶을 경우 text 선택 후 command + d를 누르면 자동으로 간격이 띄워지게 되는데 안에 아이콘을 넣는 등 자유롭게 설정이 가능합니다.