Making of true multi-brand design system

TLDR 이것이 여러 브랜드, 플랫폼, 제품을 위한 단일 디자인 시스템을 구축하는 나의 여정입니다 . 시스템 자체에 관한 것이 아니라 시스템을 작동시키는 데 필요한 도구와 워크플로우에 관한 것입니다. 이 기사에서는 그러한 시스템을 제공하는 방법에 대해 매우 기술적이고 체계적으로 설명하겠습니다. 도구 Source Foundation은 색상, 간격 및 타이포그래피 토큰을 관리하는 Figma 플러그인입니다. 또한 변수 교체, 레이어 수정, 구성 요소 스타일 가져오기/내보내기 등 다른 작업 흐름을 지원하는 여러 유틸리티 명령이 있습니다. 워크플로 모든 것은 특정 요구 사항에 맞게 소스 시스템을 신속하게 조정하기 위한 자동화를 중심으로 진행됩니다. 포크 아이디어는 마스터 파일을 복사 하고 특정 요구에 맞게 실험하고 설계할 수 있는 안전한 공간을 확보하는 것입니다. 사용자 정의 사용자 정의를 쉽게 만드는 도구에 관한 것입니다. Source Foundation 플러그인은 색상, 간격, 반경, 타이포그래피 및 구성 요소 스타일을 변경합니다. 미세 조정 및 게시 마지막 터치. 이곳은 영혼을 주는 곳입니다. 결과 디자인 시스템 파일 (Figma 파일) Figma 플러그인 토큰 (Git Hub 저장소) 브랜딩 샘플 (Figma 파일 및 프로토타입) Crypto Trader Pro (Figma 파일) 라이브 데모 Crypto Trader Pro (Figma 프로토타입) 브랜드 구성요소 데모 (Figma 프로토타입) 소스 재단 개발 문서(웹사이트) 뛰어들어보자! 아이디어 나는 몇 년 동안 멀티 브랜드 디자인 시스템을 추구해 왔습니다. 그리고 경험이 쌓이고 도구가 더욱 발전할수록 매우 가까워진 것 같은 느낌이 듭니다. 제가 택한 경로는 모든 구성 요소, 스타일 및 변수가 포함된 단일 마스터 파일을 갖는 것이었습니다. 새 프로젝트를 시작하려면 해당 파일을 복사하여 프로젝트 필요에 따라 맞춤설정합니다. 복사본은 마스터 라이브러리에 영향을 주지 않고 디자인 요소를 조작할 수 있는 안전한 장소를 제공합니다. 간단히 말해서 포크 저장소나 CodePen 프로젝트와 같습니다. 여러 클라이언트 또는 프로젝트를 위한 단일 소스 파일 이전 버전과의 호환성을 위해서는 해당 복사본의 구성 요소 구조를 변경하지 않고 명명 규칙을 유지하는 것이 중요합니다. 장기 프로젝트의 경우 필요할 때마다 최신 버전으로 설계를 업그레이드할 수 있습니다. 도전과제 복사본을 만드는 것은 쉽지만 전체 시스템을 변경하는 것은 어렵습니다. 물론 디자이너가 손으로 할 수도 있지만 창의성이 부족한 반복적인 프로세스이기 때문에 프로세스를 자동화할 수 있는 기회를 보았습니다. 나는 디자인 언어의 몇 가지 핵심 측면을 쉽게 대체하고 싶었습니다. 색상 팔레트 밝은 모드와 어두운 모드를 모두 미세 조정할 수 있는 기능을 통해 중간색과 강조색을 완벽하게 제어하고 싶었습니다. 타이포그래피 타이포그래피 크기와 기본 글꼴 크기를 선택할 수 있는 방법이 있어야 합니다. 기본 데스크탑, 웹 및 모바일용으로 디자인할 수 있는 광범위한 스케일의 간격 Radii 보수적인 것부터 좀 더 재미있는 것까지 몇 가지 사전 설정 고도 최대 6개의 고도 레벨이 필요합니다. 구성 요소 스타일 목표는 버튼, 드롭다운, 양식 요소와 같은 핵심 디자인 구성 요소에 다양한 시각적 스타일을 적용하는 것이었습니다. 색상 팔레트 이것은 마스터하기 가장 어려운 것입니다. 해결하는 것이 가장 재미있었어요. 팔레트 관련 작업 흐름은 항상 동일합니다. 기본 색상 선택 음영 만들기 접근성 측면을 확인하세요. 나는 다른 테마가 필요할 때마다 손으로 작업하고 싶지 않았습니다. 새로운 것을 얻기 위해 핸들을 드래그할 수 있는 완전히 자동화된 프로세스를 원했습니다. 나는 이미 나와 내 회사의 다른 수십 명의 디자이너에게 적합한 단색 시스템을 갖고 있습니다. 이제 수동 작업이 거의 또는 전혀 없이 팔레트를 변경할 수 있는 방법이 필요했습니다. 이러한 문제를 해결하기 위해 저는 색상 관리와 관련된 모든 기초 작업을 수행하는 Figma용 Source Foundation 플러그인을 만들었습니다. 소스 파운데이션 팔레트 컨트롤 의미, 중성색 및 강조 색상을 완벽하게 제어할 수 있습니다. 접근성을 염두에 두고 제작되었으며 모든 액센트는 최소 4.5:1 명암비로 WCAG 2.2를 통과합니다. 그리고 가장 중요한 것은 사용하는 것이 재미있다는 것입니다. 다양한 색상 테마와 디자인의 다른 측면을 가지고 놀 수 있는 라이브 데모가 있습니다 → https://namad.github.io/source-foundation-docs/ . 타이포그래피, 간격 및 반경 이는 UI 요소의 전체 크기와 톤에 영향을 미치는 중요한 측면입니다. Figma용 Source Foundation 플러그인의 UI 스케일 설정 여러 세트의 디자인 토큰을 사용하여 간단하게 만들었습니다 . 프로젝트 요구 사항에 맞는 세트를 선택하면 플러그인이 나머지 작업을 수행합니다. 구성요소 스타일 구성요소 스타일은 시스템의 모든 핵심 구성요소의 모양과 느낌을 정의합니다. 평평할까요? 아니면 조금 반짝거리는? 높아졌나요, 낮아졌나요? 좀 울퉁불퉁하게 만들어 보면 어떨까요? 단순하고 효과가 많은 UI 요소는 동일한 소스에서 나옵니다. 디자이너로서 저는 플러그 앤 플레이 워크플로를 통해 모든 플랫폼, 모든 클라이언트에 맞게 조정할 수 있는 유연하고 유지 관리가 쉬운 스타일 시스템을 원했습니다. 원한다면 CSS와 유사한 클래스. 개념 제대로 작동하려면 구성 요소와 해당 스타일을 분리해야 합니다. 이는 버튼, 드롭다운 및 양식에 대한 CSS 클래스를 생성하지만 Figma 구성 요소를 사용하는 것과 같습니다. 나는 그것을 스타일 구성 요소라고 부릅니다. 스타일 구성 요소는 재사용 가능한 UI 요소 스타일을 나타내며 CSS 클래스와 매우 유사합니다. 버튼 레이어 구조 Figma에서 스타일 구성 요소 인스턴스는 절대적으로 위치하며 콘텐츠 뒤에 위치합니다. 이렇게 하면 이 시각적 레이어를 계속해서 재사용하여 유사한 구성 요소의 스타일을 일관된 방식으로 지정할 수 있습니다. 모든 양식 요소는 동일한 스타일을 사용합니다. 또 다른 흥미로운 부작용이 있습니다. 이는 구성 요소 인스턴스이기 때문에 다른 인스턴스로 쉽게 교체할 수 있어 구성 요소에 여러 스타일 옵션을 제공할 수 있는 기회가 열립니다. 예를 들어 검색 상자는 다른 스타일을 사용하는 일반 입력입니다. 검색창이 대체 스타일을 사용합니다. 내 절대 필수품은 다음과 같습니다. 공통 UI 요소 클릭, 마우스 오버 및 선택이 가능한 모든 대화형 UI 요소에 대한 기본 스타일입니다. 메뉴 항목, 목록 항목, 탐색 항목 등이 있습니다. 버튼 기본, 기본, 파괴 및 고스트 버튼 양식 컨트롤 입력, 확인란, 라디오 버튼 및 토글 스위치 포커스 시각적 요소 내가 좋아하는 모든 요소에 적용할 수 있는 재사용 가능하고 일관된 포커스 시각적 요소 모달, 드롭다운, 토스트 및 팝오버용 오버레이 스타일 스타일 구성요소 구조 스타일 구성 요소에 대해 일관된 구조를 유지하는 것이 좋습니다. 필요할 때마다 레이어를 더 쉽게 유지하고 교체할 수 있습니다. 여러 번의 실험 끝에 제가 내린 결론은 다음과 같습니다. 기본 스타일 구성요소 레이어 구조 그것을 분석해 봅시다. 배경 레이어는 메인 컬러와 레이어 효과를 적용하기 위한 레이어입니다. 내부의 배경 이미지 레이어는 CSS의 배경 이미지 속성과 동일한 작업을 수행합니다. 그림자 구성요소는 색상 번짐 그림자를 지원하기 위해 맞춤 제작된 고도 효과입니다 . 이렇게 하면 Figma에서 전용 효과 스타일을 만들지 않고도 원하는 대로 그림자 색상을 변경할 수 있습니다. 그리고 그림자 혼합 모드 도 변경할 수 있습니다 ! 아래 이미지는 몇 가지 색상만 포함된 기본 스타일 구성 요소를 사용하여 얻을 수 있는 결과를 보여줍니다. 기본 스타일 구성 요소로 만든 사용자 정의 스타일 다크 모드를 잊지 말자. 어두운 모드 미리보기 시각적 상태 모든 대화형 요소에는 시각적 상태가 있어야 합니다. 이를 구현하기 위해 구성 요소 변형을 사용합니다. 예를 들어 내 기본 버튼 스타일은 다음과 같습니다. 기본 버튼 스타일 구성요소 그리고 이것이 양식 요소입니다. 양식 요소 스타일 색상 조정 최신 UI 개발에서 매우 중요한 기능은 색상을 수정하는 기능으로, 색상 팔레트를 단순화하는 좋은 방법입니다. 예를 들어 CSS에서는 color-mix() 함수를 사용할 수 있으며 그라데이션 으로 단색 채우기를 오버레이할 수 있습니다 . 모든 최신 CSS 전처리기에는 어떤 방식 으로든 색상 기능이 있습니다 . 문제는 Figma에 스타일과 색상 변수에 대한 기능이 없다는 것입니다. 이러한 한계를 극복하려면 특별한 디자인 구성요소 에 의존 하고 레이어가 작업을 수행하도록 해야 합니다. 불투명 색상 불투명도를 변경하는 기능은 우리 무기고에 꼭 필요한 기능입니다. 현재 Figma에서는 색상 변수 별칭에 대한 알파 채널을 변경할 수 없습니다. 하지만 레이어 불투명도를 변경할 수 있으며 이를 위한 불투명도 변수 도 있습니다. 별도의 레이어에 색상을 설정한 후에는 팔레트에 있는 모든 항목과 함께 작동하도록 만드는 것이 더 이상 생각할 필요도 없습니다. 색조 및 음영 색조와 음영은 대상 색상을 더 밝거나 어둡게 만듭니다. CSS에는 단색 채우기 위에 가상 레이어를 생성하는 배경 이미지 속성이 있습니다 . 그라데이션 채우기 또는 이미지로 배경색을 오버레이할 수 있습니다. Figma에서는 비슷한 결과를 얻기 위해 레이어를 사용할 것입니다. CSS와 동일한 방식으로 작동합니다. 웹에서 어떻게 작동하는지에 대한 몇 가지 실제 예가 있습니다 → https://namad.github.io/source-foundation-docs/#colour-adjustments 같은 색상의 색조와 음영 그리고 CSS 배경 이미지에는 배경 블렌드 모드가 있기 때문에 멋집니다 . 따라서 배경 이미지 레이어에서 동일한 모드를 안전하게 사용하고 어느 정도 일관된 결과를 얻을 수 있습니다 . 나는 "오버레이"가 놀라운 일을 하고 훨씬 더 깔끔한 결과를 만들어낸다고 생각합니다. 오버레이 블렌드 모드로 만든 색조 및 음영 그라데이션 그라디언트를 만들기 위해 여러 색상을 혼합합니다. Figma에서 이를 구현하기 위해 그래디언트 마스크를 사용하여 CSS와 같은 선형 그래디언트를 갖습니다. HTML+CSS로 변환하는 방법의 예가 있습니다 → https://codepen.io/oxn-krtv/pen/dywWGZq 이 그라데이션은 두 가지 색상을 혼합하여 만들어집니다. 이 방법은 훌륭하게 작동하지만 밝은 모드와 어두운 모드 모두에서 작동하려면 확장된 액센트 세트가 필요합니다. 팔레트를 간결하게 유지하기 위해 단색 위에 단색 그라디언트를 사용하고 다양한 블렌드 모드를 사용하여 혼합하는 것을 선호합니다. 이러한 그라디언트는 단색 페인트 위에 오버레이 블렌드 모드를 사용합니다. 이 방법을 사용하면 내가 선택한 색상 위에 멋지고 깔끔한 그라데이션이 생성됩니다. 자세한 내용은 여기에서 확인할 수 있습니다 → https://namad.github.io/source-foundation-docs/#gradients 이제 팔레트에 있는 단색 채우기 위에 이러한 특수 구성 요소를 색상 함수나 그라데이션으로 사용할 수 있습니다. 플러그 앤 플레이 스타일 이것이 해결해야 할 마지막 부분이었습니다. 나는 구성 요소 위에 적용하여 모양과 느낌을 완전히 바꿀 수 있는 일종의 스타일 시트를 찾고 있었습니다. 결과를 미리 볼 수 있도록 시각적인 것이 바람직합니다 . 밝은 모드와 어두운 모드의 다양한 스타일 구성요소 수동으로 시도했지만 몇 번 실행한 후에는 수동 흐름이 너무 복잡하고 오류가 발생하기 쉽다는 것을 알았습니다. 일종의 자동화를 사용하는 것이 훨씬 낫기 때문에 사용자 정의 스타일 라이브러리에 대한 간편한 가져오기/내보내기 작업 흐름을 발명했습니다. 자동화된 파일 내 스타일 템플릿 스타일을 내보내려면 스타일 구성 요소가 있는 프레임을 선택하고 내보내기 명령을 실행하기만 하면 됩니다. 자동화는 모든 구성요소를 찾아 해당 레이어 구조를 일반 프레임에 복제합니다. 이는 원래 구성 요소에 다시 적용할 수 있는 느슨한 복사본과 같습니다. 이제 원하는 만큼 사전 설정을 만들고 가져오기 자동화를 통해 다시 적용할 수 있습니다. 이 자동화는 사전 설정의 모든 속성과 재정의를 시각적 모양을 완전히 변경하는 라이브 구성 요소로 다시 전송합니다. 이것이 제가 해야 할 전부입니다. 맞춤 디자인 시스템 파일을 사용하면 됩니다. 재개하다 진정한 화이트 라벨 시스템을 만드는 것은 어렵 습니다 . 몇 년 전 팀이 매우 복잡한 퍼즐을 풀려고 노력하는 모습을 담은 이 비디오를 보고 충격을 받았습니다. 사용자 인터페이스를 완전히 분해하고, 움직이는 모든 부분 사이의 복잡한 관계를 모두 실현하고, 이를 문제에 대한 솔루션으로 표현하기 위한 여정이 시작된 바로 그 순간이었습니다. 그 이후로 저는 여러 브랜드에 서비스를 제공할 수 있고 실현 가능한 시스템인 전체 Figma 제품을 설계한다는 목표를 세웠습니다. 이는 적절하게 엔지니어링된 설계 구성 요소, 고급 도구 세트 및 명확한 작업 흐름의 조합입니다. 의견을 통해 어떻게 생각하는지 알려주세요.