Figma에서 디자인 시스템 구축 및 확장: 사례 연구

다국적 기업을 위한 디자인 시스템을 구축하는 방법을 결정한다는 것은 모든 구성 요소와 패턴을 세심한 세부 사항으로 카탈로그화하는 것을 의미합니다. 큰 그림을 보고 세부 사항에 집중해야 하는 대규모 작업입니다. 한 설계 시스템 팀 리더가 이를 달성한 방법은 다음과 같습니다.

스위스에 기반을 둔 지주 회사 ABB가 설계 시스템을 만들기 시작했을 때 목표는 수백 가지 소프트웨어 제품에 대한 일관된 모양과 느낌을 결합하는 것이었습니다. 그 중 많은 제품이 공장, 광산 및 기타 산업 현장을 즐겁게 만드는 기계 시스템에 동력을 제공했습니다. . 전 세계적으로 거의 24개의 사업부와 거의 150,000명의 직원이 있는 회사에 이는 결코 작은 일이 아니었습니다. ABB의 10명으로 구성된 디자인 시스템 팀에서 수석 제품 디자이너로 근무한 Abdul Sial의 경우 구성 요소 및 패턴 라이브러리의 확장은 광범위한 문서화에 중점을 둔 개방성과 투명성 유지에 달려 있었습니다.

디자인 시스템 디자이너의 역할

ABB와 같은 대기업에는 디자인 시스템을 만들고 유지 관리하는 데 전담하는 팀이 점점 더 많아지고 있습니다. 마드리드에 기반을 둔 디자이너 알레한드로 벨라스코(Alejandro Velasco)는 "디자인 시스템은 일관성을 허용하고 공정한 시간에 시장에 출시하고 생산이 가치를 구축하지 않는 사용자 정의에 얽매이지 않도록 합니다."라고 말합니다. 또는 포르투갈 리스본의 디자이너인 Alexandre Brito는 다음과 같이 설명합니다. “디자인 시스템은 동일한 도구 세트를 사용하는 많은 사람들이 있을 때마다 구조를 제공하게 됩니다. 모든 사람이 같은 언어를 사용하는 것과 같습니다.”

기존 스타일 가이드가 글꼴 및 색상과 같은 디자인 기본 사항을 다룬다면 디자인 시스템은 훨씬 더 많은 범위를 포괄할 수 있습니다. Sial은 "디자인 시스템은 스타일 가이드와 디자인 구성 요소, 디자인 패턴, 코드 구성 요소 및 그 위에 문서가 혼합된 것입니다."라고 말합니다. 그가 ABB의 디자인 시스템을 작업할 때 약 120명의 디자이너가 정기적으로 그것을 사용했다. 이러한 노력은 시스템의 버전 ​​4.8을 대표했으며 팀은 이를 "디자인 진화"라고 불렀습니다.

디자인 시스템 디자이너는 개별 제품에만 집중하는 디자이너와는 다른 역할을 합니다. Sial은 "회사에서 사용하는 모든 다양한 제품을 조감도로 볼 수 있습니다."라고 말합니다.

또한 설계 작업을 수행하려면 회사 전체의 이해 관계자와 의사 소통해야 합니다. "디자인 시스템 디자이너는 사교적이어야 합니다."라고 Velasco는 말합니다. “디자인 시스템 디자이너는 조직 내에서 다른 역할을 맡은 사람들과 일하고 이야기하는 것을 정말 좋아해야 합니다. 그들은 회사의 요구에 따라 디자인 시스템을 구축하기 위해 포함할 피드백을 구별할 수 있어야 합니다.”

구성 요소의 수명 주기

ABB의 디자인 시스템에서 작업하면서 Sial은 "문서화, 문서화, 문서화"라는 하나의 포괄적인 철학을 따르게 되었습니다. ABB 웹사이트, 모바일 화면 또는 대형 독립 실행형 화면의 재사용 가능한 모든 요소에 대해 Sial은 그가 구성 요소의 수명 주기라고 부르는 것을 보여주고 싶었습니다. 이는 이동 경로, 헤더, 입력 또는 버튼과 같은 모든 구성 요소 및 패턴에 대한 광범위한 기록 보관을 의미했습니다. “그가 겪은 여정은 무엇입니까? 어떤 결정이 내려졌습니까? 그렇게 하면 항상 모든 것을 다시 만드는 것은 아닙니다. 무언가를 시도하기 전에 누군가가 이미 그것을 테스트했다는 것을 읽고 볼 수 있습니다.”라고 Sial은 말합니다.

