안녕하세요. 오늘은 현대 UI/UX 디자인의 표준으로 자리 잡은 프레임워크이자 협업 툴인 피그마(Figma)의 핵심 지식을 정리해 보려고 합니다. 입문자분들부터 실무에서 효율을 더 높이고 싶은 분들까지, 이것만 알면 피그마 마스터가 될 수 있는 필수 개념과 유용한 팁들을 모았습니다.
1. 피그마의 핵심 개념 3가지
피그마를 다룰 때 가장 먼저 이해해야 하는 구조적 특징과 핵심 기능입니다.
1) 프레임(Frame) vs 그룹(Group)
- Group은 단순히 여러 요소를 하나로 묶어주는 역할만 하지만, Frame은 그 자체로 하나의 독립된 '도화지'이자 컴포넌트의 기반이 됩니다.
- Frame은 내부에 포함된 요소들의 정렬 상태(Constraints)를 제어할 수 있고, 독립적인 배경색이나 그리드를 가질 수 있어 반응형 디자인에 필수적입니다.
2) 오토 레이아웃(Auto Layout)
피그마의 꽃이라고 불리는 기능으로, 콘텐츠의 크기에 따라 레이아웃이 자동으로 늘어나거나 줄어들도록 설정합니다.
지정된 패딩(Padding)을 유지하면서 버튼 안의 텍스트가 길어지면 버튼이 자동으로 커지는 효과를 낼 수 있습니다. 정렬과 간격을 코딩(CSS Flexbox)과 유사한 방식으로 제어하므로 개발자 친화적인 디자인이 가능합니다.
3) 컴포넌트(Component)와 인스턴스(Instance)
반복되는 UI 요소(버튼, 네비게이션 바 등)를 효율적으로 관리하기 위한 디자인 시스템의 기본입니다.
- Component(마스터): 원본 디자인입니다. 마스터를 수정하면 연결된 모든 복사본이 자동으로 변경됩니다.
- Instance(복사본): 마스터에서 파생된 복사본입니다. 개별적으로 색상이나 텍스트를 변경(Override)할 수 있지만, 전체적인 구조는 원본을 따릅니다.
2. 작업 속도를 2배 키워주는 필수 단축키 모음
피그마 실무에서 작업 능률을 획기적으로 올려줄 핵심 단축키를 정리한 표입니다.
| 분류 | 기능 | 단축키 (Windows / Mac) |
|---|---|---|
| 기본 툴 | 프레임 / 사각형 / 텍스트 | F / R / T |
| 레이아웃 | 오토 레이아웃 추가 | Shift + A |
| 레이아웃 | 오토 레이아웃 해제 | Alt + Shift + A / Opt + Shift + A |
| 컴포넌트 | 컴포넌트 생성 | Ctrl + Alt + K / Cmd + Opt + K |
3. 실무 효율을 높이는 피그마 활용 팁
플러그인(Plugins) 적극 활용하기
피그마는 자체 기능 외에도 커뮤니티 플러그인을 통해 날개를 달 수 있습니다. 추천하는 필수 플러그인은 다음과 같습니다.
- Unsplash: 고품질 무료 이미지를 클릭 한 번으로 레이어에 채워 넣을 수 있습니다.
- Iconify: 다양한 아이콘 팩을 피그마 내부에서 검색해 벡터 파일로 가져옵니다.
개발자 전달(Dev Mode)
피그마 우측 상단의 'Dev Mode' 스위치를 켜면 디자이너가 작업한 결과물을 개발자가 바로 코드로 확인할 수 있습니다. 간격, 폰트 스타일, 컬러 값이 CSS, Swift, Kotlin 등의 코드로 표현되므로 소통 비용을 획기적으로 줄여줍니다.
마치며
피그마는 단순한 디자인 툴을 넘어 기획자, 디자이너, 개발자가 실시간으로 소통하는 '협업 플랫폼'입니다. 오늘 정리해 드린 오토 레이아웃과 컴포넌트 개념을 완벽히 이해하고 단축키를 손에 익힌다면, 훨씬 더 프로페셔널한 UI/UX 워크플로우를 완성하실 수 있을 것입니다.
오늘 글이 도움이 되셨다면 공감과 댓글 부탁드립니다:)
'Figma Study' 카테고리의 다른 글
| 피그마 다운로드 및 초기 세팅방법 (0) | 2026.05.27 |
|---|