[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ "(실습)오토 레이아웃으로 버튼 만들기"

버튼이라는 텍스트를 써주고

바로 오토 레이아웃을 설정해준다.

단축키로는 Shift+A를 누르면 된다.

버튼을 만드는 방법이 시작부터 심플하다.

 

오른쪽 디자인 패널 아래쪽에서

패딩값을 조절해준 모습이다.

사각형이 좌우 선과 위아래 선에 갇혀있는 모양 옆의 숫자를 조절해서

버튼 텍스트를 감싸는 사각형의 크기가 커졌음을 확인할 수 있다.

 

버튼의 배경색과 글자색을 바꿔주고 텍스트도 볼드로 해주며

모서리 알값도 둥글게 굴려준 모습이다.

여기서 오토 레이아웃을 가로방향으로 설정해주고

간격값을 조절해서 붙여넣기를 해주면

 

위 사진과 같이 하나의 배경안에서

여러가지 버튼 텍스트들이 가로방향으로 쭉

나열되는 것을 확인할 수 있다.

하지만 이렇게 글자와 글자만 조합되는 경우는 잘 없다.

 

 

 

버튼 배경까지 각각 띄워지는 것을 만들려면

버튼 텍스트에 오토 레이아웃이 걸려있는 레이어를 복사해서

생성해주면 된다.

그러면 온전한 하나의 버튼들이 각각 만들어지게 된다.

 

오토 레이아웃이 각각 걸려있는 두개의 버튼을 다중선택하여

또 오토 레이아웃으로 묶은 후에 버튼을 복사붙여넣기를 해주면

아까와 달리 가로 방향으로 배경이 분리된 버튼이 생성되는 것을 확인할 수 있다.

오토레이아웃이 걸려있기에 텍스트의 길이가 늘어나도 

그에맞게 늘어나고 줄어들 수 있다.

 

 

오토레이아웃을 묶어 오토레이아웃을

만들어 줄 수 있음을 확인하고

필요한 상황에 맞게 활용하는 법을 배웠다.

그리고 오토라는 말에 어울리게 변동성이 자동적용되어서

매우 편리하고 유용한 기능인 것 같다.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.