피그마 컴포넌트｜하나 고치면 전부 바뀌게 만들기

2026-10-30 업데이트 · 편집부 · 읽는 시간 약 2분

버튼 디자인이 화면 50곳에 쓰였는데 색을 바꿔야 한다면, 컴포넌트 없이는 50번 고쳐야 합니다. 컴포넌트를 쓰면 한 번입니다.

메인과 인스턴스

인스턴스는 메인을 따릅니다. 다만 인스턴스에서 바꾼 부분은 그 인스턴스만 유지합니다. 글자나 색을 개별로 바꿀 수 있습니다.

만들기

1. 컴포넌트로 만들 요소를 선택합니다
2. Ctrl+Alt+K
3. 레이어 이름 앞에 보라색 마름모 아이콘이 생깁니다

여러 요소를 각각 컴포넌트로 만들려면 전부 선택하고 오른쪽 클릭 → ‘여러 컴포넌트 만들기’를 쓰세요.

메인은 따로 모아 두세요

메인 컴포넌트를 화면 디자인 안에 두면 실수로 고치거나 지우게 됩니다.

메인을 지우면 인스턴스가 전부 깨집니다. 따로 두는 습관이 중요합니다.

쓰기

에셋 패널을 쓰세요. 왼쪽 패널의 에셋 탭에 만든 컴포넌트가 모여 있습니다. 거기서 캔버스로 끌어다 놓으면 됩니다. 메인을 찾아다니지 않아도 됩니다.

인스턴스에서 바꿀 수 있는 것

구조를 바꾸려면 메인을 고쳐야 합니다. 인스턴스에서 바꾼 것을 되돌리려면 오른쪽 패널에서 ‘변경 사항 초기화’를 누릅니다.

변형(Variants) — 상태를 한 컴포넌트에

버튼은 보통 여러 상태가 있습니다. 기본 / 마우스 올림 / 누름 / 비활성. 이걸 따로 컴포넌트 네 개로 만들면 관리가 번거롭습니다.

변형으로 묶으면 하나의 컴포넌트에서 상태만 골라 쓸 수 있습니다.

만드는 방법

1. 각 상태를 컴포넌트로 만듭니다
2. 전부 선택합니다
3. 오른쪽 패널의 ‘변형으로 결합’
4. 속성 이름과 값을 정리합니다 (예: 속성 상태, 값 기본·올림·누름·비활성)

이후 인스턴스를 쓸 때 오른쪽 패널에서 상태를 드롭다운으로 고릅니다.

속성을 여러 개 둘 수 있습니다

세 속성을 조합하면 조합 수가 많아집니다. 처음부터 다 만들지 마세요. 실제로 쓰는 조합만 만들고 필요할 때 늘리세요.

속성 노출 — 인스턴스에서 바꿀 항목 정하기

컴포넌트 안의 글자나 아이콘을 인스턴스에서 쉽게 바꾸게 할 수 있습니다.

메인 컴포넌트를 선택하고 오른쪽 패널에서 속성을 추가합니다. 그러면 인스턴스를 쓸 때 레이어를 파고들지 않고 오른쪽 패널에서 바로 바꿀 수 있습니다.

버튼 컴포넌트에 ‘글자’ 텍스트 속성과 ‘아이콘 표시’ 불리언 속성을 달아 두면, 쓸 때마다 패널에서 글자를 입력하고 아이콘을 켜고 끌 수 있습니다.

오토레이아웃과 함께 쓰세요

컴포넌트와 오토레이아웃은 같이 써야 값을 합니다.

오토레이아웃 없는 버튼 컴포넌트는 글자가 길어지면 깨집니다. 오토레이아웃을 걸어 두면 글자 길이에 맞춰 버튼이 늘어납니다.

자세한 설정은 피그마 오토레이아웃에 있습니다.

무엇을 컴포넌트로 만들까

두 번 이상 쓰이는 것은 컴포넌트로 만드세요. 한 번만 쓰이는 건 만들 필요가 없습니다.

자주 걸리는 지점

마지막 항목을 함께 쓰면 좋습니다. 색과 글꼴을 스타일로 등록해 두고 컴포넌트에서 그 스타일을 쓰면, 브랜드 색이 바뀔 때 스타일 하나만 고치면 됩니다.