그의 경험에 따르면 이 철학은 문서화에 대한 일반적인 접근 방식에서 벗어났습니다. 예를 들어, 빠르게 변화하는 제품 개발 세계에서 문서는 종종 프로젝트가 끝날 때 작성되거나 완전히 폐기됩니다. 그러나 디자인 시스템의 경우 문서화는 나중에 생각하는 것 이상이어야 한다고 Sial은 말합니다. “디자인 시스템은 결코 완성되지 않습니다. 지속적인 개선이 필요하다”고 말했다. "디자인 시스템 제작자와 소비자는 사고 과정과 결정을 이해하여 계속 개선하기를 원합니다."

문서화는 ABB와 같은 대규모 설계 시스템에서 특히 중요합니다. "이렇게 큰 팀이 있으면 확장할 수 있어야 합니다."라고 그는 말합니다. "팀에 합류한 모든 사람이 구성 요소로 빠르게 이동하여 구성 요소의 시작, 편집 방법 및 사용 중인 버전을 이해할 수 있도록 하려면 어떻게 해야 합니까?"

올바른 도구 찾기

Figma, Sketch 및 Adobe XD를 포함하여 디자인 시스템을 구축하기 위한 많은 도구가 있습니다. Sial은 문서를 위한 충분한 공간을 제공하는 Figma에 정착하기 전에 설계 및 프로젝트 관리 도구를 혼합하여 여러 가지를 실험했습니다.

Sial과 그의 팀은 모든 구성 요소가 자체 파일 내에 있어야 한다고 결정했습니다. “대부분의 경우 한 번에 하나의 구성 요소에서 작업합니다. 모든 구성 요소를 하나의 파일에 넣으면 Figma가 느려집니다. 각 구성 요소에 고유한 파일을 제공함으로써 더 빨리 열 수 있고 전체 기록과 문서를 한 곳에서 볼 수 있습니다.”라고 그는 말합니다.

계층 설정

Sial은 ABB 디자인 시스템을 구성하여 각 구성 요소 및 패턴에 대한 파일이 동일한 페이지를 갖도록 설정합니다. 다음 이미지는 각 페이지의 내용을 자세히 설명합니다.

씌우다

Sial은 모든 구성 요소에 대해 간단한 표지를 설정할 것을 권장합니다. Figma에서 이것은 모든 구성 요소의 썸네일 미리보기를 활성화하고 파일의 탐색 가능성을 돕습니다. ABB 설정에서 표지 페이지에는 구성 요소 이름과 구성 요소가 어떤 단계에 있는지(설계, 개발 또는 출시)가 포함됩니다. 구성 요소가 진행되면 상태를 쉽게 업데이트할 수 있습니다.

인벤토리, 사용 사례 및 요청

이 페이지에는 구성 요소가 회사의 디지털 제품에 표시되는 다양한 방법의 예가 포함되어 있습니다. 예를 들어 텍스트 필드 구성 요소의 경우 인벤토리 페이지는 텍스트 필드가 Android 기기에 표시되는 방식과 비교하여 iPhone에 표시되는 방식과 비교하여 ab.com에서 보이는 방식을 보여줍니다. Sial은 "재고를 통해 이미 무엇이 있는지 명확하게 이해할 수 있습니다."라고 말합니다.

이 페이지에는 구성 요소가 잘못 사용되는 방식도 표시되어야 합니다. "이렇게 하면 제품을 살펴보고 정렬 및 오정렬이 있는 위치를 확인할 수 있습니다."라고 Sial은 말합니다. 그는 디자인 시스템 프로젝트를 시작하는 팀에게 이미 존재하는 것을 목록화하는 것으로 시작하도록 조언합니다. “재고로 시작하면 디자인을 만들 때 지침이 됩니다.”라고 그는 말합니다.

참조, 모범 사례 및 경쟁 분석

