Figma 오토 레이아웃 & 디자인 기초 정리

1️⃣ Text와 오토 레이아웃

일반적인 Text에는 오토 레이아웃이 바로 적용되지 않는다.

Text를 선택한 뒤 Ctrl + G로 그룹화하면 오토 레이아웃을 적용할 수 있다.

오토 레이아웃 적용 후에는

상·하·좌·우 여백 조절 가능

텍스트 글자 수에 따라 자동으로 크기 변경

여러 오토 레이아웃 요소를 각각 오토 레이아웃으로 감싸면
👉 순서 변경(위치 바꾸기)도 가능하다.

2️⃣ Clip Content

Layout 창에서 Clip content를 활성화하면
→ 프레임(카드) 밖으로 나간 요소가 보이지 않게 된다.

카드 UI, 이미지 마스킹 등에 자주 사용됨.

3️⃣ 8pt Grid System (Material Design)

머터리얼 디자인 가이드의 8pt 그리드 시스템이란?

모든 요소의 크기와 간격을 8px 단위로 맞추는 규칙

버튼, 카드, 텍스트, 아이콘 등은
👉 8의 배수(8, 16, 24, 32 …)로 디자인하는 것을 권장

4️⃣ 오토 레이아웃 영역 밖으로 텍스트가 나갈 때

텍스트가 오토 레이아웃 영역을 벗어나는 경우
👉 Ctrl 키를 누른 채 드래그해서 직접 조절 가능

5️⃣ Hug Contents vs Fixed

Hug contents

• 자식 요소의 크기에 맞춰 부모 프레임 크기가 자동 조절

• 여백이 늘어나면 프레임도 같이 커짐

Fixed

• 입력한 값만큼 고정된 크기

• 내용이 바뀌어도 크기는 변하지 않음

6️⃣ 카드 + 오토 레이아웃

카드에 오토 레이아웃을 적용하면
→ 내부 요소 크기가 변할 때 카드 크기도 자동으로 변경

반응형 UI 구성할 때 매우 유용함.

7️⃣ Typography & Color 스타일 지정

Figma에서는 대표 Typography와 Color 스타일을 지정할 수 있다.

Typography 예시

Title1 / Bold / 24px

Color 예시

Primary / #000000

8️⃣ 컴포넌트 & Variants

• 아이콘을 컴포넌트로 만든 뒤 전체 선택 → Combine as variants 를 사용하면 하나의 그룹으로 묶을 수 있다.
• Variants로 묶어두면 컴포넌트를 쉽게 교체할 수 있어 재사용에 유리하다.
• Variants를 해제하고 싶을 경우 그룹 밖으로 빼내면 된다.

9️⃣ 마스터 컴포넌트와 인스턴스

• 마스터 컴포넌트는 직접 사용하지 않고 반드시 복사해서 사용한다.
• 마스터 컴포넌트를 수정하면 연결된 모든 인스턴스가 함께 변경된다.
• 반대로 인스턴스를 수정해도 마스터 컴포넌트에는 영향을 주지 않는다.