티스토리 뷰

UI_UX Design/Figma

ch02_라이브러리-스타일(style)

jsBae 2024. 11. 9. 16:17
학습목표
- 피그마에서 색상, 텍스트, 효과 등의 스타일을 설정하는 방법을 이해한다.
- 스타일 라이브러리 생성 및 관리하기디자인 시스템 구축을 위해 스타일 라이브러리를 생성하고 관리하는 방법을 학습한다.
- 스타일 라이브러리를 통해 디자인 요소를 통합하고, 팀 내 공유 및 협업의 효율성을 높이는 방법을 이해한다.

라이브러리

피그마에서 라이브러리는 여러 파일과 프로젝트에서 재사용할 수 있는 디자인 자산을 모아놓은 것이다. 라이브러리는 구성요소, 스타일, 변수와 같은 디자인 요소들을 포함하며, 이를 통해 디자인의 일관성과 효율성을 유지할 수 있다. 주요 내용은 다음과 같다.

1. 라이브러리 구성요소

  • 구성요소(Component): 버튼, 아이콘, UI의 일부 등으로, 라이브러리에서 정의된 구성요소는 여러 파일에서 일관되게 재사용된다.
  • 스타일(Style): 색상, 텍스트, 이펙트 등의 스타일을 포함하며, 여러 요소에 적용하여 디자인의 통일성을 유지한다.
  • 변수(Variable): 특정 속성값을 변수로 설정해두면, 쉽게 값을 조정할 수 있어 디자인 수정이 용이하다.

2. 라이브러리의 장점

  • 디자인 일관성 유지: 라이브러리의 자산을 사용하여 전체 프로젝트에서 디자인의 일관성을 확보할 수 있다.
  • 빠른 개발 진행: 기존 디자인을 재사용할 수 있어, 새로운 디자인 작업을 신속하게 시작할 수 있다.
  • 자동 업데이트: 라이브러리에서 자산을 변경하면, 이를 사용하는 다른 파일에서도 자동으로 업데이트되므로 관리가 용이하다.

3. 협업과 변경사항 관리

  • 빠른 검토와 적용: 한 사람이 라이브러리에서 자산을 변경하면, 다른 사용자는 변경사항을 확인하고 자신의 디자인에 자동으로 반영할 수 있다.
  • 팀 전체의 일관성: 라이브러리를 통해 팀원들이 같은 디자인 자산을 사용할 수 있어 협업에 유리하다.

style

스타일을 사용하면 설계 전체에서 재사용할 수 있는 객체의 속성 세트를 정의할 수 있습니다.

 

  • 색상
    • Fill, Stroke, Background Color
  • 텍스트
    • Font Family, Size, Line Height, Spacing
  • 이펙트
    • Drop Shadow, Inner Shadow, Layer Blur, Background Blur
    • 스타일에는 두 개 이상의 효과가 포함될 수 있으며 적용된 모든 속성이 스타일에 저장됩니다.
    • 그림자 스타일은 오른쪽 사이드바의 효과 섹션에 아이콘으로 표시되며 방향에 따라 달라집니다. 이러한 아이콘은 그림자 또는 내부 그림자와 해당 x, y 값 간에 달라질 수도 있습니다.
  • 레이아웃 그리드
    • Row, Column, Grid
    • 여러 설계에서 특정 형식이나 구조를 복제하는 데 유용

Local Style 만들기

  1. 오른쪽 사이드바에서 Local styles(로컬 스타일) 옆을 클릭합니다.
  2. 새 스타일을 만들려는 속성을 선택합니다.
  3. 스타일에 이름과 설명을 지정하고 스타일 만들기를 클릭합니다. 스타일 선택기에서 스타일 위로 마우스를 가져가면 설명이 표시됩니다.

기존 객체에서

  1. 스타일을 만들려는 개체나 프레임을 선택합니다.
  2. 오른쪽 사이드바에서 클릭하세요 만들고 싶은 스타일에 해당하는 섹션 옆에 있습니다.
  3. 딸깍 하는 소리스타일 선택기에서. 새 스타일 만들기 모달에서 더 많은 옵션 표시를 클릭하여 스타일 속성을 보고 편집할 수 있습니다.
  4. 스타일 이름과 설명을 입력하고 스타일 만들기를 클릭합니다 . 스타일 선택기에서 스타일 위에 마우스를 올리면 설명이 표시됩니다.
TIP!
 스타일에는 이름과 설명을 모두 지정할 수 있습니다. 단순히 색상에 대한 설명을 사용하는 것보다는 이름과 설명을 사용하여 스타일이 디자인에서 어떻게 사용되어야 하는지 전달하는 것이 좋습니다. 

색상 스타일 예제: 브랜드 색상 팔레트 만들기

 

플러인을 활용한 컬러시스템

피그마에서 컬러 시스템을 관리하고 최적화하는 데 유용한 여러 플러그인이 있다. 다음은 그 중 몇 가지 중요한 플러그인이다:

Color Designer:

이 플러그인은 색상 팔레트를 생성하고 조정하는 데 도움을 준다. 사용자는 주요 색상을 선택하고, 플러그인이 다양한 색조, 채도, 밝기를 가진 색상을 제안한다. 이를 통해 일관된 컬러 시스템을 쉽게 구축할 수 있다.

 

Chromatic Figma: 컬러 스케일을 자동으로 생성해주는 플러그인이다. 사용자가 기본 색상을 설정하면, 이 플러그인은 여러 가지 라이트와 다크 버전의 색상을 생성하여 컬러 시스템을 풍부하게 한다.

 

ColorKit: 이 플러그인은 색상 팔레트를 분석하고 조화를 이루는 색상을 제안한다. 또한, 색상 대비를 검사하여 접근성을 높이는 데 도움을 준다.

 

 

 

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형