스토리북 관리 디자인 영패 사용하기

TL;DR: 스타일시트와 자산 파일로 storybook addon generating design token documentation 구축했습니다.
프레젠테이션 보기: https://storybook-design-token.netlify.com/
전단 개발자로서 저는 많은 ui 구성 요소 라이브러리를 구축하여 제품 팀이 밑바닥 디자인 시스템에 따라 소프트웨어를 구축할 수 있도록 했습니다.이렇게 하는 과정에서 나의 주요 문제 중 하나는 시종 디자인과 개발의 동기화를 유지하는 것이다.나의 예에서 디자인 언어(각종 스케치 파일의 형식으로 가장 가능성이 높음)를 코드로 바꾸는 것은 지속적인 과정으로 디자인 시스템의 전체 생명 주기에 디자인 변경이 발생할 수 있다.
디자인과 개발 간의 격차를 줄이기 위해 저는 가능한 한 많은 디자인 시스템 문서를 브라우저로 이동하는 방법을 평가하고 디자인 시스템의 관건적인 부분에 단일한 진리점을 만드는 것을 좋아합니다.이것은 ui 구성 요소를 뛰어넘어 밑바닥의 디자인 언어를 연구해야 한다는 것을 의미한다.Sketch와Figma와 같은 도구는 그림, 원형 디자인과 소프트웨어의 외관과 느낌을 전달하는 데 매우 적합하지만 디자인 시스템의 지식을 분산시켜 이러한 정보를 찾고 접근하는 데 더욱 어려워진다.그것들을 실제 제품(즉 코드)에 더욱 가깝게 하면 살아있는 문서를 유지하고 유행이 지난 위험을 줄이는 데 도움이 된다.

설계 영패

구성 요소는 우리 제품의 구축 블록을 제공했지만 디자인 영패는 하나의 속성을 정의했다. 우리는 이러한 속성을 사용하여 구성 요소의 외관을 만들 수 있다.일반적으로 레이아웃, 색상, 간격 또는 디자인 시스템과 같은 아이콘을 정의합니다.좋은 예시를 얻기 위해 Salesforce's collection of design tokens 를 보십시오.브래드 프로스트design tokens in context of his atomic design principles.
개발자의 관점에서 볼 때 영패를 설계하는 것은 어떤 장점이 있습니까?대부분의 경우, 그것들은 변수 (예를 들어 css 사용자 정의 속성이나sass 변수) 와 아이콘 파일 같은 자산으로 묘사할 수 있다.

스토리북 관리 디자인 영패 사용하기

Storybook는 격리 환경에서 구성 요소 라이브러리를 다시 사용할 수 있는 절호의 도구를 개발하는 동시에 당신의 라이브러리를 사용하는 제품 팀을 위해 간결한 시각과 기술 문서를 만듭니다.재사용 가능한 구성 요소 라이브러리를 구축해야 한다면, 시도해 보시기를 강력히 권장합니다.그것은 모든 주요 JavaScript 프레임워크에 적용되거나 일반적인 HTML과 CSS에만 적용됩니다.

영패를 이야기로 설계하다

이야기책은 이야기로 구성 요소와 그 다른 상태를 묘사한다.이 이야기들은 개발자가 작은 템플릿 형식으로 작성한 것으로 구성 요소의 예시적인 용법을 보여 준다.IBM's storybook는 각종 구성 요소를 가진 좋은 예시를 제공했다.
내가 처음으로 디자인 영패를 이야기책에 넣으려고 시도한 것은 수동으로 이야기를 작성하고 간단한 html표의 형식으로 우리의 영패를 열거하는 것이다.금방 엉망이 됐어.구성 요소 스타일, 스케치 파일, 내 이야기 사이를 동기화해야 합니다. 구성 요소 스타일과 스케치 파일 사이를 동기화해야 합니다.그 밖에 나는 내가 구성 요소에서 사용하고 싶은 정확한 영패를 찾기 위해 영패 이야기와 구성 요소 이야기 사이를 자주 도약하는 것을 발견했다.(이야기책은 한 번에 하나의 이야기만 표시한다.)

Storybook Design Token 플러그인 소개

다행히도 Storybook은 플러그인 개발에 좋은 API를 제공하여 당신의 이야기를 확장할 수 있습니다.구성 요소 문서를 자동으로 생성하고 a11y 테스트를 제공하며 원본 코드를 표시하고 much more
수동 유지보수의 디자인 영패 이야기와 싸우기 위해 플러그인을 작성하기로 했습니다. 구성 요소 이야기 옆에 우리의 모든 디자인 영패를 표시하는 동시에 수동 유지보수 디자인 영패 목록의 필요도 없앴습니다.이것은 css나sass 스타일시트와 자산 파일 (현재는 SVG 파일에만 한정됨) 을 분석하여 디자인 태그 문서를 생성하고 보여주는 예시를 통해 이 점을 실현한다.또한 스타일시트의 주석을 사용하여 그룹 구성 설계 영패를 구성할 수 있습니다.이러한 방식으로 영패의 예시를 렌더링하는 방법도 정의할 수 있습니다. 예를 들어 색, 경계 반지름, 네모난 프레임 그림자 등입니다.다음은 css 스타일시트에 주석 표시가 있는 작은 예입니다.

/**
 * @tokens Colors
 * @presenter Color
 */

:root {
  --n0: #fff; /* Optional token description */
  --n100: #fbfbfb;
  --n200: #edeeef;
  --n300: #e4e5e7;
  --primary: var(--n300);  /* --primary will be listed as an alias of --n300 */
}

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

:root {
  --border-radius-m: 4px;
  --border-radius-l: 8px;
}

보기the demo 기능에 대한 자세한 내용 또는 보기the repo 기능의 전체 목록 및 사용 설명서를 참조하십시오.

나는 정말 너의 피드백을 듣고 싶다.당신은 이 플러그인을 잘 이용할 수 있습니까?당신은 어떻게 디자인 시스템에서 디자인 영패를 처리합니까?latest beta release를 통해 Storybook은 브라우저에서 디자인 시스템을 기록하는 데 더 많은 도구를 도입했습니다.당신은 디자인 성과가 정적 디자인 도구에서 브라우저로 바뀌는 것을 보았습니까?