피그마 ui-스타일가이드, 스타일 등록하기

안녕하세요 찐망고 입니다.

웹을 어느정도 정리하고 피그마강의를 써볼까 했는데..

이렇게 두서가 없어???

피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요..

 

수업시간에 CJFRESHWAY사이트를 작업하면서

기본적인 스타일가이드도 만들어보았습니다.

CJ FRESHWAY STYLEGUIDE

 

스타일가이드가 필요한 이유는 앞으로 진행될 디자인과 마크업(퍼블리싱)때문인데요.

특히 퍼블리싱할땐 자주 사용하는 컬러와 폰트, 폰트사이즈를 미리 CSS로 셋팅해놓고 작업을 하면

아주 편리하기 때문에 디자인과 따로 이렇게 가이드를 만들어주면 좋습니다.

 

포토샵으로 디자인을 하다가 피그마로 디자인을 하면 참 편한게

일단 피그마는 

텍스트 선택시 폰트의 정보가 바로 뜨는데요.

Headline/30px Title Bold라고 되어있는 부분은

피그마 스타일 등록

이런식으로 피그마에 스타일을 등록 해놓은 거에요~

 

라이브러리에 등록된 스타일들

 

스타일을 등록할땐 create style을 클릭하여 이름을 적어 등록하면 되는데

아무래도 통일성 있게 넣어주면 좋겠죠? 

저는 headline, tabmenu, body, button으로만 묶어줬는데 굵기, 사이즈별로 묶으셔도 상관없습니다

묶으실때 중간에 "/"기호를 넣어주세요

 

피그마스타일등록

 

 

 

 

직접 파일을 다운받아 등록해보시길 바랍니다~

CJ FreshWay Style guide.fig

0.08MB