Lv0.6 Figma(피그마) - 기초
1️⃣ Figma란?
클라우드 기반의 UI/UX 디자인 도구로, 실시간 협업과 다양한 기능을 제공하는 강력한 디자인 툴
✅ 클라우드 기반 → 인터넷만 연결되면 어디서든 사용 가능
✅ 실시간 협업 → 여러 명이 동시에 작업 가능 (Google Docs처럼!)
✅ 다양한 디자인 작업 지원 → UI/UX 디자인, 와이어프레임, 프로토타이핑 등 가능
✅ 플러그인 & 연동 기능 → ProtoPie, FigJam, Webflow 등 다양한 툴과 연결 가능
✅ 설치 필요 없이도 공유 가능 → 웹에서 실행되며, Mac/Windows용 앱도 제공
- 설치 : Figma 공식 웹사이트
2️⃣ Figma 인터페이스 주요 구성요소
🖥️ 메인 툴바
→ 도형, 프레임, 텍스트, 패스 도구 등 주요 기능 배치
➤ 선택 도구 (Move Tool) → V
- 개체(프레임, 도형, 텍스트 등)를 선택 및 이동
- Shift + 드래그 하면 직선으로 이동 가능
⌗ 프레임 도구 (Frame Tool) → F
- 새로운 프레임(아트보드)을 생성 (일러스트레이터의 Artboard(대지)와 유사)
- 모바일, 태블릿, 데스크톱 등 미리 설정된 프레임 크기를 선택
▢ 도형 도구 (Shape Tool) → R (사각형), O (원), L (선)
- 사각형, 원, 선, 다각형 등 다양한 도형을 그리기
- Shift + 드래그 하면 정사각형/정원으로 그림
✑ 펜 도구 (Pen Tool) → P
- 벡터 곡선 직접 그리기
- 앵커 포인트 추가 및 수정 가능 (일러스트레이터의 Pen Tool과 유사)
𝐓 텍스트 도구 (Text Tool) → T
- 캔버스에 텍스트 박스를 생성하여 입력 가능.
- 폰트, 크기, 정렬, 색상 등을 조정할 수 있음.
💬 코멘트 도구 (Comment Tool) → C
- 특정 위치에 코멘트를 추가할 수 있음
- 팀원과 협업할 때 피드백을 남기는 데 유용.
∷ 액션 도구 (Action Tool) →Ctrl + K
- 인터랙션 설정
- 특정 버튼 클릭, 호버, 드래그 등 사용자 액션을 추가하여 프로토타입 상호작용 강화
</> Dev Mode (개발자 모드) → Shift + D
- 코드 확인 및 개발자 협업
- Figma에서 개발자들이 CSS, iOS, Android 코드 스니펫을 확인할 수 있도록 지원
📂 레이어 패널
→ 좌측 패널에서 프레임, 그룹, 오브젝트 계층 구조 확인 & 관리
🎨 속성 패널
→ 우측 패널의 Design에서 '선택한 오브젝트'의 색상, 크기, 위치, 테두리, 그림자 등 설정
🎬 프로토타입 패널
→ 우측 패널의 "Prototype" 탭에서 '선택한 오브젝트'의 화면 전환, 인터랙션(클릭, 드래그 등), 애니메이션 효과 등 설정
📑 파일 및 버전 관리
→ 히스토리 저장 & 버전별 되돌리기 지원
3️⃣ Figma 주요 단축키
단축키를 활용하여 디자인 작업 속도 높이기
4️⃣ Figma vs ProtoPie 비교
- Figma → UI 디자인 & 실시간 협업에 최적화
- ProtoPie → 고급 인터랙션(애니메이션, 터치 제스처) 구현
| ProtoPie | Figma | |
| 목적 | 정교한 인터랙션, 모션 디자인 | UI 디자인, 실시간 협업 |
| 협업 기능 | 제한적 | ✅ 강력한 실시간 협업 |
| 설치 방식 | 데스크톱 앱 필요 | ✅ 웹 기반 (설치 필요 없음) |
| 애니메이션 지원 | ✅ 고급 애니메이션 가능 | 기본 애니메이션만 지원 |
| 개발자 협업 | 인터랙션 테스트 | ✅ 개발자와 공유 최적화 |
| 사용 용도 | 동적인 프로토타입 제작 | UI/UX 디자인 및 간단한 프로토타이핑 |
실습 요약
💡 툴바 주요 도구
- Move (V) → 개체 선택 및 이동
- Frame (F) → 아트보드 또는 레이아웃 생성
- Shape (R, O, L) → 도형 생성 (사각형, 원, 선)
- Pen (P) → 벡터 드로잉
- Text (T) → 텍스트 입력
💡 좌측 레이어 패널
- Pages → 피그마 내 여러 페이지를 관리하는 영역
- Layers → 각 디자인 요소(프레임, 그룹, 오브젝트)의 계층 구조 확인 가능
💡 우측 속성 패널
- Fill (배경색) / Stroke (테두리) → 색상, 투명도 설정
- Effects (그림자, 흐림 효과 등) → 디자인 요소에 스타일 적용 가능
- Layout & Constraints → 반응형 레이아웃 조정
💡 도형 도구 사용법
- R → 사각형(Rectangle) 그리기
- O → 원(Ellipse) 그리기
- L → 선(Line) 그리기
- Shift + 드래그 → 정사각형, 정원, 수직/수평 선 그리기
💡 스타일 적용 (속성 패널 활용)
- Fill (채우기 색상) → 도형의 내부 색상을 변경
- Stroke (테두리) → 테두리 색상, 두께 조정
- Effects (효과 적용) → 그림자, 흐림(Blur) 효과 추가
💡 도형 정렬 및 조정
- 여러 개의 도형을 선택한 후 정렬 (Align) 및 간격 조정 (Spacing)
- 그룹화 (Ctrl + G)하여 하나의 요소처럼 관리
결론 – Figma를 잘 활용하려면?
- 협업 기능을 적극 활용 (코멘트, 공유, 버전 관리 등)
- 플러그인 & 다른 디자인 툴과 연동해서 확장성 높이기
- 단축키를 활용해 더욱 효율적으로 디자인을 하기
- - 부족했던 나의 진짜 첫 피그마 - (주)리피드의 더치움 앱 개선사항 제안서 관련 https://www.figma.com/proto/sgpCJcc6Iu1Rc9BRjOhZJy/%EB%A6%AC%ED%94%BC%EB%93%9C-(Copy)?node-id=0-1&t=k3zTmz21VgCqFvIl-1
나의 진짜 첫 피그마 활동으로 배웠던 주요 내용(Auto Layout, Prototype, Component Properties 활용 관련)
❶ Auto Layout
버튼, 카드, 리스트 등의 UI 요소를 자동 정렬 & 간격 유지
🔷 Auto Layout 핵심 기능
- Auto Layout 추가 → Shift + A
- Gap → 요소 간 간격 조정
- Padding → 내부 여백 조정
- Alignment → 요소의 정렬 방식 선택
- Hug Contents → 내용에 맞게 크기 자동 조절
- Fill Container → 부모 요소 크기에 맞춰 자동 확장
✅ 버튼 크기를 자동 조정하려면?
→ Auto Layout을 적용한 후 Padding을 조정하면 텍스트 크기에 맞춰 자동 조정됨
✅ 리스트 UI를 만들 때 일정한 간격을 유지하려면?
→ Gap 값을 고정하면 항목이 추가/삭제될 때 자동 정렬됨
✅ 카드 UI를 만들 때 반응형으로 만들려면?
→ Wrap 기능을 활성화하면 그리드 레이아웃이 자동으로 조정됨
✅ 여러 개의 Auto Layout을 중첩해서 반응형 UI 제작 가능
💡 Auto Layout 꿀Tip
대부분의 개체 생성 시, 바로 단축키(Shift + A) 적용하기
사이즈 수정할 때, Hug와 Fill 이용
❷ Prototype
클릭, 드래그, 호버 등의 동작을 설정
🔷 Prototype 트리거 유형별 설정
- On Click → 버튼 클릭 시 다음 화면으로 이동
- On Drag → 드래그 인터랙션 설정
- While Hovering → 마우스를 올렸을 때 UI 변경
- Change To → 토글 버튼 기능 설정
- Open Overlay → 팝업 효과 추가
✅ CTA(Call to Action) 버튼 제작
→ On Click을 설정하여 페이지 전환 또는 특정 액션 실행 가능
✅ 모달 팝업 제작
→ On Click + Open Overlay를 활용하여 팝업창 구현 가능
✅ 토글 버튼 제작
→ Change To를 활용하여 On/Off 상태 전환 가능
✅ 페이지 전환 시 부드러운 애니메이션 적용
→ Smart Animate 선택 시 자연스러운 전환 가능
❸ Component & Instance
Component(컴포넌트)와 Instance(인스턴스)는 Figma의 핵심 재사용 기능
🔷 Component & Instance 개념
❖ Component(컴포넌트) → 원본 디자인 요소(부모), Ctrl + Alt + K
- 여러 UI 요소(버튼, 카드, 네비게이션 바 등)를 재사용 가능하도록 만든 디자인 객체
- 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위
- 한 번 만들어 놓으면 여러 개의 Instance(인스턴스) 로 복사 가능
- 원본을 수정하면 모든 Instance에도 변경 사항이 자동 적용됨
◇ Instance(인스턴스) → 컴포넌트의 복제본(자식)
- 컴포넌트에서 생성된 개별 요소로, 디자인 영역에 배치하여 사용
- 일부 속성을 변경할 수 있지만, 원본(Component)과 연결된 상태로 컴포넌트 수정시 일괄 수정됨
- ◆ Detach Instance(인스턴스 분리)하면 독립적인 요소로 변경 가능(원본과 연결이 끊긴 상태, 개별 수정 가능)
- 컴포넌트 해제 단축키 Ctrl + Alt + B
🔷 Component Properties 종류
- Variant → 버튼 상태(기본, 호버, 비활성화) 설정
- Boolean → 특정 요소를 보이거나 숨길 수 있음
- Text → 버튼이나 UI 요소의 텍스트를 손쉽게 수정 가능
- Instance Swap → 아이콘이나 컴포넌트 대체 가능
✅ 여러 상태의 버튼을 하나의 컴포넌트로 관리하려면?
→ Variants를 사용하면 Default, Hover, 클릭 상태를 하나의 컴포넌트로 구성 가능
✅ 아이콘 버튼을 만들 때 불필요한 레이어 숨기기?
→ Boolean 프로퍼티를 활용하여 아이콘을 보이거나 숨기기 가능(아래 내용에서 더 자세히)
✅ 다른 아이콘으로 변경 가능하도록 설정하려면?
→ Instance Swap 프로퍼티를 사용하면 버튼 내부의 아이콘을 자유롭게 변경 가능
✅ 버튼 텍스트를 손쉽게 변경하려면?
→ Text 프로퍼티를 추가하면 각 인스턴스에서 개별적으로 텍스트 변경 가능
❖ Component 활용
🔸재사용할 UI 요소는 Component로 제작
→ 버튼, 카드, 아이콘 등 자주 사용하는 UI 요소는 컴포넌트로 저장하면 관리가 편리
🔸모든 UI가 일관성을 유지할 수 있도록 활용
→ 예를 들어, 버튼의 기본 스타일을 수정하면 모든 인스턴스가 자동으로 업데이트
🔸Variants(변형)와 함께 사용
→ Variants를 추가하면 하나의 컴포넌트에서 여러 가지 상태(Default, Hover, Disabled 등) 관리 가능
◇ Instance 활용
🔸Instance의 개별 속성을 수정 가능
→ 텍스트, 색상, 크기 등을 변경 가능하지만 원본 Component는 유지됨
🔸Instance를 Detach(분리)하면 독립적인 요소로 변환 가능
→ Right Click → Detach Instance 선택 시 독립적인 개체로 변경 가능
🔸Instance Swap(교체) 기능 활용
→ 버튼 아이콘, 카드 디자인을 쉽게 교체 가능 (Properties 패널에서 변경 가능)
🔸팀 단위 협업 시 컴포넌트를 사용하면, 유지보수가 편리
→ 디자인 시스템 구축 시 필수 기능
💡 Component Properties 꿀Tip
파일이름과 컴포넌트이름 사이에 '/'를 사용하여 폴더별로 더욱 간편히 관리
→ 파일명/컴포넌트명
Nested Component(중첩 컴포넌트), Boolean Property 적절히 활용하여 디자인 시스템 구축(아래 설명)
Nested Component (중첩 컴포넌트) → 재사용 가능한 UI 패턴을 만들 때 사용
Nested Component는 하나의 Component(컴포넌트) 안에 또 다른 컴포넌트를 포함하는 것을 의미
- 반복되는 UI 요소를 효율적으로 관리 가능
- 컴포넌트 내에서 특정 부분만 변경할 수 있도록 설정 가능
- 모든 인스턴스에서 공통된 디자인 유지하면서도 일부 커스터마이징 가능
- 예제)
- Button 컴포넌트 안에 Icon 컴포넌트 포함
- Card 컴포넌트 안에 Profile 컴포넌트 포함
→ Nested Component를 활용하면, 하나의 버튼 컴포넌트를 만들고 내부의 아이콘만 변경 가능
✅ 버튼 내부의 아이콘만 변경하고 싶다면?
→ 아이콘을 별도의 컴포넌트로 만들고 버튼 컴포넌트에 포함하면, 아이콘만 바꾸면서도 버튼 스타일은 유지 가능
✅ 반복되는 UI 패턴(예: 카드, 리스트)을 효율적으로 관리하고 싶다면?
→ 카드 컴포넌트를 만들고, 내부 요소(썸네일, 제목, 버튼 등)를 Nested Component로 설정하면 필요할 때만 수정 가능
✅ 컴포넌트 내 특정 부분만 수정 가능하게 하고 싶다면?
→ Nested Component와 함께 Boolean, Text Property를 활용하면 더 강력한 관리 가능!
Boolean Property (불리언 프로퍼티) → 특정 요소를 보이거나 숨길 때 사용
Boolean Property는 컴포넌트의 특정 요소를 보이거나 숨기기 기능 제공
True / False(켜기 / 끄기) 설정으로 특정 요소의 가시성을 컨트롤 가능
- 버튼 아이콘을 보이거나 숨길 때 사용
- Toggle Switch(토글 스위치) 같은 UI에서 활용 가능
- 컴포넌트 내에서 특정 요소(예: 태그, 배경, 아이콘)를 쉽게 On/Off 가능
- 예제)
- 버튼에서 아이콘을 보이거나 숨길 때 사용
- 카드에서 배지를 표시할지 숨길지 설정 가능
- 네비게이션 메뉴에서 특정 아이템을 조건부로 표시
✅ 아이콘이 있는 버튼 & 없는 버튼을 하나의 컴포넌트로 관리하고 싶다면?
→ Boolean Property를 활용하여 아이콘을 On/Off할 수 있도록 설정
✅ 토글 UI를 쉽게 만들고 싶다면?
→ Boolean Property를 사용하면 "On / Off" 스위치를 한 번에 만들 수 있음
✅ 반응형 UI에서 불필요한 요소를 숨기고 싶다면?
→ Boolean Property를 추가하면 특정 요소를 숨기거나 보이게 할 수 있음
Nested Component vs Boolean Property 차이점
| Nested Component(중첩 컴포넌트) | Boolean Property(불리언 프로퍼티) | |
| 역할 | 컴포넌트 내부에 다른 컴포넌트 포함 | 특정 요소를 보이거나 숨기는 기능 |
| 사용 목적 | UI 패턴을 효율적으로 관리 | 아이콘, 버튼, 배지 등의 표시 여부 컨트롤 |
| 예제 | 카드 안에 프로필 이미지 & 버튼 포함 | 버튼 아이콘 On/Off, 배지 표시 여부 조정 |