질문사항
피그마에서 컴포넌트 관리 및 작업 시작법에 대해 궁금합니다. 컴포넌트를 만들고 별도의 컴포넌트 폴더(페이지)로 옮겼을 때 'Restore Component' 메시지가 뜨는 현상과, 컴포넌트와 인스턴스를 활용한 효율적인 작업 방식에 대해 알려주세요.
답변
피그마에서 컴포넌트와 인스턴스를 효율적으로 관리하는 방법과 'Restore Component' 메시지에 대해 설명해 드립니다.
이 메시지는 주로 인스턴스가 연결되어 있던 메인 컴포넌트가 삭제되었거나, 어떤 이유로 인해 인스턴스가 원본 메인 컴포넌트와의 연결을 잃었을 때 나타납니다. 컴포넌트를 다른 페이지나 프레임으로 옮기는 것 자체는 문제가 되지 않지만, 만약 메인 컴포넌트가 삭제된 상태에서 해당 인스턴스를 선택하면 이 메시지가 뜹니다. 이 경우, 인스턴스를 다시 메인 컴포넌트와 연결하거나, 인스턴스를 독립적인 요소로 분리(Detach Instance)할 수 있습니다.
컴포넌트 관리 워크플로우:메인 컴포넌트 생성: 디자인 요소를 선택하고 `Create Component` (단축키: `Shift + Alt/Option + K`)를 통해 메인 컴포넌트를 만듭니다.컴포넌트 페이지/프레임으로 이동: 생성된 메인 컴포넌트들을 별도의 페이지(예: `Components`, `Design System`)나 특정 프레임으로 모아 관리합니다. 이는 디자인 시스템의 'Source of Truth' 역할을 합니다.인스턴스 사용: 메인 컴포넌트가 있는 페이지가 아닌, 실제 디자인 작업을 하는 페이지(예: `Design`, `Screens`)에서는 Assets 패널에서 컴포넌트를 드래그하여 인스턴스를 사용합니다.라이브러리 발행 (Publishing): 여러 Figma 파일에서 동일한 컴포넌트를 사용하려면, 메인 컴포넌트가 있는 파일을 라이브러리로 발행해야 합니다. 발행된 라이브러리는 다른 파일에서 활성화하여 인스턴스를 가져다 쓸 수 있으며, 메인 컴포넌트가 업데이트되면 모든 연결된 인스턴스에 업데이트 알림이 뜹니다. 컴포넌트 복사/붙여넣기 시 주의사항: 동일 파일 내: 동일 파일 내에서 메인 컴포넌트를 복사하여 붙여넣으면, 새로운 별개의 메인 컴포넌트가 생성됩니다. 인스턴스를 복사하여 붙여넣으면 원본 메인 컴포넌트와 연결된 인스턴스가 생성됩니다. 다른 파일 간 (라이브러리 미발행 시): 메인 컴포넌트를 다른 파일에 복사하여 붙여넣으면, 원본 파일의 컴포넌트와는 완전히 별개의 새로운 메인 컴포넌트가 됩니다. 두 컴포넌트는 서로 업데이트를 공유하지 않습니다. 인스턴스를 다른 파일에 복사하여 붙여넣으면, 해당 인스턴스는 원본 메인 컴포넌트와의 연결을 잃고 독립적인 그룹 또는 프레임으로 변환될 수 있습니다. (Figma 버전에 따라 동작이 다를 수 있으나, 기본적으로 라이브러리 발행 없이 파일 간 연결은 어렵습니다.) 다른 파일 간 (라이브러리 발행 시): 라이브러리로 발행된 컴포넌트는 다른 파일에서 활성화하여 인스턴스를 가져다 쓸 수 있으며, 원본 컴포넌트가 업데이트되면 연결된 모든 파일의 인스턴스에 업데이트가 반영됩니다. 이것이 디자인 시스템을 구축하는 핵심적인 방법입니다.