피그마 컴포넌트의 인스턴스 속성을 Reset 하는 방법

Q. 인스턴스의 네이밍을 기존 Main Componet와 동일하게 변경하고 싶습니다. 

 

 

 

[가정]

• 컴포넌트를 생성 후에 그 Main Component(btn-primary)를 복제한 Instance를 이름과 색상을 변경하였다고 가정해봅니다.
• 해당 instance를 선택하고 오른쪽 Design 패널에서 instance 네임 우측에 있는 더보기 아이콘을 클릭했습니다. (위 그림 참고)

 

[인스턴스의 옵션]

• Detach instance : instance와 원본 객체인 Main Component와의 연결을 끊을 수 있습니다.  즉 Main Component를 수정해도 Detach 한 객체는 더 이상 영향을 받지 않습니다. 
• Reset all overrides:  수정된 속성을 모두 원본과 동일하게 되돌리고자 할 때 이를 클릭합니다.
• Reset name: 이름 속성만 되돌릴 수 있습니다. (ex. btn-primary-test -> btn-primary) 
• Reset fill: 노란색인 btn-primary-test 버튼을 보라색으로 되돌릴 수 있습니다.  이때 이름은 되돌려지지 않고 이름 속성만 Reset됩니다.

 

A. 즉 변경된 버튼의 컬러(fill) 속성은 그대로 두고 이름만 Reset을 원하시면 Rest name을 클릭하여, 다시 Main Component의 네이밍을 그래로 상속 받을 수 있습니다. 

 

 

 

 

 

 

Q. 컴포넌트를 수정할 수 없나요?

보통 이 경우는 인스턴스를 다시 컴포넌트로 생성한 경우의 예입니다.  예를 들어 btn-primary라는 컴포넌트를 생성후에 이 컴포넌트를 복제한 인스턴스를 다시 컴포넌트로 만든 경우(아래 예시 참고)

즉 질문을 주신 분의 의도는 btn-secondary에 아이콘을 추가 하고 싶은데 수정이 안되어 질문을 하셨습니다. 

 

 

위 예시의 경우는 컴포넌트 안쪽의 인스턴스를 직접 수정을 하는데 제한이 생깁니다. btn-primary 안쪽에 아이콘을 추가하고 싶지만 인스턴스 파일이기 때문에 아이콘을 추가를 할수가 없기 때문이죠. 

 

해당 컴포넌트를 수정하기 위해서는 아래 방법을 참고해주세요. 

 

 

1. 인스턴스(instance) 에셋을 선택합니다.
2. 오른쪽 Design 패널에서 컴포넌트 에셋의 이름(btn-primary) 우측에 있는 컴포넌트 아이콘(Go to main component)을 클릭합니다.

 

main component인 btn-primary에 아이콘 에셋을 추가합니다.

그러면 결과적으로 연결되어 있는 컴포넌트 에셋인 btn-secondary에도 아이콘이 추가됩니다. 

 

 

 

피그마 기초 - 컴포넌트의 개념

 

9월 figma Releases - Figma 컴포넌트 기능 관련 업데이트