Grommet과 Storybook으로 디자인 시스템을 구축하는 방법

Grommet과 Storybook으로 디자인 시스템을 구축하는 방법

소개

우리 모두는 유행어 디자인 시스템이 위아래로 던져지는 것을 들었습니다. 그러나 우리는 그것을 어떻게 이해하고 더 중요하게는 우리 자신을 위해 어떻게 만들 수 있습니까? 이 게시물은 React, Grommet 및 Storybook을 사용하여 디자인 시스템을 만드는 방법을 안내합니다.

디자인 시스템이란 정확히 무엇입니까?

디자인 시스템은 디자인 언어, 구성 요소 라이브러리, 처음 두 개가 있는 문서/스타일 가이드 웹사이트로 구성됩니다.

에 자세히 설명되어 있듯이 Emma Wedekind의 이 강연 , 개발자가 디자인 시스템에 대해 이야기할 때 대부분 구성 요소 라이브러리를 참조합니다. 디자이너는 디자인 언어를 참조합니다. 프로젝트 관리자는 모든 것이 있는 문서/스타일 가이드 웹사이트에 가장 관심이 많습니다.

다음은 이 세 부분의 목적에 대해 설명합니다.

• 디자인 언어: 이것은 우리 제품을 우리 브랜드의 표현으로 만드는 데 도움이 됩니다. 여기에는 색상(감정용), 유형 척도, 접근성 및 모션(인격용)이 포함됩니다.
• 구성 요소 라이브러리: 이들은 애플리케이션의 빌딩 블록 역할을 하는 재사용 가능한 코드 구성 요소입니다. 그들은 또한 디자인 언어에 표현을 제공합니다. 여기에는 버튼, 입력 필드 등이 포함됩니다. 처음부터 빌드하지 않는 경우 Grommet과 같은 인기 있는 라이브러리를 프로젝트 요구에 맞게 사용자 지정할 수 있습니다.
• 문서/스타일 가이드 웹사이트: 이것은 디자인 언어 및 구성 요소 라이브러리에 대한 모든 것을 문서화하는 사이트입니다. 이렇게 하면 모든 팀 구성원이 사용을 위해 액세스할 수 있으므로 일관성이 생깁니다.

디자인 시스템은 일반적으로 애플리케이션을 구성하는 빌딩 블록을 제공합니다. 이는 회사의 제품 제품군이 더욱 복잡해지고 팀 규모가 커짐에 따라 일관된 사용자 경험으로 이어집니다.

모든 주요 소프트웨어 회사에는 자체 설계 시스템이 있습니다. 인기 있는 디자인 시스템의 예로는 Shopify의 Polaris, Google의 Material Design 및 Trello의 Nachos가 있습니다.

그렇다면 어떻게 자신의 브랜드를 구축할 수 있을까요? 먼저 디자인 시스템의 세 부분이 제자리에 있어야 합니다.

반응 기본 범위 슬라이더

그로밋

Grommet은 프로젝트에 쉽게 사용할 수 있는 반응형 및 액세스 가능한 모바일 우선 코드 구성 요소를 제공하는 React 구성 요소 라이브러리입니다.

특히 주목할만한 점은 Grommet이 색상, 유형, 구성 요소 상호 작용 및 레이아웃 요구 사항에 맞게 구성 요소 라이브러리를 조정할 수 있는 강력한 테마 도구를 제공한다는 사실입니다. 이것은 앞에서 논의한 디자인 언어 부분을 다룹니다.

동화책

Storybook은 코드 구성 요소를 문서화하고 탐색할 수 있는 오픈 소스 도구입니다. React, Vue 및 Angular와 함께 작동하며 구성 요소를 격리하여 작업하고 다른 상태에서 테스트할 수도 있습니다.

가장 중요한 것은 Storybook을 사용하여 사용자 지정 가능한 스타일 가이드 사이트를 자동으로 생성할 수 있다는 것입니다.

