일관성이 핵심 - Figma 디자인 시스템을 구축하는 방법

좋은 디자인 시스템이 우리가 배송하는 제품의 품질과 제품 개발 속도에 막대한 영향을 미칠 수 있다는 것은 디자이너들 사이에 일반적인 지식입니다. Google, GitHub, IBM 및 기타 회사와 같은 회사에서 더 나은 제품을 더 빠른 속도로 사용하여 포괄적인 디자인 시스템을 만드는 경우가 여러 번 명확해짐에 따라 질문은 "왜 우리에게 디자인이 있어야 하나요? 체계?" "어떻게 하면 훌륭한 디자인 시스템을 만들 수 있을까요?"

그렇다면 디자인 시스템이란 정확히 무엇입니까? Will Fanguy는 이것을 "명확한 표준에 따라 여러 응용 프로그램을 구축하기 위해 조립할 수 있는 재사용 가능한 구성 요소 모음"으로 정의합니다. 디자인 시스템에는 UI 구성 요소 라이브러리와 패턴 라이브러리뿐만 아니라 스타일 가이드, 모범 사례, 코드 등이 포함될 수 있습니다. 건물에 대한 건축가의 청사진과 마찬가지로 디자인 시스템은 제품을 구축하는 동안 제품 팀의 "단일 소스" 역할을 할 뿐만 아니라 일관성을 유지하는 데 도움이 됩니다.

GitHub는 Figma 기반 디자인 시스템의 좋은 예인 Figma 구성 요소 라이브러리를 공유하기까지 했습니다. Storybook 및 Component-Driven Development와 같은 보다 광범위한 도구도 디자인 시스템을 구현하고 문서화하는 데 매우 유용한 리소스입니다.

디자인 시스템은 디자인 일관성을 유지하고 제품을 만드는 데 관련된 모든 사람에게 유용해야 합니다. 디자이너가 새로운 화면, 흐름 및 프로토타입을 더 빠르게 만들 수 있도록 도와주는 툴킷입니다. 좋은 디자인 시스템은 개발자가 디자인 결정의 이면에 있는 논리를 이해하고 보다 응집력 있는 제품을 만드는 데 도움이 됩니다. 설계 프로세스의 속도를 높이고 설계자가 실험에 더 많은 시간을 할애할 수 있습니다.

Figma로 작업하는 디자이너를 위해 Figma에서 컴포넌트 라이브러리를 생성하는 것이 종합 디자인 시스템의 핵심 부분이 될 수 있는 방법을 살펴보겠습니다.

구성 요소 라이브러리의 힘

때로는 너무 빨리 디자인 시스템을 만드는 데 투자하는 것이 역효과를 낼 수 있습니다. 제품 설계의 초기 단계에서는 프로세스가 여전히 유동적입니다. 예를 들어, 두 개의 기본 탐색 모음을 실험 중인 경우 구성 요소 라이브러리에 둘 다 추가하는 것은 팀의 모든 사람을 혼란스럽게 하므로 의미가 없습니다. 제품 디자인이 안정될 때까지 기다리는 것이 좋습니다. 가급적이면 테스트를 거쳐 어느 정도 마무리하는 것이 좋습니다.

제품이 성숙한 제품이고 기존 구성 요소 라이브러리가 없는 경우 현재 구현에 의해 디자인 시스템이 이미 결정되어 있어야 합니다. 그러나 아직 성문화되지 않았습니다. 이 시점에서 공통 UX 패턴을 정의하고 제품 전체에서 정기적으로 사용되는 구성 요소 집합으로 제품을 추출하는 것이 유리할 것입니다. 또한 구성 요소 라이브러리를 모든 사람이 쉽게 액세스할 수 있는 중앙 위치에 보관하는 것이 이상적입니다.

디자인 시스템은 기본적으로 툴킷입니다.

툴킷과 같은 디자인 시스템을 사용하는 것은 그 효과에 대한 훌륭한 리트머스 테스트입니다. 여러 디자이너가 프로세스 속도를 높이기 위해 정기적으로 사용한다면 좋은 일을 하고 있는 것입니다. 개발자가 색상, 유형 스타일에 대해 참조하거나 디자이너의 입력을 적게 사용하여 작업을 수행할 수 있다면 이는 좋은 신호이기도 합니다.

일반적으로 매우 복잡한 구성 요소나 제품에 한두 번만 사용할 수 있는 구성 요소를 포함하는 것은 유용하지 않습니다. 재사용 가능한 것이 많을수록 디자인 시스템에 더 많이 속합니다.

Figma는 최근 팀이 디자인 시스템의 여러 부분이 얼마나 효과적인지 확인하고 최적화하는 데 도움이 되는 조직을 위한 디자인 시스템 분석을 출시했습니다.

Figma가 컴포넌트 라이브러리 생성에 좋은 이유

