컴포넌트 & 인스턴스

마스터 컴포넌트 복사 시 생성

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma에서 마스터 컴포넌트(Master Component)를 복사(Ctrl/Cmd+C)하여 붙여넣기(Ctrl/Cmd+V)하면 인스턴스(Instance)가 생성되는 것이 아닌가요? 왜 베리언트(Variant)가 생성되는지 모르겠습니다.

답변

Figma에서 마스터 컴포넌트(Master Component)를 복사(Ctrl/Cmd+C)하여 붙여넣기(Ctrl/Cmd+V)하면 항상 인스턴스(Instance)가 생성됩니다. 베리언트(Variant)가 생성되는 경우는 다음과 같은 상황일 수 있습니다.

베리언트가 생성되는 경우:

베리언트 세트(Variant Set) 내에서 복사/붙여넣기:

만약 이미 존재하는 베리언트 세트(예: `Button/Primary`, `Button/Secondary` 등을 포함하는 `Button` 컴포넌트 세트) 내부에서 특정 베리언트(예: `Button/Primary`)를 복사하여 같은 베리언트 세트 안에 붙여넣으면, 새로운 베리언트가 생성될 수 있습니다. 이는 베리언트 세트의 구조를 확장하려는 의도로 해석될 수 있습니다.

이 경우, 새로 생성된 베리언트는 기존 베리언트와 동일한 속성을 가지며, 베리언트 속성 패널에서 새로운 속성 값을 지정하여 다른 베리언트로 만들 수 있습니다.

마스터 컴포넌트가 베리언트 세트의 일부인 경우:

만약 당신이 복사하려는 '마스터 컴포넌트' 자체가 사실은 베리언트 세트의 일부인 경우 (즉, 베리언트 세트의 부모 컴포넌트), 이를 복사하여 붙여넣으면 해당 베리언트 세트의 인스턴스가 생성됩니다. 이 인스턴스는 베리언트 속성을 통해 다양한 상태로 변경할 수 있습니다.

인스턴스를 생성하는 일반적인 방법:

마스터 컴포넌트 복사/붙여넣기: 마스터 컴포넌트를 선택하고 `Ctrl/Cmd + C`, `Ctrl/Cmd + V`를 누르면 인스턴스가 생성됩니다.

`Alt` (Option) + 드래그: 마스터 컴포넌트 또는 기존 인스턴스를 선택한 후 `Alt` (Option) 키를 누른 채 드래그하면 새로운 인스턴스가 생성됩니다.

Assets 패널 사용: 좌측 `Assets` 패널에서 원하는 컴포넌트를 찾아 캔버스로 드래그하면 인스턴스가 생성됩니다.

확인 사항:

복사하려는 요소가 '마스터 컴포넌트'인지, 아니면 '베리언트 세트' 자체인지, 또는 '베리언트 세트 내의 특정 베리언트'인지 정확히 확인해보세요.

붙여넣기한 요소가 레이어 패널에서 어떤 아이콘으로 표시되는지 확인하세요. 다이아몬드 아이콘은 마스터 컴포넌트, 속이 빈 다이아몬드 아이콘은 인스턴스, 여러 개의 다이아몬드 아이콘은 베리언트 세트를 의미합니다.