초보 디자이너를 위한 Figma 필수 기능 8가지

figma

Figma는 초보 디자이너부터 전문가까지 누구나 효율적으로 사용할 수 있는 강력한 디자인 툴입니다. 특히, UI/UX 디자인 작업에서 필수적인 도구로 자리 잡고 있는데요. 이번 글에서는 Figma의 주요 기능과 플러그인을 초보자도 이해하기 쉽게 정리해 보았습니다.

 

1) Component와 Instance의 차이

Figma에서 Component와 Instance는 반복되는 디자인 요소를 효율적으로 관리할 때 사용됩니다.

활용 팁: UI 디자인에서 버튼, 카드 같은 반복 요소를 관리할 때 유용.

• Component
  • 기본 템플릿으로 재사용 가능한 요소를 생성할 때 사용.
  • 수정 시, 연결된 모든 Instance에 변경 사항이 반영됨.
  • Command + Alt + K(Mac) 또는 Ctrl + Alt + K(Windows)로 생성 가능.
• Instance
  • • Component에서 파생된 개별 요소.
    • Component의 원본 스타일과 구조를 유지하면서도, 일부 속성(텍스트, 색상 등)은 개별적으로 수정 가능.
    • Component에 변경이 발생하면, Instance도 함께 업데이트됨.

---

2) Add Variants 기능으로 상태 관리하기

Figma의 Variants 기능은 하나의 Component에 다양한 상태(예: 기본, 호버, 클릭)를 추가해 관리합니다.

• Variants를 활용하면 반응형 UI 디자인이나 사용자 인터랙션을 효율적으로 설계할 수 있음
• 여러 Variants를 생성하면 Variants Group으로 묶이고, 이를 통해 상태 전환이 간편해짐.
• 예: 버튼 디자인에서 기본, 호버, 클릭 상태를 각각 Variant로 추가하여 통합 관리 가능.
• Variants 추가 방법:
  1. Component를 선택한 뒤 우측 패널에서 "Add Variant" 클릭.
  2. Variant 속성을 정의(예: Property: State, Value: Hover).
  3. Variants Group에 대해 Interaction 설정 가능.

---

3) Frame과 Group의 차이

• 추천: 반응형 디자인 작업에서는 Frame을 사용하고, 간단한 그룹화에는 Group을 활용

• Frame
  • Figma의 핵심 레이아웃 요소로, 컨테이너 역할을 함.
  • 부모-자식 관계를 기반으로 개별 요소들의 위치, 크기, 제약 조건을 설정 가능.
  • Auto Layout, Constraints, Clip Contents와 같은 고급 기능을 지원.
• Group
  • 단순히 여러 개의 요소를 묶는 기능.
  • 요소 간 관계 설정이나 레이아웃 기능은 제공하지 않음.
  • Group을 사용하면 요소들의 기본 정렬만 가능하며, Constraints 설정은 불가.

---

4) Auto Layout 기능으로 레이아웃 자동화

Auto Layout은 Figma의 강력한 레이아웃 도구로, 콘텐츠 크기 변화에 따라 요소를 자동으로 배치하는 기능

• 주요 특징:
  • 요소 간 간격, 패딩, 정렬 설정 가능.
  • 콘텐츠 크기에 따라 컨테이너의 크기가 자동으로 변경됨.
  • 버튼, 카드 레이아웃, 목록과 같은 반응형 UI 디자인에 유용.
• 사용 방법:
  1. Frame을 선택한 후 우측 패널에서 "Add Auto Layout" 클릭.
  2. 방향(수평/수직), 간격, 패딩 등을 설정.

---

5) Constraints 기능으로 반응형 UI 설계하기

Constraints는 자식 요소가 부모 Frame 크기 변경에 따라 동적으로 배치되도록 설정하는 기능.

• 설정 가능한 옵션:
  • Left, Right, Top, Bottom: 부모의 특정 방향에 고정.
  • Center: 부모 Frame의 중심에 고정.
  • Scale: 부모 크기에 비례하여 크기가 조정됨.
  • Stretch: 부모 Frame에 맞춰 폭 또는 높이가 늘어남.

주로 반응형 디자인을 위한 요소 배치에 활용.

---

6) Hug / Fill Container / Fixed의 차이

반응형 디자인에서는 Hug와 Fill 활용

• Hug Contents
  • 자식 요소의 크기에 따라 부모 Frame 크기가 자동으로 조정됨.
  • 예: 텍스트가 길어지면 버튼 Frame 크기도 늘어남.
• Fill Container
  • 부모 Frame에 맞춰 자식 요소의 크기가 조정됨.
  • 예: 레이아웃 내 버튼이 가로로 꽉 채워지는 경우.
• Fixed Size
  • 크기가 고정되어 부모나 자식 요소의 변화에 영향을 받지 않음.
  • 예: 특정 크기의 고정형 카드 UI.

---

7) Clip Contents 기능으로 영역 제어

Clip Contents는 부모 Frame 영역 밖으로 벗어난 자식 요소를 숨기거나 자르는 기능.

• 활성화 방법: Frame을 선택한 뒤 우측 패널에서 "Clip Contents" 체크.
• 주로 이미지 크롭이나 스크롤 가능한 콘텐츠 영역을 설정할 때 유용.

---

8) Figma에서 추천하는 플러그인 2가지

디자인 작업 효율을 높이는 Figma 플러그인을 추천합니다.

• Unsplash
  • 무료 고해상도 이미지를 피그마에서 바로 검색하고 삽입할 수 있는 플러그인.
  • UI 목업이나 배경 이미지로 활용 가능.
• Remove BG
  • 이미지에서 배경을 자동으로 제거하는 플러그인.
  • 인물 사진이나 제품 이미지 배경 제거 작업에 적합.
  • 유료 결제 필요