[Figma] 피그마 오토 레이아웃(Auto Layout) 기능으로 버튼 디자인하기

오늘은 피그마의 대표 기능 중 하나인, Auto Layout을 활용하여 버튼을 만들어 보겠습니다.

Auto Layout이란?
Auto Layout은 요소들 사이의 간격, 정렬, 크기 조절 등을 자동으로 설정해주는 피그마의 기능입니다.
텍스트 길이가 바뀌어도 여백이 유지되고, 여러 요소를 묶어 정렬하거나 간격을 조절할 때 매우 유용합니다.
반복되는 UI 컴포넌트를 만들 때 시간을 절약하고 일관성을 유지할 수 있는 핵심 기능입니다.

 

---

기본 : 버튼 만들기

아래와 같은 순서로 차근차근 따라하시면 30초 안에 버튼을 만들 수 있습니다.

	1. 텍스트 작성하기  [T] 버튼을 눌러 버튼명이 될 텍스트를 작성해 줍니다.
	2. 텍스트를 그룹으로 만들기 [Group selection] 또는 [ctrl/command + G]를 눌러 방금 장석한 텍스트를 그룹으로 만들어 주세요.
	3. 그룹을 Auto Layout으로 만들기 방금 만든 그룹을 클릭하면 오른쪽 패널의 Layout 영역에 빨간색으로 표시한 Auto Layout 버튼이 활성화 됩니다. 이 버튼을 눌러 그룹을 Auto Layout으로 바꿀 수 있습니다. 단축키 : [Shift] + [A]
	4. 패딩(Padding) 지정해주기 Auto Layout으로 지정하고 나면 오른쪽 패널의 Layout영역 이름이 Auto Layout으로 바뀝니다. 여기서는 Padding을 입력할 수 있는데요, 버튼 안에서 텍스트 위/아래 여백을 어느 정도로 남겨둘지 정할 수 있습니다.
	왼쪽은 좌우 패딩, 오른쪽은 상하 패딩인데요 각각 16, 9px로 설정했을 때 왼쪽 이미지와 같이 여백이 확보된 것을 보실 수 있습니다.
	버튼 이름이 길어져도, 짧아져도 이 여백 크기는 유지되는 것을 확인할 수 있습니다.
	5. 스타일 입히기 마지막으로 버튼에 스타일을 추가해보겠습니다. 버튼을 선택하면 오른쪽 패널에 다음과 같은 설정을 할 수 있어요. - Appearance > Corner radius : 모서리 둥글게 하기 - Fill : 버튼 배경색 추가 - Stroke : 버튼 테두리 추가 - Effects : 버튼 효과 (그림자, 흐리게 등) 추가

 
 

이렇게 버튼 하나를 뚝딱 만들어 보았습니다.
그냥 사각형(R)과 텍스트(T)를 그룹으로 만들어 버튼을 만들 수도 되지만, 이렇게 하면 버튼 크기를 일일이 조절해야 하고, 텍스트가 바뀔 때마다 정렬이 틀어질 수 있습니다.
반면 Auto Layout을 사용하면 텍스트 길이에 맞춰 버튼 크기가 자동으로 조정되고, 여백도 동일하게 유지되어 관리가 훨씬 쉬워진답니다.

 

---

응용 : 버튼 그룹 만들기

이렇게 Auto Layout으로 만든 버튼을 복제해서 두 개의 버튼을 Auto Layout으로 묶어보세요.

그럼 버튼을 복붙했을 때나 버튼을 위치를 이동했을 때 자동으로 정렬되고,

오른쪽 패널의 Auto Layout 패널에서 버튼간 간격(Gap)도 숫자 입력으로 간단하게 조정할 수 있답니다.

---

자, 오늘은 이렇게 간단하게 Auto Layout 기능으로 버튼을 만들어 봤는데요, 이 기능을 통해 반복되는 UI 작업을 더 빠르고 깔끔하게 처리할 수 있을 겁니다. 익숙해지면 버튼뿐만 아니라 카드, 리스트, 모달 등 다양한 컴포넌트에도 활용할 수 있으니 꼭 한번 연습해보세요!
그럼 오늘도, 나를 위한 일하기였습니다!