4-29 | 피그마 베리어블과 디자인 토큰/ 디자인 시스템 개념이해하기

4-29 | 피그마 베리어블과 디자인 토큰/ 디자인 시스템 개념이해하기

● 배리어블 과 스타일

 

배리어블은 하나의 변수만 저장 가능하며 참조할 수 있다. 따라서 기본 디자인 요소를 적용할 때 주로 사용된다.

스타일은 다수의 변수까지도 저장이 가능하며 참조할 순 없다. 따라서 다수의 디자인 요소를 적용할 때 사용된다.

 

● 배리어블의 역할

 

배리어블은 디자인 토큰 및 프로토타이핑 기능을 한다.

 

*디자인 토큰이란?

디자인 시스템의 기본 구성 요소로서, 전자(Electrons)에 해당한다.

 

/

디자인 토큰이 필요한 이유

  1. 많은 디자이너와 함께 작업할 때 일관성을 유지 할 수 있음

  2. 다양한 플랫폼 환경(IOS, ANDROID등)에 공통된 디자인을 적용할 수 있음

  3. 라이트 모드, 다크 모드 등 명확하게 색상을 구분해야 할 때 용이함

     

  4. 많은 하위 브랜드들이 존재할 때 디자인 에셋을 관리하기 용이함

*디자인 시스템이란?

재사용 가능한 컴포넌트와 패턴 등을 말하며,

1) 디자인 원칙/철학 2) 스타일 가이드 3) 컴포넌트 라이브러리 4) 패턴라이브러리 5) 문서화 6) 시스템 관리 운영 으로 구성된다.

 

image

*Atomic Design이란?

디자인 시스템 방법론으로, 전자(Electorns) → 원자(Atom) → 분자(Molecules) → 유기체(Organisms) → 템플릿(Templates) → 페이지(pages)로 UI 시스템을 구성한다는 개념 이다.

 

/

전자(Electrons) ex. 색상, 타이포그래피, 테두리 , 그림자효과

원자(Atom) ex. 라벨, 텍스트 필드, 버튼

댓글을 작성해보세요.

채널톡 아이콘