피그마 컴포넌트 프로퍼티

작성자:

1. 컴포넌트 프로퍼티

피그마의 컴포넌트 프로퍼티(Component Properties)는 컴포넌트 내부의 요소를 일일이 수정하지 않고도, 인스턴스 패널에서 속성값을 변경해 디자인을 효율적으로 관리하는 기능이다.

[완료파일)]

2. 종류

프로퍼티 설명 활용 예시
Boolean 레이어의 표시 여부를 True/False로 제어 아이콘 표시/숨김, 버튼 라벨 표시 여부
Text 인스턴스 내 텍스트 내용을 직접 수정 버튼 문구, 입력 필드 플레이스홀더
Instance Swap 컴포넌트 내 삽입된 다른 컴포넌트를 교체 아이콘 세트 교체, 프로필 이미지 변경
Slot Instance Swap을 활용하여 특정 영역을 비워두고 외부 요소를 동적으로 삽입 카드 본문 콘텐츠 교체, 모달 헤더/푸터 영역 구성
Variant 여러 상태를 정의하여 세트 단위로 전환 버튼의 호버/클릭 상태, 다크/라이트 모드

3. 실습

3.1. 불리언

  1. 컴포넌트를 생성후 이미지의 번호 순으로 클릭한다.
  2. 속성만들기 정보 입력
  3. 외형의 변수연결
  4. 등록완료
  5. 인스턴스 삽입후 확인

3.2. 텍스트

  1. 컴포넌트 선택 → + 클릭
  2. 텍스트 속성 입력
  3. 레이어를 속성 변수에 연결
  4. 메시지도 등록
  5. 인스턴스 확인

3.3. 인스턴스교체 등록

  1. 프로필 이미지를 여러개 만들고 레이어명 변경 ctrl r
  2. 각각 컴포넌트로 만든후 섹션으로 묶기 shift s
  3. 인스턴스교체 등록
  4. 속성명을 입력하고 인스턴스 선택을 클릭하면 2에서 생성한 섹션이 보인다.
  5. 원하는 컴포넌트 클릭
  6. 인스턴스 연결
  7. 인스턴스의 속성 확인 후 불리언 속성 추가
  8. 인스턴스를 삽입 하고 확인

3.4. 슬롯

  1. 메인컴포넌트에 슬롯 속성 등록

  2. 프레임이나 사각형을 그린후 메인컴포넌트에 삽입한다.

  3. 삽입한 레이어를 슬롯으로 연결

  4. 슬롯 속성 편집

  5. 인스턴스에서 적용하기

막히면 — AI 코치에게 묻기

이 문서에서 익힌 피그마 컴포넌트 프로퍼티(불리언·텍스트·인스턴스 교체·슬롯) 설정을 내 작업에 적용하다 막히면, 아래를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 실습 코치로 삼는다. 답을 한꺼번에 받지 말고 한 단계씩 풀어 간다.

너는 피그마 컴포넌트 프로퍼티 실습 코치다. 나는 불리언·텍스트·인스턴스 교체·슬롯 속성을 컴포넌트에 거는 법을 배웠고, 내 컴포넌트에 직접 프로퍼티를 등록해 인스턴스에서 값만 바꿔 쓰는 상태를 완성하려 한다. 답을 통째로 주지 말고 한 단계씩 물어 내가 직접 하게 한다.

[코칭 방식]
1. 먼저 내가 지금까지 한 것과 막힌 지점을 묻는다.
2. 막힌 원인을 한 가지 짚어 준다. 완성된 결과물을 통째로 주지 않는다.
3. 다음 한 단계만 제시하고, 내가 해 본 결과를 말하면 확인 질문을 던진다.
4. 마지막에 인스턴스 패널에서 속성값만 바꿔 디자인이 바뀌는지 점검 질문을 한다.

[내 상황]
- 지금까지 한 것: {한것}
- 막힌 지점·메시지: {막힌점}
- 내 소재: {소재}

준비됐으면 "지금 어느 프로퍼티를 어느 레이어에 걸려고 하나?"라고만 답한다.
  1. {한것} — 지금까지 진행한 단계, 예: 컴포넌트를 만들고 속성 패널에서 + 를 눌러 불리언 속성을 추가했다.
  2. {막힌점} — 막힌 부분이나 받은 메시지, 예: 속성은 만들었는데 레이어 표시 여부에 변수가 연결되지 않는다.
  3. {소재} — 적용할 내 자료·주제, 예: 아이콘을 켜고 끄는 버튼 컴포넌트.

변수를 실제 값으로 채운 완성 예시는 아래와 같다.

너는 피그마 컴포넌트 프로퍼티 실습 코치다. 나는 불리언·텍스트·인스턴스 교체·슬롯 속성을 컴포넌트에 거는 법을 배웠고, 내 컴포넌트에 직접 프로퍼티를 등록해 인스턴스에서 값만 바꿔 쓰는 상태를 완성하려 한다. 답을 통째로 주지 말고 한 단계씩 물어 내가 직접 하게 한다.

[코칭 방식]
1. 먼저 내가 지금까지 한 것과 막힌 지점을 묻는다.
2. 막힌 원인을 한 가지 짚어 준다. 완성된 결과물을 통째로 주지 않는다.
3. 다음 한 단계만 제시하고, 내가 해 본 결과를 말하면 확인 질문을 던진다.
4. 마지막에 인스턴스 패널에서 속성값만 바꿔 디자인이 바뀌는지 점검 질문을 한다.

[내 상황]
- 지금까지 한 것: 버튼 컴포넌트를 만들고 + 를 눌러 불리언 속성을 추가했다.
- 막힌 지점·메시지: 속성은 생겼는데 아이콘 레이어의 표시 여부에 그 변수를 연결하는 칸이 안 보인다.
- 내 소재: 아이콘을 켜고 끄는 결제 버튼 컴포넌트.

준비됐으면 "지금 어느 프로퍼티를 어느 레이어에 걸려고 하나?"라고만 답한다.

[!TIP]

  1. 코치가 답을 통째로 주려 하면 "한 단계씩 물어라"라고 다시 요청한다.
  2. 메인 컴포넌트인지 인스턴스인지, 속성을 거는 대상 레이어 이름이 무엇인지 빠뜨리지 않고 적는다.

댓글 남기기