피그마(Figma)에서 컬러 시스템을 설계하고 관리하는 방법
1. 컬러 시스템의 개념 - 피그마의 컬러 시스템은 디자인 작업에서 색상을 효과적으로 관리하고 일관성을 유지하기 위한 체계적인 접근 방식을 제공합니다. 이 시스템은 다양한 색상 스타일을 정의하고, 이를 통해 디자인의 시각적 일관성을 높이는 데 도움을 줍니다. - 컬러 스타일: 피그마에서는 색상을 스타일로 정의하여 재사용할 수 있습니다. 이를 통해 프로젝트 전반에 걸쳐 일관된 색상 사용이 가능해집니다. - 시멘틱 컬러: 특정 색상을 의미하는 이름을 부여하여, 디자인 요소의 기능이나 역할에 따라 색상을 구분할 수 있습니다. 예를 들어, 'Primary Color'는 주 색상으로 사용되며, 'Secondary Color'는 보조 색상으로 사용됩니다. - 디자인 토큰(Design Tokens): 재사용할 수 있는 색상 변수로, 예를 들어 Primary/500, Secondary/100 같은 이름으로 관리합니다. - 스케일(scale): 색상마다 100~900 같은 단계별 명도를 정의하여 일관된 톤을 유지합니다. - 테마(theme): Light/Dark 모드처럼 서로 다른 컬러 팔레트를 그룹화합니다. 2. Figma에서 컬러 스타일 생성하기 1) 오브젝트 선택 사각형(Rectangle) 등 도형을 하나 그려서 색상을 적용합니다. 2) 컬러 패널에서 스타일 생성 - 우측 속성 패널(Design 패널)에서 Fill 색상 박스를 클릭 - 하단의 “Style” 버튼(★ 아이콘)을 클릭 - Create style 클릭 → 이름 지정 (예: Primary/500) → Create 3) 스케일 관리 - 동일한 방식으로 Primary/100, Primary/200… 등 단계별로 스타일을 생성 3. 컬러 스타일 조직화 1) 폴더 구조...