본문 바로가기
UX 디자인/피그마

피그마(Figma) 기능 - 스타일(Styles) 관리하기 (색, 폰트 저장하기)

반응형

* 본 기능 소개는 Figma 공식 유튜브 채널에서 제공하는 튜토리얼 강의(영어)를 기반으로 작성된 포스트이므로 실제 동영상으로 된 기능 소개 내용은 하단에 첨부된 유튜브 링크를 통해서 확인하시기 바랍니다. 

 

색상이나 서체 등 반복적으로 사용되는 스타일 속성에 대해서 특정 속성을 지정하여 저장하고, 이를 다른 작업 때 바로 찾아서 적용할 수 있게 하는 Styles 지정 기능은 다른 디자인 프로그램에서도 유용하게 제공되는 기능이며 피그마에서도 이러한 기능을 지원하고 있습니다. 아래는 텍스트로 설명을 해 놓았지만, 가장 하단에 넣어 놓은 피그마 공식 튜토리얼을 동영상으로 한 번 보시면 더 쉽게 이해하실 수도 있을 것 같으니 동영상도 꼭 참고하시기 바랍니다.

 

특정 속성을 스타일로 지정하는 방법은 특정 속성을 선택한 상황에서 우측 DESIGN 패널에 보면 네 개의 점으로 구성된 Show Styles 버튼을 확인할 수 있는데, 해당 버튼을 통해서 스타일의 지정과 관리가 가능합니다.

 

 

스타일의 생성 및 관리를 담당하는 Styles 

 

위 예제에서는 특정 색에 대해서 스타일을 지정하는 기능을 보여줍니다. 이름을 지정하여 등록을 하면 해당 파일 전역에서 사용할 수 있는 컬러가 Style로 지정된 것을 확인할 수 있습니다. 지정된 항목에 대해서 우클릭을 하면 이 Style을 편집하거나 삭제하는 것이 가능합니다.

 

 

 

링크가 끊어진 모양의 아이콘은 Detach Style 기능으로 기존 정의된 스타일 값에 값이 종속되는 것을 끊는 역할을 합니다. 스타일의 생성 및 관리는 Fill Color 외에도 Stroke 와 Text, Effects 등등 다양한 속성에 적용할 수 있습니다.

 

 

스타일의 생성은 텍스트에도 적용할 수 있습니다

 

생성된 스타일은 기본적으로 파일 안에서만 사용되는 Local Libraries(로컬 라이브러리)로 분류됩니다. 해당 라이브러리를 다른 프로젝트에서도 사용할 수 있도록 Team Library로 설정을 할 수도 있습니다. 하지만 이 기능은 Professional 이상의 플랜에서만 사용이 가능한 제약사항이 있습니다. Team Library로 사용이 가능하도록 Publish하는 것은 좌측 Assets 패널에서 책 모양 아이콘(Libraries)를 눌러서 Publish하는 것을 통해서 이용이 가능합니다. 

 

 

생성된 라이브러리는 다른 파일에서도 쓸 수 있도록 Team Library로 만들 수 있지만 유료 플랜에서부터 제공하는 기능입니다

 

 

참고자료

* 피그마 공식 튜토리얼 - 스타일: https://www.youtube.com/watch?v=gtQ_A3imzsg

 

반응형
외주/과외 문의