Figma는 많은 훌륭한 기능을 가진 강력한 디자인 도구이지만 복잡한 제품을 디자인할 때 특히 유용하게 되는 요소의 하위 집합이 있습니다. 스타일 , 구성 요소 및 라이브러리 파일 . 이러한 기능은 설계 시스템을 최신 상태로 유지하고 설계 간의 일관성을 유지하는 데 도움이 되며 중앙 위치에서 여러 설계를 업데이트할 수 있는 지름길을 제공합니다.

• 스타일 은 한 곳에서 정의되는 색상 및 유형 스타일(글꼴, 크기, 두께 등)이며 여러 개체에 적용할 수 있습니다.
• 구성 요소 는 버튼이나 말풍선과 같은 것이며 스타일, 모양 및 텍스트와 같은 개체 및 기타 구성 요소에서 만들 수 있습니다.
• 라이브러리 파일 을 사용하면 스타일 및 구성요소를 여러 파일 간에 그리고 팀 또는 조직과 공유할 수 있습니다.

Figma의 핵심은 협업과 공유입니다. 디자인 파일은 브라우저에서 누구나 편집할 수 있고 자유롭게 공유할 수 있으며 여러 사용자가 동시에 편집할 수 있으므로 실시간으로 업데이트됩니다. 이를 통해 설계 시스템은 설계자뿐 아니라 개발자 및 기타 이해 관계자와 보다 효율적으로 협업할 수 있습니다.

라이브러리 파일 생성

Figma에서는 디자인 시스템의 시작 역할을 하는 라이브러리 파일을 생성할 수 있습니다. 여기에서 팀이나 조직 전체에서 공유하고 여러 디자인에 사용되는 스타일과 구성 요소를 정의할 수 있습니다. 스타일과 구성 요소는 한 곳에서 업데이트할 수 있으며 이러한 변경 사항은 모든 개별 설계 파일에 자동으로 적용됩니다.

여기에는 몇 가지 주요 이점이 있습니다.

1. 속도 . 설계자가 잠재적으로 수백 개의 설계를 수동으로 업데이트할 필요가 없으므로 시간이 절약됩니다. 단일 라이브러리 파일에서 구성 요소를 관리함으로써 한 곳에서 색상을 업데이트하면 단 몇 번의 클릭만으로 구성 요소 라이브러리를 사용하여 만든 모든 디자인에 적용할 수 있습니다.
2. 일관성 . 작업을 자동화하여 오류 가능성을 줄입니다.

조직

Figma에서 디자인 시스템을 구성할 때 도구와 이론 사이에 평행선을 그리는 것이 유용합니다. 예를 들어 Figma의 Styles는 Brad Frost의 Atomic Design 모델의 Atom보다 훨씬 더 기본적인 수준으로 가장 기본적인 수준으로 간주될 수 있습니다. 제품의 미적 요소를 구성하는 색상, 글꼴 등입니다.

단순한 Figma 구성 요소는 Atomic Design 모델에서 원자로 간주됩니다(예: 버튼). 보다 복잡한 Figma 구성 요소는 분자 또는 유기체 로 간주되며 템플릿 과 페이지 를 구성하는 데 사용됩니다.

구성 요소 라이브러리에 있는 가장 유용한 기능은 다음과 같습니다.

• 그림 물감
• 글꼴
• 브랜드 자산, 로고 등
• 항해
• 버튼
• 알림
• 모달
• 양식 요소 및 유효성 검사

Figma에서 디자인 시스템 구축 – 시작하기

이 예에서는 간단한 로그인 양식을 만들고 유추 및 사용할 수 있는 구성 요소 및 스타일에 대해 설명합니다.

먼저 이 양식에서 재사용할 수 있는 구성 요소와 스타일에 대해 생각해 보겠습니다. 로고, 양식 필드 및 버튼이 포함된 카드가 있습니다. 또한 세 가지 글꼴 스타일과 유용할 수 있는 몇 가지 다른 색상 및 효과가 있습니다.

포함할 스타일과 구성 요소가 위와 같이 라이브러리에서 식별되면 라이브러리 파일을 만들고 채우기를 시작할 차례입니다.

Figma 라이브러리 파일 생성

새 파일을 만들고 라이브러리로 게시합니다. 새 파일이 생성되면 자산 탭을 클릭하고 라이브러리 아이콘을 클릭한 다음 게시 를 클릭합니다. 그러면 스타일 및 구성요소가 라이브러리 파일에 게시되어 다른 파일에서 사용할 수 있습니다.

이제 스타일 및 구성요소를 라이브러리 파일에서 작성하고 다른 파일에서 사용하고 중앙 라이브러리 파일에서 업데이트할 수 있습니다.

Figma 스타일을 만드는 방법

