보조색을 다른 hue로 사용할 경우엔 베리어블 구조를 어떻게 짜야할까요?

24.05.23 09:55 작성 24.05.23 09:58 수정 조회수 102

머테리얼 컬러 가이드처럼,

프라이머리 컬러를 블루 계열로 두고 세컨더리 컬러를 틸 계열로 두고 싶은데,

예제는 하나의 색상 계열로 프라이머리, 세컨더리를 나누고 있어서 베리어블 구조를 어떻게 짜야할지 잘 모르겠습니다.

테마-브랜드 컬러에 틸 계열을 추가한 뒤 시멘틱-bg-인터랙티브세컨더리에 해당 브랜드 컬러를 참조하면 되는걸까요?

아니면 프리미티브 컬러에만 틸 계열을 넣어둔 뒤 시멘틱-bg-인터랙티브세컨더리 컬러에 프리미티브-틸500 을 바로 참조하면 되는걸까요?..

피그마 배리어블을 활용한 디자인 시스템 구축하기

[실습] 색상 배리어블 등록하기

강의실 바로가기

답변 1

답변을 작성해보세요.

볼드 UX

2024.05.24

머티리얼 가이드 처럼 짜시려면 아예 구조를 머티리얼 용어로 가지고 가시는 것을 추천드립니다.

왜냐하면 개발 쪽에서 바꿀 때도 복잡하기 때문입니다.

하지만 만약 강의 예제를 연결해서 사용하시려면, 두가지 방법 모두 가능할 것 같습니다.

하지만 아래와 같이 하는 것을 추천 드립니다.

Primitive에 Teal 계열 추가 >>
Theme에 Brand 세컨더리(Secondary) 또는 터셔리(Tertiary)가 1 번 참조
3. Semantic 에서 세컨더리 인터랙션 또는 터셔리(Tertiary) 만들어서 2번 참조.

또 궁금하신 점 있으시면 알려주세요!