피그마 사용자라면 기본, 베리언트 기능활용
1. 베리언트(Variants)의 이해 저도 프로젝트를 진행하다 보면 생각보다 많은 컴포넌트를 만들어 사용을 하기도 합니다. 컴포넌트의 형태는 같지만, 색상이 다른 [Light] 모드와 [Dark]모드를 제작하여 변경할 수도 있고, 같은 용도지만 크기를 Small/Medium/Large로 설정하여 사용할 수도 있습니다. 이처럼 스타일과 속성값이 다른 경우 일일이 모든 컴포넌트를 만들어 사용하는 것보다 비슷한 종류의 컴포넌트를 세트로 묶어서 사용할 수 있는 베리언트(Variants)를 활용하는 것이 좋을 것 같습니다. (1) 베리언트(Variants)의 주요 장점 및 활용 방법 베리언트는 디자인 시스템의 효율성을 극대화하는 데 핵심적인 역할을 합니다. ① 디자인 시스템의 간결화 수많은 컴포넌트를 단일 컴포넌트 셋으로 통합하여 에셋 패널(Assets Panel)을 훨씬 깔끔하게 유지할 수 있습니다. 디자이너가 필요한 컴포넌트를 찾기 쉬워집니다. ② 재사용성 및 일관성 강화 한 번 정의된 베리언트는 프로젝트 전반에 걸쳐 일관된 디자인을 유지하게 해줍니다. 속성만 변경하면 되므로, 디자인 에셋의 재사용성이 극대화됩니다. ③ 작업 속도 향상 원하는 컴포넌트 속성만 패널에서 선택하면 되므로, 일일이 수동으로 수정하거나 새로운 컴포넌트를 찾아 드래그할 필요가 없어 작업 속도가 비약적으로 빨라집니다. ④ 쉬운 유지보수 특정 컴포넌트의 디자인 변경이 필요할 때, 베리언트 셋 안의 마스터 컴포넌트만 수정하면 해당 베리언트를 사용하는 모든 인스턴스에 변경 사항이 반영됩니다. 이는 디자인 시스템 업데이트 시 엄청난 시간을 절약해 줍니다. ⑤ 개발자와의 협업 효율성 증대 개발자도 베리언트의 속성(Property)과 값(Value)을 명확하게 파악할 수 있어, 디자인과 개발 간의 싱크를 맞추기가 훨씬 용이해집니다. "이 버튼은 state: disabled, size: large 입니다." 와 같이 명확한 커뮤...