Study/Figma

피그마 초보 강좌 6편: 디자인 시스템 구축하기

wawManager 2024. 11. 4. 18:00
728x90

이번 강좌에서는 피그마에서 디자인 시스템을 구축하고 효율적으로 관리하는 방법을 알아봅니다. 디자인 시스템은 일관성 있는 디자인을 유지하고, 컴포넌트와 스타일을 체계적으로 관리할 수 있어 팀 전체의 생산성을 높이는 데 큰 도움이 됩니다.

1. 디자인 시스템이란?

디자인 시스템은 프로젝트 내에서 사용할 컴포넌트, 스타일, 컬러 팔레트, 타이포그래피, 아이콘 등을 모아 일관성을 유지할 수 있도록 체계적으로 관리하는 것입니다. 이를 통해 디자인의 일관성을 유지하고, 모든 팀원이 동일한 기준에 맞춰 작업할 수 있습니다.

디자인 시스템을 사용할 때의 장점

  • 디자인 일관성 유지: 프로젝트의 모든 화면에서 같은 스타일과 컴포넌트를 사용하여 일관된 사용자 경험을 제공
  • 수정 용이성: 디자인 시스템의 컴포넌트를 수정하면 연결된 모든 디자인에 자동으로 반영되므로 유지보수가 쉽습니다.
  • 작업 속도 향상: 컴포넌트와 스타일을 빠르게 적용할 수 있어 작업 시간을 단축할 수 있습니다.

2. 디자인 시스템의 구성 요소

디자인 시스템에는 여러 가지 요소가 포함됩니다. 여기서는 자주 사용되는 컬러 팔레트, 타이포그래피, 컴포넌트를 중심으로 설명합니다.

1) 컬러 팔레트(Color Palette)

  • 디자인에서 사용할 기본 색상, 보조 색상, 강조 색상 등을 정의합니다.
  • 피그마에서는 색상을 스타일로 저장해 재사용할 수 있습니다.

2) 타이포그래피(Typography)

  • 타이포그래피는 제목, 본문, 캡션 등의 텍스트 스타일을 정의합니다.
  • 일관성 있는 타이포그래피 스타일을 유지하면, 전체 디자인에서 통일감을 줄 수 있습니다.

3) 컴포넌트(Component)

  • 버튼, 카드, 입력 필드, 네비게이션 바와 같은 UI 요소들을 컴포넌트로 저장하여 재사용할 수 있습니다.
  • **Variants(변형)**를 사용해 기본 상태, 호버 상태, 클릭 상태 등 컴포넌트의 다양한 상태를 관리합니다.

3. 디자인 시스템 만들기

이제 피그마에서 실제로 디자인 시스템을 구축해보겠습니다.

1) 컬러 스타일 저장하기

  1. 도형이나 텍스트를 선택한 상태에서 오른쪽 속성 패널의 Fill을 클릭합니다.
  2. 원하는 색상을 선택한 후, Style 아이콘(+)을 눌러 New Color Style을 생성합니다.
  3. 스타일 이름을 Primary Color 또는 Secondary Color와 같이 지정하여 저장합니다.

2) 타이포그래피 스타일 저장하기

  1. 텍스트를 선택한 후, 폰트, 크기, 색상을 설정합니다.
  2. 오른쪽 패널에서 Style 아이콘(+)을 눌러 New Text Style을 선택하고, Title, Body, Caption 등의 이름으로 저장합니다.
  3. 이후 다른 텍스트에도 같은 스타일을 적용하면 통일된 타이포그래피가 유지됩니다.

3) 컴포넌트 만들기 및 Variants 설정하기

  1. 예를 들어 버튼 컴포넌트를 만듭니다. 버튼을 디자인한 후 선택한 상태에서 상단 메뉴의 Create Component를 클릭해 컴포넌트로 변환합니다.
  2. 버튼 컴포넌트를 선택한 후, Add Variant를 클릭해 기본 상태, 호버 상태, 클릭 상태 등을 추가합니다.
  3. 각각의 상태에 맞게 색상이나 스타일을 다르게 설정하고, 오른쪽 속성 패널에서 Property 이름과 값을 설정해 Variants를 관리합니다.

4. 디자인 시스템 라이브러리로 공유하기

디자인 시스템을 라이브러리로 공유하면 다른 프로젝트에서도 쉽게 접근하여 사용할 수 있습니다.

1) 디자인 시스템 파일 게시(Publish)

  1. 디자인 시스템을 모아둔 파일의 상단 메뉴에서 Assets > Library > Publish를 클릭합니다.
  2. 컬러 스타일, 텍스트 스타일, 컴포넌트 등을 선택해 라이브러리로 게시합니다.

2) 다른 프로젝트에서 라이브러리 불러오기

  1. 다른 파일을 열고 상단의 Assets > Library로 이동합니다.
  2. 사용할 라이브러리를 Enable로 활성화하면 해당 파일에서도 디자인 시스템을 불러올 수 있습니다.
  3. 라이브러리에서 불러온 컴포넌트나 스타일은 연결된 상태이므로, 원본 파일을 수정하면 모든 파일에 업데이트가 반영됩니다.

3) 디자인 시스템 업데이트 및 재게시

  • 디자인 시스템을 수정한 후에는 Re-Publish를 통해 변경된 내용이 모든 프로젝트에 자동 반영되도록 설정할 수 있습니다.

5. 디자인 시스템 관리 팁

1) 명명 규칙 설정

  • 컬러, 텍스트, 컴포넌트의 이름을 통일성 있게 작성합니다. 예: Button / Primary, Button / Secondary 등.
  • 명확한 명명 규칙을 정해두면 팀원들도 쉽게 이해할 수 있습니다.

2) 디자인 시스템 문서화

  • 디자인 시스템의 사용 방법이나 가이드를 문서화하여 팀원들에게 공유하면, 디자인 시스템의 활용도를 높이고 관리가 쉬워집니다.
  • 필요한 경우 피그마의 Comments 기능을 사용해 추가 설명을 덧붙일 수 있습니다.

3) 컴포넌트 라이브러리 정리

  • 컴포넌트를 그룹화하고, Colors, Typography, Buttons와 같이 페이지를 나눠 관리하면 깔끔하게 정리할 수 있습니다.

결론

이번 강좌에서는 피그마에서 디자인 시스템을 구축하고 라이브러리로 공유하는 방법을 배웠습니다. 디자인 시스템을 통해 프로젝트의 일관성을 유지하고 협업을 효율적으로 진행할 수 있습니다. 이로써 피그마 초보 강좌가 마무리되었으며, 기초 기능부터 협업과 시스템 구축까지 활용할 수 있는 다양한 기능을 익혔습니다.

728x90