설치

시작하려면 빈 React 앱을 스캐폴딩해 보겠습니다.

코드 편집기에서 프로젝트를 엽니다. 다음 단계는 Grommet을 설치하는 것입니다.

또한 스토리북을 설치합니다.

Storybook은 React, Vue 및 Angular에 사용할 수 있습니다. 위의 명령은 사용 중인 프레임워크를 감지하고 적절한 Storybook 버전을 설치합니다. 우리의 경우 React 버전 |_+_| 설치 될 것이다.

설치 후 앱을 실행합니다.

브라우저에 다음 화면이 표시됩니다.

구성 요소 탐색기에서 볼 수 있듯이 Storybook은 데모용으로 두 가지 구성 요소를 기본적으로 제공했습니다. 이것들은 |_+_| 그리고 |_+_| 구성 요소.

프로젝트 폴더를 살펴보면 |_+_| 그리고 |_+_| 폴더는 설치 후 추가되었습니다.

방문 |_+_| 폴더를 클릭하여 데모 구성 요소를 봅니다. 아래 부분을 관찰하고 제거하거나 주석 처리하십시오. 우리는 우리 자신의 환영 및 버튼 구성 요소를 구축할 것입니다.

));

이것은 남겨야 할 것입니다:

구성 요소 만들기

이제 주요 사항으로: 앞에서 본 것처럼 환영 및 버튼 구성 요소를 빌드하는 것으로 시작할 것입니다.

좋은 문서의 특징 중 하나는 개발자가 시작하는 데 도움이 되는 환영 메모가 있다는 것입니다. 이것은 일반적으로 설정 또는 설치 가이드를 제공합니다. 귀사를 위한 디자인 시스템을 구축하고 있다고 가정해 보겠습니다. |_+_| 구성 요소를 환영합니다. 즉, 일반 텍스트로 채워집니다.

NS span 요소

만들기 |_+_| 폴더 |_+_| 폴더를 만든 다음 |_+_| |_+_| 안에 파일이 있습니다. 파일에 다음 코드를 삽입합니다.

}

쿼리 문자열에 대한 js 객체

}

내보내기 기본 환영;

위의 코드에서 |_+_| 및 |_+_|는 Grommet의 유형 구성 요소입니다. 또한 콘텐츠를 배치하기 위한 컨테이너인 |_+_|도 가져왔습니다. 모든 것이 |_+_| 안에 있습니다. 내보내기를 위해 설정한 구성 요소입니다.

내부 |_+_| 폴더로 이동 |_+_| 가져오기 |_+_| 요소.

또한 다음을 |__+_|에 추가하십시오.

Storybook에서 스토리는 구성 요소와 구성 요소의 여러 가능한 상태(예: 다른 상태의 버튼)를 나타냅니다.

위의 코드에서 |_+_| 기능은 구성 요소 탐색기 인터페이스에서 특정 스토리의 이름을 지정하는 데 도움이 되며 |_+_| 이 기능은 드롭다운을 설정하며, 이 드롭다운은 릴리스될 때 구성 요소의 다양한 상태를 표시합니다. 이것은 다음 구성 요소를 만들 때 더 명확해집니다.

NS src 요소

버튼은 인터페이스에서 많이 사용됩니다. 그것들은 제품에 큰 영향을 미치며 디자인 시스템을 만들 때 시작하기에 좋은 장소입니다.

만들기 |_+_| 구성 요소, 생성 |_+_| 파일 |_+_| 폴더. 다음 코드를 붙여넣습니다.

|_+_|라는 고유한 구성 요소를 만들고 싶기 때문에 Grommet의 기본 버튼 이름을 |_+_|로 변경해야 했습니다. 이름 충돌을 방지합니다.

이제 가져오기 |_+_| |_+_|의 구성요소:

동일한 파일에 버튼 스토리 추가:

다음과 같이 렌더링됩니다.

