기획자용 Figma Components
: 반복 화면 수정 시간 1/3로 줄이는 법

서론

기획서용 화면 시안을 만들다 보면 반복되는 UI가 정말 많습니다.
버튼, 카드, 리스트, 배너, 입력 폼… 처음엔 복사해서 붙이면 빨라 보이죠.
그런데 요구사항이 바뀌는 순간, 그 복붙은 갑자기 “수정 마라톤”이 됩니다. 🏃‍♂️💨

예를 들어 버튼 문구가 바뀌거나, 카드 간격이 달라지거나, 배경색이 변경되면 화면 곳곳의 복사본을 하나씩 찾아 고쳐야 합니다.
이때 시간을 줄여주는 기능이 바로 Figma Components(컴포넌트)입니다.

컴포넌트를 쓰면 “원본 1개”를 만들고, 화면에는 그 복제본(인스턴스)을 배치합니다. 원본을 수정하면 인스턴스도 함께 반영되기 때문에, 반복 화면 수정 시간이 크게 줄어듭니다.

오늘의 목표: 컴포넌트 기본(원본/인스턴스/오버라이드) + 실전 예제 2개(버튼, 카드)로 “수정 1번 → 전체 반영” 흐름을 손에 익힌다.

📚 목차

1. Figma Components가 정확히 뭐예요?
2. 왜 ‘기획자’에게 컴포넌트가 특히 중요한가
3. 필수 용어 3개: Component / Instance / Override
4. 추천 작업 흐름: 화면 만들기 전에 이것부터
5. 실전 예제 1) 버튼 컴포넌트 만들기
6. 실전 예제 2) 카드(리스트) 컴포넌트 만들기
7. 네이밍 규칙 & 구조(나중에 안 망하는 방식)
8. 초보가 자주 하는 실수 7가지(해결 포함)
9. 결론
10. FAQ

본론

1) Figma Components가 정확히 뭐예요?

컴포넌트(Component)는 “재사용을 위한 원본”입니다.
화면에 실제로 배치해서 쓰는 건 인스턴스(Instance)이고, 원본을 수정하면 인스턴스에 그 변경이 퍼집니다.

한 줄로 정리하면, 컴포넌트는 ‘반복되는 UI를 중앙 관리하는 방식’입니다.

2) 왜 ‘기획자’에게 컴포넌트가 특히 중요한가

• 요구사항 변경이 잦다: 문구/상태/버튼 노출 같은 변경을 “한 번에” 반영하기 좋습니다.
• 기획서 화면의 일관성이 중요: 같은 버튼이 화면마다 다르게 생기는 문제를 줄입니다.
• 검수 시간이 줄어든다: 화면마다 UI가 달라지는 “미세 오차”가 줄어 QA가 편해집니다.

기획자 관점 핵심: 컴포넌트는 디자인 기능이 아니라, “수정 비용”을 줄이는 구조입니다.

3) 필수 용어 3개: Component / Instance / Override

• Component(원본): 재사용 기준이 되는 마스터(원형)
• Instance(인스턴스): 화면에 가져다 쓰는 복제본(원본과 연결됨)
• Override(오버라이드): 인스턴스에서 “일부만 예외적으로” 바꾸는 것(예: 버튼 문구만 변경)

이 3개만 잡히면 컴포넌트는 절반 끝입니다. 나머지 절반은 “어떻게 구조화하느냐”예요.

4) 추천 작업 흐름: 화면 만들기 전에 이것부터

1. 반복되는 UI 후보를 먼저 찾는다 (버튼, 카드, 리스트 아이템, 탭, 입력폼)
2. 후보를 Auto Layout으로 안정화한다 (간격/패딩/정렬)
3. 안정화된 UI를 컴포넌트로 등록한다
4. 화면은 인스턴스로 조립한다

한 줄 공식: Auto Layout로 “안 무너지게” 만든 뒤 → Components로 “안 흩어지게” 만든다.

5) 실전 예제 1) 버튼 컴포넌트 만들기

버튼은 가장 좋은 입문 예제입니다. 문구가 바뀌는 일이 많고, 화면에도 자주 등장하니까요.

1. 버튼을 Auto Layout으로 만든다 (텍스트 + 패딩 + 정렬)
2. 버튼 프레임의 폭/높이를 상황에 맞게 설정한다 (보통 텍스트는 Hug, 버튼은 Hug 또는 Fill)
3. 버튼을 선택하고 컴포넌트로 만들기를 실행한다
4. 여러 화면에 인스턴스를 배치한다
5. 문구/색상 등 일부만 인스턴스에서 바꿔보고(Override), 원본 수정도 해본다

테스트 미션: 원본 버튼의 패딩을 바꿔보세요. 인스턴스가 전부 같이 변하면 성공입니다.

6) 실전 예제 2) 카드(리스트) 컴포넌트 만들기

기획서 시안에서 “카드 리스트”는 거의 매번 등장합니다. 카드가 컴포넌트가 되면, 화면이 늘어날수록 효율이 커집니다.