Sial은 비전 보드와 유사한 각 구성 요소 파일의 섹션을 생성하여 다른 회사에서 비교 가능한 부품을 설계하는 방법을 보여줍니다. "다른 모든 것과 마찬가지로 가장 좋은 방법은 경쟁 분석을 수행하고 다른 사람들이 어떻게 하는지 확인하는 것입니다."라고 그는 말합니다. "다른 제품을 관찰하고 그들의 학습 내용을 확인하십시오."

테스트 및 데이터

테스트 결과 데이터 페이지는 A/B 테스트 결과와 사용자 및 이해 관계자의 피드백을 포함하여 구성 요소 테스트와 관련된 모든 데이터를 집계합니다. 간단히 말해서 Sial은 "구성 요소의 전체 이야기입니다."라고 말합니다. 아마도 디자인 팀이 2년 전에 새로운 변형을 시도했지만 작동하지 않는다는 것을 알았을까요? "아마도 우리는 변형 작업을 하고 어떤 이유로 그것을 버렸을 것입니다."라고 그는 말합니다. 그렇다면 이러한 종류의 기록은 디자이너가 다시 시도하지 않도록 하여 상당한 시간을 절약할 수 있습니다.

범위

다음 페이지에서는 설계자가 설계를 실현할 수 있도록 구성 요소의 범위를 설명합니다. 그들이 범위 페이지에 도착했을 때 Sial은 다음과 같이 말했습니다. 당신은 모든 제품의 재고를 이해합니다. 구축해야 할 사항과 요구 사항을 알고 있습니다. 이제 그것을 기록하고 간략하게 정리할 때입니다.” 그는 범위를 만드는 것이 제품 소유자, 개발자 및 디자이너와의 협업 프로세스여야 한다고 덧붙입니다.

버전

구성 요소의 최종 버전 이미지는 여기에서 찾을 수 있으며 최신 반복이 맨 위에 고정되어 있습니다. 다른 디자이너가 이를 검토하고 의견을 제시할 수 있어야 합니다.

모래 상자

샌드박스를 사용하면 디자이너가 Figma에서 직접 구성 요소 또는 패턴의 다양한 반복을 실험할 수 있습니다. "그것은 지저분할 수 있고 표준화가 없습니다."라고 Sial은 말합니다. "디자이너가 무엇이든 할 수 있는 자유가 있는 놀이터일 뿐입니다."

피그마 컴포넌트

이 파일에는 디자인 시스템 전체에서 쉽게 반복할 수 있는 UI 요소인 Figma 구성 요소 자체에 대한 페이지도 포함되어 있습니다. 디자이너는 구성 요소를 변경할 수 있으며 해당 변경 사항은 회사 전체에서 해당 구성 요소의 모든 인스턴스에 채워져 모든 것이 일관되게 유지됩니다. 이 페이지는 Figma 디자인 시스템 라이브러리로 내보내지며 모든 개별 디자이너는 Figma 구성 요소를 디자인으로 끌어다 놓을 수 있습니다. 설계 시스템 팀이 구성 요소를 변경해야 하는 경우 한 번만 변경하면 회사 전체에 배포할 수 있습니다.

스타일 규칙

다음으로 디자인 시스템 디자이너와 개발자는 스타일 규칙 페이지를 만듭니다. Sial은 "디자인에서 볼 수 없는" 요소에 대한 일종의 포괄적인 기능이라고 말합니다. 예를 들어 페이지를 아래로 스크롤할 때 구성 요소는 어떻게 렌더링됩니까? 디자인 시스템 팀이 해결되지 않은 질문이나 문제를 추적하는 곳이기도 합니다. 그는 이 페이지가 얼마나 통합적인지 알고 놀랐다고 말했습니다.

이양

핸드오버 노트는 구성 요소에 대한 코드 작성에 대한 개발자 지침입니다. 인계 문서는 구성 요소의 구조로 시작하여 그 변형을 포함합니다.

ABB 시스템 양도 문서에는 디자인 토큰도 포함됩니다. ABB와 같은 대규모 디자인 시스템에서 점점 더 대중화되고 있는 디자인 토큰은 색상, 서체 또는 글꼴 크기와 같은 UI 요소에 대한 플랫폼에 구애받지 않는 스타일 정보입니다. 디자인 토큰을 사용하여 디자이너는 값을 변경할 수 있습니다. 예를 들어 클릭 유도문안 버튼이 파란색 대신 주황색이어야 함을 나타냅니다. 그러면 해당 변경 사항은 웹사이트, iOS, 또는 안드로이드 플랫폼.

