📌 Figma 정리
1. Frame(프레임) 다루기
- 단축키:
f키를 누르면 Frame 생성 도구가 활성화됩니다. - 자세히 보기: Frame 아이콘을 클릭하면 프레임 옵션이 오른쪽 패널에 표시됩니다.
- Draft Thumbnail 설정:
Figma Community > Plugin/File Cover를 통해 Draft의 썸네일을 만들 수 있습니다.- 썸네일로 설정하려면 오른쪽 클릭 > Set as thumbnail
- 기본 썸네일로 복원하려면 오른쪽 클릭 > Restore default thumbnail
2. 파일 Publish
- 공유(Share) 버튼 옆에 있는 Publish 버튼을 클릭하여 퍼블리시할 수 있습니다.
3. Component(컴포넌트) 기본 개념
- Master(원본): 컴포넌트의 원본
- Instance(복제본): 컴포넌트의 인스턴스(복사본)
3.1 구성 가능 여부
| 마스터 안에 인스턴스 | 인스턴스 안에 인스턴스 | 마스터 안에 마스터 | 인스턴스 안에 마스터 |
|---|---|---|---|
| ✅ 가능 | ✅ 가능 | ❌ 불가능 | ❌ 불가능 |
3.2 마스터와 인스턴스 관계
- 마스터를 수정하면 → 연결된 모든 인스턴스가 수정 사항을 반영함.
- 인스턴스는 일부 속성(색상, 텍스트 등)을 개별적으로 수정할 수 있지만, 마스터가 사라지거나 바뀌면 Restore 작업이 필요합니다.
3.3 마스터 관련 기능
- 마스터 삭제 시: 마스터가 없어지므로 인스턴스만 남고, 복원이 까다롭습니다.
- 오브젝트를 마스터로 만들기:
Ctrl + Alt + K(윈도우 기준)
⬇️
선택한 레이어(혹은 오브젝트)가 컴포넌트의 마스터로 전환됩니다. - 인스턴스에 연결된 마스터 확인: 오른쪽 패널의 Default 하단에
From this file클릭 - Detach Instance: 인스턴스에서 오른쪽 클릭 > Detach instance를 하면 컴포넌트 연결이 해제됩니다.
💡 Tip
컴포넌트를 만들 때는 가장 기본 단위(쪼개지지 않는 단위)부터 만드는 것이 좋습니다.
마스터를 실수로 지우면 재설정이 매우 번거로우니 주의하세요.
4. Rename(이름 변경)
- 단축키:
Ctrl + R(윈도우 기준)
5. Variant(변형 컴포넌트)
여러 컴포넌트를 하나의 그룹처럼 묶어 속성을 추가하여 사용하고 싶을 때 활용합니다.
- 여러 컴포넌트를
Shift로 선택 - 오른쪽 패널에서 Combine as variants 클릭
- 이렇게 만든 Variant 안에는
Property1,Property2등의 속성이 자동 생성됩니다.
5.1 Variant 사용
Ctrl + K로 컴포넌트(Variant) 이름을 검색하여 가져옵니다.- 선택한 이후에는 오른쪽 패널에서 Property 값을 변경하여 원하는 상태로 조절할 수 있습니다.
6. Auto Layout(자동 레이아웃) 활용
- 자동 레이아웃 생성: 요소(컴포넌트 등)를 선택하고
Shift + A를 누릅니다.- 왼쪽 패널에서 Auto Layout(일렬 정렬, spacing 등) 옵션을 확인할 수 있습니다.
- 컨테이너(Frame 등) 크기에 맞춰 확장하려면
- Fill container, Hug contents 등의 옵션을 적절히 설정합니다.
7. 컴포넌트 속성 정의
- 하나의 컴포넌트 안에 Boolean, Text, Instance swap 등 다양한 속성을 만들어두면,
인스턴스에서 체크박스, 텍스트 입력, 컴포넌트 교체 등을 손쉽게 조절할 수 있습니다. - 예) “설정” 버튼의 보이기/숨기기 등을 Boolean으로 관리 가능
8. 🔧 유용한 플러그인 3가지
Figma에서 플러그인을 사용하려면
Ctrl + K를 눌러 plugin을 검색하거나,- 오른쪽 클릭 > Plugins에서 접근할 수 있습니다.
1️⃣ Unsplash 📸
- 고품질 이미지를 빠르게 삽입할 수 있는 플러그인
- 디자인 작업 시 배경 이미지나 샘플 이미지를 쉽게 추가 가능
2️⃣ Material Design Icons 🎨
- 구글 머터리얼 디자인 아이콘을 쉽게 가져올 수 있음
- 버튼, 내비게이션 바 등에 일관된 디자인의 아이콘 추가 가능
3️⃣ Autoflow 🔄
- 작업 순서를 시각적으로 정리하는 플러그인
- 와이어프레임, UX 플로우 다이어그램 등을 만들 때 유용
☑️ 요약
- Frame 생성 및 썸네일 설정
- Master & Instance 관계 숙지
- Variant로 여러 컴포넌트 묶어 관리
- Auto Layout 활용으로 반응형 디자인
- 컴포넌트에 Boolean/Text/Instance swap 속성 정의
위 내용을 참고하여 Figma에서 효율적으로 작업해볼 수 있습니다.
사견으로 Figma는 깊게 파고들면 정말 원하는 디자인을 바로바로 그려볼 수 있을거 같습니다. 물론 저는 workflow 랑 간단한 틀정도만 하는거라 깊게는 팔 생각은 없습니다. 하지만 frontend거나 designer에게는 매우 필요한 툴이라는 생각이 들었습니다.
Lee_AA