Figma를 처음 배우다 보면 우리는 여러가지 말을 알게 됩니다.
‘프레임’, ‘컴포넌트’, ‘오토 레이아웃’이라는 용어가 자주 등장합니다.
겉으로 보기엔 비슷해 보이지만, 실제로는 각각 전혀 다른 역할과 개념이 있습니다.
이 세 가지 기능은 UI/UX 디자인의 뼈대를 구성하는 핵심이기 때문에 초반에 잘 이해하고 넘어가는 것이 중요해요.
이번 글에서는 디자인 경험이 없는 사람도 바로 이해할 수 있도록,
Figma의 프레임(Frame), 컴포넌트(Component), 오토 레이아웃(Auto Layout)을 쉽게 풀어 설명해드릴게요.
1. 프레임(Frame): 디자인의 캔버스
프레임은 쉽게 말해 화면의 틀입니다.
우리가 디자인하려는 모바일 앱, 웹사이트, 카드, 버튼 등 모든 요소의 기본 단위가 바로 프레임이에요.
F키를 누르면 프레임 도구가 실행됩니다.- 다양한 디바이스 사이즈 (예: iPhone 13, Desktop 등)를 선택해 UI를 구성할 수 있어요.
- 프레임 안에 텍스트, 버튼, 이미지 등을 배치하면 하나의 ‘화면’이 됩니다.
프레임은 아트보드처럼 생각해도 무방하며,
프레임 안에 또 다른 프레임을 넣는 것도 가능합니다.
2. 컴포넌트(Component): 반복되는 요소의 마스터 파일
컴포넌트는 쉽게 말해 복붙의 진화 버전입니다.
반복적으로 사용되는 버튼, 카드, 입력창 등을 하나의 컴포넌트로 만들어두면
한 번 수정으로 전체 디자인을 동시에 변경할 수 있어요.
- 예: ‘로그인’ 버튼을 여러 화면에 넣었을 때, 텍스트나 색상을 바꾸려면? → 원본 컴포넌트만 수정하면 끝!
만드는 방법:
요소를 선택하고 Cmd/Ctrl + Alt + K 누르거나, 우클릭 > ‘Create component’
컴포넌트는 유지보수에 강력한 도구이며, 디자인 시스템을 구성할 때 필수입니다.
3. 오토 레이아웃(Auto Layout): 반응형처럼 유연하게
오토 레이아웃은 Figma의 가장 똑똑한 기능 중 하나입니다.
요소들의 크기나 위치를 자동으로 정렬하고, 여백을 일정하게 유지해주는 기능이에요.
예를 들어:
- 버튼 안의 텍스트가 길어지면 → 버튼의 가로 길이도 자동으로 늘어남
- 리스트 아이템을 복사하면 → 동일한 간격으로 자동 정렬
적용 방법:
레이어를 선택하고 Shift + A 누르거나, 오른쪽 패널에서 ‘+ Auto layout’ 클릭
오토 레이아웃은 특히 디자인을 반응형처럼 유연하게 구성할 수 있어,
실무에서 가장 많이 쓰이는 기능 중 하나입니다.
마무리
| 기능 | 핵심 역할 | 단축키 |
|---|---|---|
| 프레임 | UI의 구조와 틀 | F |
| 컴포넌트 | 반복 요소 관리 | Cmd/Ctrl + Alt + K |
| 오토 레이아웃 | 정렬 & 반응형 구성 | Shift + A |
최종적으로요.
Figma에서 프레임, 컴포넌트, 오토 레이아웃을 잘 이해하면
작업 속도는 3배, 효율은 5배 향상될 수 있습니다.
이 세 가지 개념은 단순한 기능을 넘어서, 전문적인 디자인 시스템의 기반이 되기도 합니다.