디자인 토큰 & 워크플로우

타 디자인 시스템 폰트/컬러/베리언트 가져오기

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

질문사항

타 디자인 시스템을 퍼블리싱하여 컴포넌트를 사용하려 합니다. 이 컴포넌트들에 사용된 폰트, 컬러 스타일, 베리언트 등을 현재 작업 파일의 로컬 스타일로 가져오는 방법이 있을까요? 특히, 타 디자인 시스템의 컴포넌트를 가져와서 폰트를 '노토산스'로 변경하여 사용하려면 어떤 방식으로 접근해야 할까요?

답변

타 디자인 시스템의 컴포넌트와 스타일을 가져와서 수정하는 방법은 다음과 같습니다:

원본 디자인 시스템 파일 수정 (권장):

가장 이상적인 방법은 타 디자인 시스템의 원본 파일(Source File)에 접근하여 폰트, 컬러 스타일, 베리언트 등을 직접 수정하는 것입니다. 예를 들어, 폰트를 '노토산스'로 변경하고 싶다면, 원본 파일의 텍스트 스타일에서 폰트를 '노토산스'로 변경한 후, 해당 파일을 다시 퍼블리싱(Publish)합니다.

이후 작업 파일에서 라이브러리를 업데이트하면, 변경된 스타일이 적용된 컴포넌트를 사용할 수 있습니다. 이 방식은 디자인 시스템의 일관성을 유지하고 관리하기에 가장 좋습니다.

로컬 파일에서 스타일 오버라이드 (제한적):

원본 파일에 접근할 수 없거나, 특정 프로젝트에서만 예외적으로 스타일을 변경해야 하는 경우, 작업 파일에서 인스턴스의 스타일을 오버라이드(Override)할 수 있습니다.

폰트 변경: 가져온 컴포넌트 인스턴스 내의 텍스트 레이어를 선택하고, 텍스트 속성 패널에서 폰트를 '노토산스'로 직접 변경합니다. 이 변경은 해당 인스턴스에만 적용되며, 마스터 컴포넌트나 다른 인스턴스에는 영향을 주지 않습니다.

컬러 변경: 마찬가지로, 인스턴스 내의 색상 레이어를 선택하고 로컬 컬러 스타일을 적용하거나 직접 색상을 변경할 수 있습니다.

단점: 이 방법은 오버라이드가 많아질수록 관리하기 어려워지고, 디자인 시스템의 일관성이 깨질 위험이 있습니다. 또한, 오버라이드된 스타일은 원본 디자인 시스템의 업데이트를 받을 때 충돌이 발생할 수 있습니다.

스타일 복사 및 붙여넣기 (수동):

타 디자인 시스템 파일에서 필요한 폰트 스타일이나 컬러 스타일을 선택한 후, `Copy/Paste as > Copy properties` 또는 `Copy/Paste as > Copy styles`를 사용하여 속성을 복사합니다.

이후 작업 파일에서 해당 스타일을 적용할 레이어를 선택하고 `Paste properties` 또는 `Paste styles`를 사용합니다.

이 방법은 스타일 자체를 로컬에 가져오는 것이 아니라, 속성만 복사하는 것이므로, 로컬 스타일로 등록하려면 수동으로 다시 생성해야 합니다.

결론: 디자인 시스템의 폰트나 컬러를 전반적으로 변경해야 한다면, 원본 디자인 시스템 파일을 수정하고 재퍼블리싱하는 것이 가장 권장되는 방법입니다. 이는 디자인 시스템의 유지보수성과 확장성을 보장합니다.