[피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기

[피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기

안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다.

저도 요즘 피그마에 적응중이라 차근차근 해보면서 가끔은 삽질도 하면서? ... 공부해나가는 중입니다.

오늘은 버튼을 만들어볼건데 텍스트를 기준으로 여백을 유지하면서 자동으로 크기가 늘어나는 버튼을 만들 것입니다.

썸네일

이렇게 말이죠.

 

버튼 생성

먼저 버튼을 만들고 Create Component 해줍니다.

 

텍스트 위치 정렬

버튼 안에 있는 텍스트의 위치가 박스의 중앙에 위치하도록 Constraints를 설정합니다. Paragraph도 가운데 정렬해주셔야 텍스트 수정할 때 용이하겠죠.  

 

 

 

텍스트크기

텍스트의 가로크기를 확인하신 다음 박스를 다시 선택하시고 텍스트 크기+양옆 여백(패딩)을 더한 값을 입력합니다.

박스 크기 설정

저는 양 옆 마진을 50px씩 더해서 텍스트의 크기 149+100을 입력했어요. 그럼 버튼의 가로길이가 총 249가 되겠죠?

이게 디폴트 버튼이 되겠습니다.

그리고 디자인 탭에 있는 오토레이아웃(Auto Layout)을 누르세요. 그럼 끝입니다.

 

auto layout

오토레이아웃은 여기에 있습니다. 그리고 방향, 세로 가로의 패딩을 설정하세요.

요소간 간격도 설정할 수 있습니다.

이렇게 한 다음에 이 마스터버튼을 복사해서 활용하시면 돼요.

relative 버튼

텍스트 길이에 따라 반응하는 버튼이 만들어졌습니다.

아주 간단하네요. 최근에 간단한 상세페이지 기획할 일이 있어서 그 김에 만들어봤어요.

그럼 다음에도 알게되는 피그마 튜토리얼이 있으면 정리해보겠습니다.

감사합니다.

 

---

최근에 피그마 업데이트 후 오토레이아웃도 더 쉽게 업데이트 되었습니다.

아래 포스팅을 참고하세요!

nicecarrot2.tistory.com/178

[피그마] 업데이트된 오토레이아웃 기능! 더 쉬워진 반응형 버튼 만들기