피그마 기획

안녕하세요.

오늘은 피그마로 그리는 화면설계서에 대해 스터디한 내용을 쓰려고 합니다.

Figma로 화면 설계를 하면서 컴포넌트 & 인스턴스의 개념과 컴포넌트 프로퍼티 활용하여 화면 그리기에 대해 알아보도록 하겠습니다.

 

피그마로 기획서 그리기

 

컴포넌트 & 인스턴스

1. 컴포넌트(Component)개념과 활용 방법

Figma의 컴포넌트(Component)는 디자인에서 재사용 가능한 요소입니다.

버튼, 카드, 네비게이션 바 같은 UI 요소를 한 번 만들어놓고 여러 곳에서 동일한 스타일과 동작을 유지할 수 있도록 합니다.

 

2. 인스턴스(Instance)

인스턴스(Instance)는 컴포넌트의 복제본(클론)입니다. 컴포넌트와 연결된 상태이며, 원본(컴포넌트)이 수정되면 모든 인스턴스도 자동으로 업데이트됩니다.

• 컴포넌트의 복제본이며, 원본이 수정되면 함께 변경됨

• 특정 속성을 변경하여 오버라이드(Override) 가능

• 원본과 연결을 유지하면서도 일부 요소만 커스터마이징 가능

 

3. 인스턴스 오버라이드(Override)

인스턴스에서는 원본 컴포넌트와 연결을 유지하면서도 특정 속성을 변경할 수 있습니다.

이를 오버라이드(Override)라고 합니다.

연결을 유지하면 인스턴스를 수정하더라도, 원본 컴포넌트를 업데이트하면 변경 사항이 반영됩니다.

 

• 텍스트(Text) 변경 → 버튼의 “확인”을 “취소”로 변경

• 색상(Color) 변경 → 기본 버튼을 파란색에서 빨간색으로 변경

• Boolean 속성 → 아이콘 보이기/숨기기 토글

• Instance Swap → 특정 아이콘을 다른 아이콘으로 변경

 

4. 컴포넌트와 인스턴스 활용 예시

 

• 버튼 컴포넌트 & 인스턴스

컴포넌트 : 기본 버튼 디자인 (파란색, “확인” 텍스트)

인스턴스:  “확인” → “취소” 변경 (텍스트 오버라이드) 

색상을 파란색 → 빨간색 변경 (스타일 오버라이드)

 

• 아이콘 버튼 컴포넌트

컴포넌트 : 기본 아이콘 버튼 (Boolean 속성으로 아이콘 ON/OFF)

인스턴스 →  아이콘을 변경 (Instance Swap) →  아이콘 숨김 (Boolean 속성 False)

 

컴포넌트 프로퍼티 활용

1. 컴포넌트 프로퍼티(Component Properties)

컴포넌트 프로퍼티는 컴포넌트 내부 요소를 변경할 수 있는 설정 값입니다. 이를 통해 컴포넌트의 다양한 변형을 오버라이드(Override) 없이도 쉽게 조절할 수 있습니다.

• 다양한 변형(Variants) 없이도 인스턴스 조정 가능

• 디자인 시스템을 유지하면서도 유연한 사용 가능

• 디자이너와 개발자 간의 협업이 쉬워짐

 

1) Boolean 프로퍼티 (True/False)

특정 요소(예: 아이콘, 텍스트, 배경)를 보이거나 숨기도록 설정하는 기능입니다.

• 사용 예시

  버튼에서 아이콘 ON/OFF ✓ 배지(Badge) ON/OFF ✓ 카드의 서브텍스트 표시 여부

• 적용 방법

① 컴포넌트를 선택하고, 오른쪽 패널의 Properties에서 + Add Property 클릭

② Boolean을 선택하고 이름 설정 (예: Radio)

③ Boolean 프로퍼티를 조절할 요소를 선택

④ Appearance 섹션에서 Radio Property 선택

• 결과

  True이면 요소가 보임

  False이면 요소가 숨겨짐

 

2) Text 프로퍼티 (텍스트 변경)

인스턴스에서 특정 텍스트 내용을 쉽게 변경할 수 있는 기능입니다.

• 사용 예시

✓ 버튼의 텍스트 변경 (확인 → 취소)

✓ 카드의 제목 변경 (Welcome → Hello!)

✓ 네비게이션 메뉴의 항목 수정

 

• 적용 방법

a. 컴포넌트를 선택하고, Properties에서 + Add Property 클릭

b. Text를 선택하고 이름 설정 (예: Button Label)

c. 변경할 텍스트 요소를 선택

d. Layer 섹션에서 텍스트 옆의 "∗" 버튼을 클릭하고 방금 만든 프로퍼티 연결

 

• 결과

인스턴스에서 텍스트 내용을 쉽게 변경 가능

디자인 시스템을 유지하면서도 유연한 사용 가능

 

3) Instance Swap 프로퍼티 (컴포넌트 교체)

특정 요소(아이콘, 이미지 등)를 다른 요소로 교체할 수 있습니다.

• 사용 특징

✓ 인스턴스는 마스터 컴포넌트에 없는 요소를 추가 할 수 없음

✓ 바꾸어 줄 아이콘 이미지는 모두 컴포넌트로 만들어 놓아야 함

예 : 로고 변경 (회사 로고 → 파트너사 로고)

예 : 프로필 아바타 변경

 

• 적용 방법

① 교체를 적용할 이미지는 미리 컴포넌트로 지정 필요

② Instance Swap을 선택

③ 변경할 요소(아바타)를 선택

④ 오브젝트 복사 후 아바타 변경 (Avatars1 → Avatars3)

 

• 결과

인스턴스에서 내부 요소를 쉽게 변경 가능

디자인 시스템을 유지하면서도 유연한 사용 가능

 

 

4) Variant 프로퍼티 (상태 관리)

하나의 컴포넌트에서 여러 상태(Variants)를 관리할 수 있습니다.

• 사용 예시

버튼의 상태 변경 (기본 / 호버 / 클릭)

토글 스위치 ON/OFF 상태 변경

알림 배지의 스타일 변경 (기본 / 강조)

 

• 적용 방법

① 전체 컴포넌트를 선택한 후, 오른쪽 패널에서 Combine as variants클릭

② Properties에서 Variant 프로퍼티를 설정하여 상태를 관리

 

• 결과

인스턴스에서 Variant를 쉽게 변경 가능

하나의 컴포넌트로 다양한 변형을 관리 가능

 

5) Variant 다중 프로퍼티 설정



• 적용 방법

① Red색상의 컴포턴트를 선택 후 Property=Color, Value=red로 설정

② 추가적으로 blue, yellow도 추가

③ Radius Property 추가하여 Value = 0, 25, 65 추가 설정

④ 인스턴스에 Property 적용

 

• 결과

인스턴스에서 Variant를 쉽게 변경 가능

하나의 컴포넌트로 다양한 변형을 관리 가능

 

무료 이미지 plugin 사용하기 _unsplash

https://www.figma.com/ko-kr/community/plugin/738454987945972471/unsplash

 

무료 아이콘 plugin 사용하기 _Iconify

https://www.figma.com/ko-kr/community/plugin/735098390272716381/iconify

마치며

피그마로 기획서를 그리기 위해서 컴포넌트와 인스턴스의 개념, 컴포넌트 프라퍼티 개념인 Boolean 프로퍼티, Text 프로퍼티 (텍스트 변경), Instance Swap 프로퍼티 (컴포넌트 교체), Variant 프로퍼티 (상태 관리), Variant 다중 프로퍼티 설정에 대해 알아볼 수 있고 실습하는 시간이었습니다.