[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ "컬러 시스템 적용하기"

 

컬러를 시스템화해서 사용하는 법에대해 배워보자.

처음에는 색 그때그때 누르면 되는데 굳이 귀찮게 만들어야하나 라는 생각이었는데디자인할 때 색에 통일성을 주는 경우가 많아서 하나하나 색을 찾아서 넣는 것 보다 자주쓰는컬러를 시스템화해서바로바로 적용할 수 있는것을 해보고 이쪽이 훨씬 더 편리함을 경험했다.

 

 

디자인 라이브러리를 구축하는 방법은

오른쪽 디자인패널 에서 Fill 옆에 점네개아이콘을 누르고

라이브러리 옆에 플러스로 추가해주는 것이다.

그러면 이름과 디스크립션을 입력해서 시스템화 할 수 있다.

 

 

 

디스크립션을 통해 컬러에 대한 설명도 덧붙일 수 있고

투명도조절도 가능하다.

아래 Create style버튼을 누르면

라이브러리에 컬러가 등록된다.

 

 

기존의 라이브러리에 등록했더라도

이퀄라이저같은 아이콘 클릭하면

옵션값들을 수정할 수 있다.

절대불변이 아니니 등록해놓고 색을 적용해보다가 또 바꿔도 된다.

 

 

라이브러리에 등록된 컬러들이

보여지는 방식을 바꾸어서

보기 편한 방식으로 설정할 수 있다.

Show as grid로 정렬방법이 달라진다.

 

 

 

라이브러리에 색을 등록해놓고 적용해서 쓸 때 

Fill의 커스텀 옆에 라이브러링으로 들어가면

등록된 색들이 보여진다.

커스텀에서 수고스럽게 찾지않고 등록해둔 필요한 컬러를 바로 찾아쓸 수 있다.

 

 

디자인시스템을 자동화, 규격화, 규칙화해서 사용하면

확실히 번거로움을 덜어주는 것 같다.

시스템화 할 때에는 조금 번거롭지만

많은 작업량을 생각하면 수고스럽더라도 초반에 잘 만들어두어야 겠다.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.