1. 카드 내부를 Auto Layout으로 구성한다 (이미지/텍스트/버튼의 방향과 간격)
2. 텍스트가 길어져도 깨지지 않게 Hug/Fill을 점검한다
3. 카드를 컴포넌트로 만든다
4. 리스트는 카드 인스턴스를 복제해서 구성한다
5. 카드 원본에서 제목 스타일/간격을 수정해, 전체 리스트에 반영되는지 확인한다

팁: “카드 내부(컴포넌트)”와 “카드 목록(컨테이너)”은 역할을 분리하세요.
내부는 컴포넌트, 목록 정렬/간격은 Auto Layout(컨테이너)이 안정적입니다.

7) 네이밍 규칙 & 구조(나중에 안 망하는 방식)

컴포넌트는 “만드는 것”보다 “찾는 것”이 더 중요해집니다. 그래서 네이밍만 정리해도 실무 체감이 큽니다.

7-1. 추천 네이밍 예시

• Button/Primary
• Button/Secondary
• Card/Product
• List/Item

7-2. 컴포넌트 배치 구조

• Components 전용 페이지(또는 섹션)를 만든다
• 버튼/카드/폼 등 카테고리별로 구역을 나눈다
• 화면 페이지에서는 인스턴스로만 조립한다(원본을 화면에 섞지 않기)

실무 꿀팁: “원본은 한 곳에 모아두고, 화면은 인스턴스로만 만든다”가 유지보수 난이도를 크게 낮춥니다.

8) 초보가 자주 하는 실수 7가지(해결 포함)

1. 컴포넌트 만들기 전에 레이아웃이 불안정
   → 먼저 Auto Layout로 간격/패딩/정렬을 안정화한 뒤 컴포넌트화하세요.
2. 원본과 인스턴스를 화면에 섞어둠
   → 원본은 Components 구역에 보관, 화면에는 인스턴스만 쓰는 편이 관리가 쉽습니다.
3. 오버라이드를 남발해서 일관성이 깨짐
   → 예외가 많아지면 “컴포넌트의 의미”가 사라집니다. 예외가 반복되면 변형(Variants)로 분리하세요.
4. 네이밍이 제각각이라 검색이 안 됨
   → Button/…, Card/…처럼 슬래시 구조로 통일하세요.
5. 텍스트가 늘어나면 컴포넌트가 깨짐
   → Hug/Fill/Fixed를 다시 점검하고, 텍스트 리사이즈 설정도 확인하세요.
6. 카드 내부와 리스트 컨테이너를 한 컴포넌트로 묶음
   → 내부(컴포넌트)와 목록(컨테이너 Auto Layout)은 분리하는 게 보통 더 안정적입니다.
7. 화면마다 다른 버튼을 컴포넌트 하나로 억지로 해결
   → 목적이 다른 버튼은 Primary/Secondary처럼 분리하는 게 오히려 빠릅니다.

결론

컴포넌트는 “잘 만들어진 화면”을 “잘 관리되는 화면”으로 바꿔줍니다.
기획서용 시안에서 반복 UI가 많을수록 효과가 커지고, 요구사항 변경이 잦을수록 시간 절약 폭이 더 커집니다.

오늘은 Component/Instance/Override와 버튼·카드 예제로 반복 화면 수정 시간을 줄이는 기본기를 잡았습니다.
다음 글에서는 예외가 늘어나는 순간(상태/사이즈/색상)을 깔끔하게 관리하는 Variants를 다루면 “복붙 지옥”이 사실상 끝납니다. (박수는 다음 편에서 👏)

FAQ

Q 컴포넌트와 오토 레이아웃 중 뭐부터 해야 하나요?

A 보통은 Auto Layout → Components 순서를 추천합니다. 레이아웃(간격/패딩/정렬)이 안정된 상태에서 컴포넌트로 만들면, 수정에도 더 강합니다.

Q 인스턴스에서 수정(Override)하면 원본에도 반영되나요?

A 아닙니다. 인스턴스에서 바꾸는 건 “예외 처리”이고, 원본을 수정해야 전체 인스턴스에 반영됩니다. 그래서 “일회성 예외”는 Override, “반복되는 예외”는 Variants로 분리하는 흐름이 좋습니다.

Q 컴포넌트가 많아지면 오히려 복잡해지지 않나요?

A 네이밍 규칙과 배치 구조를 정리하지 않으면 복잡해질 수 있습니다. 그래서 Button/… Card/…처럼 카테고리 네이밍을 통일하고, 원본을 Components 구역에 모아두는 방식이 효과적입니다.

Q 다음 편으로 Variants를 다루는 게 좋은 이유는 뭔가요?

A 컴포넌트를 쓰다 보면 버튼 상태(기본/비활성/로딩), 크기(S/M/L), 컬러(Primary/Secondary)처럼 “반복되는 예외”가 등장합니다. 이때 Variants가 가장 깔끔한 관리 방식입니다.