Figmapedia
목록으로 돌아가기
컴포넌트 & 인스턴스

피그마에서 리스트 형태의 컴포넌트 인스턴스에 새로운 리스트 아이템을 추가하고 싶습니다. 인스턴스 내에서 아이템을 복사/붙여넣기 하면 컴포넌트 외부로 추가되는데, 인스턴스 내부에서 아이템을 추가하는 방법이나 권장되는 컴포넌트 구조가 있을까요?

오픈카톡방 2026. 3. 7.

컴포넌트 인스턴스 내에서 리스트 아이템을 동적으로 추가하는 것은 Figma의 컴포넌트 구조상 직접적으로는 어렵습니다. 인스턴스는 마스터 컴포넌트의 구조를 따르기 때문에, 인스턴스 내부에서 새로운 레이어를 추가하는 것은 불가능하며, 추가하더라도 인스턴스 외부로 분리됩니다.

이러한 상황에서 권장되는 몇 가지 방법이 있습니다:

1. **Auto Layout과 Component Properties (가장 권장):**

* 리스트 아이템 하나를 컴포넌트로 만듭니다.

* 이 아이템 컴포넌트들을 포함하는 상위 리스트 컴포넌트를 Auto Layout으로 설정합니다.

* 상위 리스트 컴포넌트 내에 여러 개의 아이템 컴포넌트를 미리 넣어두고, 각 아이템 컴포넌트에 `boolean` 프로퍼티(예: `isVisible`)를 추가하여 인스턴스에서 필요에 따라 보이거나 숨길 수 있도록 합니다.

* 또는, `instance swap` 프로퍼티를 사용하여 아이템 컴포넌트 자체를 다른 컴포넌트로 교체할 수 있도록 합니다.

* 가장 유연한 방법은, 리스트 컴포넌트 내에 'Slot' 역할을 하는 빈 컴포넌트(예: `_Item Slot`)를 Auto Layout으로 여러 개 배치하고, 인스턴스에서 이 슬롯을 실제 아이템 컴포넌트로 스왑하여 사용하는 것입니다. 이렇게 하면 필요한 만큼 아이템을 추가/삭제하는 효과를 낼 수 있습니다.

2. **Variants (제한적):**

* 미리 정의된 개수의 리스트 아이템을 가진 여러 Variant를 만듭니다. (예: `List/ItemCount=1`, `List/ItemCount=2`, `List/ItemCount=3` 등)

* 인스턴스에서 필요한 아이템 개수에 따라 Variant를 변경하여 사용합니다.

* **단점:** 아이템 개수가 유동적일 경우 모든 경우의 수를 Variant로 만드는 것은 비효율적입니다.

3. **Detach Instance (최후의 수단):**

* 정말 필요한 경우, 인스턴스를 Detach(분리)하여 일반 프레임으로 만든 후 자유롭게 요소를 추가/삭제할 수 있습니다.

* **단점:** 컴포넌트의 이점을 잃게 되며, 마스터 컴포넌트의 변경 사항이 더 이상 반영되지 않습니다.