스타일 생성은 다른 파일에서와 마찬가지로 라이브러리 파일에서도 동일하며 아래 단계에 설명되어 있습니다.

• 스타일을 만들려는 개체를 선택합니다. 스타일은 색상, 텍스트 속성, 효과 및 레이아웃 격자일 수 있습니다.
• 새 스타일에 사용할 속성 옆에 있는 스타일 버튼(정사각형에 점 4개)을 클릭한 다음 팝오버에서 더하기 버튼을 클릭하여 새 스타일을 생성합니다.

• 스타일 이름을 지정하는 모달이 표시됩니다. 예를 들어 "녹색" 대신 "기본 색상"과 같이 표시 이름보다 의미 체계 이름을 사용하는 것이 도움이 되므로 스타일을 사용하려는 의도가 더 명확해집니다.
• 화면 오른쪽 하단에 나타나는 팝업을 사용하여 스타일을 팀 라이브러리에 게시하거나 처음에 라이브러리를 게시하기 위해 취한 단계를 반복합니다.

다음 은 스타일을 만드는 방법 에 대한 Figma의 튜토리얼입니다.

Figma 구성 요소를 만드는 방법

구성 요소를 만드는 것도 매우 쉽습니다. 구성 요소를 생성하려는 개체를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 "구성 요소 생성"을 선택하기만 하면 됩니다.

구성 요소는 스타일과 동일한 방식으로 팀 라이브러리에 게시됩니다.

구성 요소를 만드는 방법 에 대한 Figma의 자습서는 다음과 같습니다.

몇 가지 스타일 및 구성 요소가 생성되면 라이브러리 파일을 팀과 공유할 수 있으며 스타일 및 구성 요소를 원하는 수의 파일에서 사용할 수 있습니다.

Figma 라이브러리 사용하기

다른 파일에서 이러한 스타일 및 구성 요소를 사용하려면 라이브러리 파일을 새 스타일 및 구성 요소를 사용하려는 기존 디자인 파일에 연결해야 합니다. 라이브러리 모달(자산, 라이브러리 아이콘)을 다시 열고 토글 스위치를 켜면 됩니다. 라이브러리 파일을 사용할 수 있습니다.

이제 구성 요소 라이브러리를 사용할 준비가 되었습니다. 구성 요소는 화면 왼쪽의 자산 탭에서 디자인 파일로 끌어서 배치할 수 있습니다. 라이브러리 스타일은 텍스트 스타일, 채우기 색상, 획, 효과 및 레이아웃 격자를 변경할 때 로컬 스타일과 동일한 방식으로 사용할 수 있습니다.

구성 요소 및 스타일이 라이브러리에서 업데이트되면 이를 사용하는 파일이 변경 사항을 수락해야 합니다. Figma는 라이브러리 파일에 업데이트가 있을 때 알림을 표시하여 게시 옵션을 제공합니다. 게시되면 구성 요소 및 스타일을 사용하는 모든 파일은 구성 요소 및 스타일을 업데이트하기 위해 유사한 알림 또는 자산 탭을 통해 변경 사항을 수락해야 합니다. 이렇게 하면 변경 사항이 예기치 않게 게시 및 업데이트되는 것을 방지할 수 있습니다.

Figma에서 구성 요소 라이브러리를 구축하는 것 이상

Figma는 완전한 디자인 시스템의 구성 요소 라이브러리 부분만을 다루고 있습니다. 완전히 완성된 디자인 시스템의 경우 브랜드 가이드라인, 콘텐츠 스타일 가이드 및 개발자 문서와 같이 통합할 수 있는 다른 부분을 고려해 볼 가치가 있습니다.

Mailchimp의 콘텐츠 스타일 가이드는 목소리 톤과 콘텐츠를 통한 브랜딩을 자세히 설명하는 훌륭한 예입니다. GitHub에는 코드에서 구성 요소 라이브러리가 작동하는 방식에 대한 훌륭한 문서가 있으며 Google의 Material Design System에는 디자인 시스템 뒤에 있는 논리를 문서화하는 몇 가지 훌륭한 예도 있습니다.

디자인 도구로서 Figma는 많이 발전했고 새로운 기능이 지속적으로 추가됩니다. 전체 조직에서 액세스할 수 있는 내장 분석 기능이 있는 Figma 디자인 시스템을 추가하는 것은 큰 진전입니다. 이러한 기능의 추가는 Figma가 완전한 기능을 갖춘 포괄적인 디자인 도구가 되는 것을 목표로 하고 있으며 이를 달성하는 과정에 있음을 나타냅니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 디자인 도구로서의 Figma의 힘
• Figma로 협업 설계 간소화
• 미니 튜토리얼 – 전체 설계 프로세스에 Figma의 기능 활용
• 미니 튜토리얼 – Figma 버튼 구성 요소 작업
• 이 최고의 UX 도구로 기술을 마스터하세요