Sial은 또한 디자이너가 Figma에서 만들 수 있는 토큰의 범위를 확장하기 위해 Figma 토큰 플러그인을 만들었습니다. "Figma는 색상, 타이포그래피, 그림자 및 격자 스타일을 지원합니다."라고 그는 말합니다. 플러그인은 불투명도 및 테두리 너비와 같은 더 많은 변수에 대한 토큰을 생성합니다. 또한 표준화된 명명 규칙을 생성하므로 설계자가 토큰 이름을 수동으로 추적할 필요가 없습니다. “플러그인은 개발자와 디자이너 간의 격차를 해소합니다. 이를 통해 둘 다 디자인에 대한 단일 소스에서 작업할 수 있습니다. 한 곳에서 변경을 하면 그 변경은 디자인과 코드의 모든 곳에서 적용됩니다.”라고 그는 말합니다.

Sial은 자신의 시스템에서 개발자가 구성 요소 생성 전반에 걸쳐 적극적인 역할을 한다고 강조합니다. "초기에는 개발자에게 보여줄 준비가 되면 개발자를 참여시키곤 했습니다."라고 그는 말합니다. "그런 다음 우리는 그것이 작동하지 않는다는 것을 깨달았고 이제 말 그대로 그들과 시작 세션을 시작합니다."

문서 웹페이지

각 파일의 마지막 페이지에는 구성 요소가 완제품으로 어떻게 보이는지 보여주는 최종 디자인이 포함된 웹 페이지가 있습니다. Sial은 "실제 예제가 어떻게 보일지 보여주는 페이지를 생성하여 사용자(이 경우 우리 디자이너)가 실제 웹사이트에서 하루가 끝날 때 어떻게 보일지 볼 수 있도록 합니다."라고 말합니다.

협업이 핵심

디자인 시스템 디자이너의 역할은 다면적입니다. 알레한드로 벨라스코(Alejandro Velasco)가 말했듯이 "디자인 시스템을 설계하는 데는 많은 역할이 포함됩니다. 제가 그 일을 주도한다면 저는 프로젝트의 접착제 역할을 합니다."

이는 엄청난 사업이며 모든 회사에 반드시 옳은 조치는 아닙니다. 예를 들어, 신생 기업은 방대한 리소스를 사용하여 시스템을 만드는 것보다 Google Material Design 또는 IBM Carbon Design System과 같은 즉시 사용 가능한 시스템으로 시작하는 것이 더 나을 수 있습니다. 하지만 그것만으로는 충분하지 않은 때가 올 수도 있다고 Alexandre Brito는 말합니다. 당신이 만들고 있는 브랜드."

디자인 시스템을 구축하려면 노력과 헌신이 필요합니다. 협력도 필요하다. Sial은 프로세스 전반에 걸쳐 ABB 시스템 개발에 모든 이해 관계자를 참여시키는 것이 우선 순위임을 강조합니다. “전체 팀과 함께 정말 반복적인 작업이었습니다. 그들의 말에 귀를 기울이는 것이 전부였으며 우리는 시간을 들여 철저히 배우고 테스트하고 이 구조를 개발했습니다.”라고 그는 말합니다.

역사와 모범 사례를 포함한 광범위한 문서를 포함하는 구조를 갖는 것은 Figma 디자인 시스템의 핵심입니다. "사람들이 한 곳에서 문서를 모두 읽을 수 있기 때문에 성공입니다."라고 Sial은 말합니다. “사용 사례에서 디자인, 핸드오버 및 최종 구성 요소 페이지에 이르기까지 모든 것을 볼 수 있습니다. 사람들은 구성 요소의 전체 수명 주기를 볼 수 있습니다."

Abdul Sial의 Figma 파일 전체를 여기에서 찾아볼 수 있습니다: Component Template .

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

• 일관성이 핵심 - Figma 디자인 시스템을 구축하는 방법
• 구조의 힘 – 시스템 모델 설계 가이드
• 디자인 시스템 및 패턴 이해하기
• 디자인 도구로서의 Figma의 힘
• 미니 튜토리얼 – 전체 설계 프로세스에 Figma의 기능 활용