모든 디자인 시스템에서 예상되는 것처럼 많은 상황에서 버튼과 같은 구성 요소를 재사용할 수 있어야 합니다. 이것은 일반적으로 사용자 정의 소품을 구성 요소에 전달하여 수행됩니다.

전달되는 props는 구성 요소가 렌더링되는 방식에 영향을 미칩니다. 다행스럽게도 Grommet에는 각 구성 요소에 대한 요구 사항을 충족할 수 있는 충분한 소품이 제공됩니다.

버튼 컴포넌트가 |_+_|에서 전달된 모든 props를 수신하도록 하려면 |_+_|로 이동하세요. 중괄호 사이에 표현식을 추가하십시오.

이제 다양한 버튼 변형을 만들고 문서화해 보겠습니다. 버튼 스토리로 이동하여 다음과 같이 변경합니다.

코드를 실행하면 다음 화면이 표시되어야 합니다.

그로밋 버튼에는 |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_와 같은 유용한 소품이 많이 있습니다. |, |_+_|, |_+_|, |_+_|, |_+_| 등. 여기에서 모두 확인하세요.

Storybook은 여기에서 볼 수 있는 추가 기능으로 더욱 강력해질 수 있다는 점을 언급할 가치가 있습니다. 추가 기능은 스토리북에 추가하여 더 유용하게 만들고 고급 기능을 추가할 수 있는 추가 기능입니다.

valueerror 배열 요소를 시퀀스로 설정

예는 다음과 같습니다. 소스 추가 기능 (복사하여 붙여넣을 구성 요소의 소스 코드를 볼 수 있음), 메모 추가 기능 (마크다운에서 구성 요소 사용을 문서화하기 위해) 및 배경 추가 기능 스토리북 커스터마이징용.

그로멧 테마 사용자 정의

이제 Grommet 테마를 사용자 지정할 수 있는 세 가지 방법을 살펴보겠습니다.

1. 그로멧 구성 요소에는 최상위 래퍼 컨테이너 전역적으로 구성 요소의 스타일을 지정하는 데 사용할 수 있습니다.

1. 그로멧은 |_+_|도 제공합니다. 구성 요소를 로컬로 스타일 지정합니다.

1. styled-components를 사용하여 구성 요소의 스타일을 개별적으로 지정할 수도 있습니다.

문서를 정적 앱으로 배포

전체 팀에 구성 요소 라이브러리를 보여주기 위해 사이트로 배포해야 합니다. Netlify, GitHub 페이지 또는 모든 정적 호스팅 서비스에 배포할 수 있습니다.

다음 npm 스크립트를 |_+_|에 추가하기만 하면 됩니다.

그런 다음 |_+_|를 실행합니다.

이것은 프로젝트 디렉토리에서 정적 웹 앱으로 스토리북을 빌드하고 |_+_| 예배 규칙서. 이제 |__+_|에서 콘텐츠를 배포할 수 있습니다. 원하는 위치에 디렉토리.

로컬에서 테스트하려면:

결론

이 게시물에서는 디자인 시스템을 구축할 수 있는 기술을 살펴보았습니다. 구성 요소, 사용자 정의, 문서화 및 디자인 시스템 호스팅 방법을 구현하는 방법을 다루었습니다. 이제 멋진 것을 만드십시오!

이 튜토리얼이 확실히 도움이 되기를 바랍니다. 계속 방문

에 원래 게시됨 블로그.logrocket.com

#reactjs #react-native #디자인 패턴 #웹 개발

또한보십시오:

• 파이썬에서 정적 타이핑을 사용하는 방법
• CORD.Finance(CORD) 구매 방법 및 위치 – 쉬운 단계별 가이드
• Python 프로그램으로 설명하는 생일 역설
• 초보자를 위한 React 부트스트랩 모달을 만드는 방법
• ALLY(ALY) 구매 방법 및 위치 – 쉬운 단계별 가이드