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

안녕하세요. 당근입니다. 지난번에 figma에서 텍스트 길이에 반응하는 버튼을 만드는 방법을 포스팅한적이 있죠.

그때는 저도 피그마가 익숙치않던 시절이었는데요.

바로 이 포스팅입니다.

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

[피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중

nicecarrot2.tistory.com

최근에 피그마가 업데이트 이후로 오토레이아웃 적용하고 컨트롤하는 게 더 쉬워졌어요.

그래서 다시 텍스트에 따라 자동으로 패딩(여백)을 유지한 채 늘어나는 반응형 버튼! 만들어보겠습니다.

먼저 버튼을 만드세요. 네모, 글씨, 정렬 원하는대로 해주시고요.

둘다 선택하시고 오른쪽 Design 탭에 보면 오토레이아웃 영역이 있습니다. +버튼을 눌러 바로 오토레이아웃을 만듭니다.

오토레이아웃이 적용되었어요. 그런데 이 버튼의 크기를 늘려보면

이렇게 됩니다. 이것도 버튼 크기가 달라져도 항상 가운데 있게 설정할 수 있어요.

구석에 이 버튼이 새로 생겼는데요. 이 설정이 왼쪽 위로 되어 있어서 그렇습니다.

여기서 패딩도 지정하실 수 있고요.

이걸 가운데를 클릭해서 바꿔주면!

이렇게 항상 텍스트가 가운데에 위치할 수 있도록 손쉽게 설정할 수 있습니다.

어떠셨나요? 이것 말고도 Variants을 사용해서 비슷한 버튼들을 쉽게 관리할 수 있도록 바뀌는 등 계속 착한 업데이트를 해주고 있는 피그마입니다.

저도 알게 되는 것들 계속 포스팅해볼게요.

그럼 오늘도 유용한 팁이었기를 바라며, 당근이었습니다.

[편집 디자인] 예쁜 책표지 아카이브 : SF편 *개취주의 (0)	2020.09.08

친절한 당근 블로그