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

나는 단순한 개념적인 부분은 잘 습득하는편인데

응용에 취약한 편이다. 따라서 강의에 나온 응용부분을 추가해서 정리해놓아야겠다.

위 그림은 아이콘을 추가한 버튼을 만든 것으로

다른 페이지에서 복사해서 붙여넣기 해준것이다.

디자인 패널에서 조절할 수도있지만 직접 사이간격을 눌러서 간격을 조절해줄 수 도 있다.

 

패딩값을 조절해주면 위의 넓이와 높이값이

그에따라 변화되는 것을 확인할 수 있다.

크기를 확인하면서 패딩값을 조절해줄 수 있다.

패딩값이 같으면 크기값도 같은게 아니군. 보면서 조절해야한다.

 

리사이징 옵션에 대해서 알아보면

Hug로 되어있을 때 텍스트명이 길어지면

패딩값을 조절하여 정사각형으로 만들어 놓은 프레임이직사각형으로 길어지게 된다.즉 안에있는 컨텐츠에 따라 가변이 되는 것이다.

 

 

Fixed로 되어있으면 프레임자체가 리사이징 되지 않겠다는 뜻으로

텍스트를 길게 적어도 

프레임 자체의 길이가 변하지 않는 모습을 확인할 수 있다.

오토 레이아웃의 패딩값을 걸었다고해도 말이다.

즉 하위레이어의 텍스트보다는 상위레이어의 오토레이아웃 프레임 레이어가

우선권한을 가지고있다는 의미이다.

 

플로팅 버튼을 만들어줄 것이기 때문에

이펙트를 만들어서 뒤에 그림자도 주었다.

아이콘을 세로방향으로 추가하고싶어서

오른쪽 디자인패널에서 오토레이아웃방향을 아래쪽으로 바꾼 모습이다.

 

 

글자를 늘려도 가로의 길이가 늘어나지 않으려면

상위 레이어에서 Fixed를 선택해야한다.

그래야 위 그림처럼 텍스트가 길어지게해도

모양이 유지될 수 있다.

 

사이간격을 조절하고

리사이징에 대해 자세히 알아보았다.

응용을 하면서도 틈틈이 새로운 개념을 적립하기때문에

실습강의라고해서 배운것만 나올 것이라고 방심하면 안된다.

정신바짝!

 

: https://mcode.co.kr/

메타코드M

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