프랙탈로 디자인 시스템을 문서화하십시오

Jan 30, 2026

어떻게

디자인 시스템에 대해 더 많이 배우는 것을 좋아합니까? 그런 다음 수석 UI 엔지니어를 놓치지 마십시오 MINA MARKHAM. ...에서 뉴욕을 생성하십시오 4 월 28 일에, 그녀가 HillaryClinton.com에서 호스팅 된 많은 응용 프로그램에 전원이 공급되는 디자인 시스템 인 Pantsuit을 어떻게 창조했는지 토론 할 것입니다. 그리고 서해안에서, 샌프란시스코를 생성하십시오 6 월 9 일, Stephanie Rewis. Salesforce 디자인 시스템을 구축하는 동안 배운 수업 중 일부를 공유 할 것입니다.

지금까지 우리 중 많은 사람들이 익숙합니다 스타일 가이드 ...에 그러나 새로운 유형의 디자인 시스템 문서가 증기를 얻는 새로운 유형의 유형입니다. 패턴 라이브러리. 이 둘의 주요 차이점은 도구의 설명서의 주요 원본입니다.

스타일 가이드의 문서는 마크 다운 파일에서 유래하는 경향이 있으므로 저자가 자주 복사하여 마찰에 붙여 넣기가 종종 있습니다. 이것은 여러 구성 요소를 함께 피팅 할 때 유지하는 것이 거의 불가능합니다.

반면 패턴 라이브러리는 구성 요소 HTML 파일을 일류 시민으로 취급합니다. 각 구성 요소는 마크 업을 표시하고 HTML 파일에서 직접 HTML을 렌더링하는 자체 페이지를 가져옵니다. 이렇게하면 HTML 파일과 문서가 동기화되지 않음을 보장합니다.

패턴 라이브러리는 일반적인 HTML이 아닌 템플릿 언어를 사용하여 종종 작성됩니다. 템플릿에는 변수 및 기타 논리가 포함될 수 있습니다. 그러면 여러 가지 데이터 세트를 통과 할 수 있으므로 구성 요소의 변형이 표시 될 수 있습니다.

여러 템플릿을 결합하여보다 복잡한 디스플레이 또는 전체 페이지를 생성 할 수 있습니다. 이러한 파일은 매우 유연합니다. 생산에도 사용할 수 있습니다! 우리의 패턴 라이브러리에 대한 변경 사항은 모든 마크 업이 라이브러리 또는 생산을위한 모든 마크 업으로 자동 템플릿 단일 정식 템플릿에서 유래합니다.

Design systems will be covered at both Generate New York and San Francisco this year — 디자인 시스템은 올해 뉴욕과 샌프란시스코를 생성합니다.

프랙탈을 입력하십시오

Clearleft, 프랙탈 웹 구성 요소 라이브러리를 작성하고 문서화하고 프로젝트에 통합하는 데 도움이됩니다. 이 자습서에서는 어떻게 작동하는지 더 자세히 살펴 보겠습니다 (완성 된 버전의 데모 버전을 다운로드하십시오. 여기 짐마자

프랙탈은 NPM을 통해 설치된 Node.js 모듈입니다. 먼저 전역으로 모듈을 설치하여 새 프로젝트를 생성 할 수 있습니다.

npm install --global @frctl/fractal

이 패키지가 설치되어있는 경우 새 프로젝트를 만듭니다.

fractal new project-name

이 명령은 설치 프로세스를 통해 당신을 걷는 설치 안내서를 시작합니다. 그것은 프로젝트의 제목을 묻습니다. 구성 요소, 설명서 및 공용 폴더의 이름; 버전 제어를 위해 Git을 사용할 경우. 이러한 질문이 완료되면 프랙탈은 필요한 모든 모듈을 설치하고 지정된대로 폴더 구조를 설정합니다.

전역 설치를 건너 뛰고 수동으로 프로젝트를 작성하려면 수동 설치 지침을 참조하십시오. 여기 ...에

그것을 회전 시키십시오

이제 완전히 설치된 프랙탈 프로젝트가 있으므로 프로젝트 폴더로 스테핑하여 밉니다. CD Project-Name. 프랙탈 동기화 명령을 실행합니다. 이렇게하면 로컬 서버가 시작되어 변경할 파일을 감시하고 자동으로 BrowserSync를 시작합니다.

fractal start --sync

그리고 그런 식으로, 당신은 프랙탈의 일하는 인스턴스가 있습니다. 선택의 브라우저를 열고 탐색하십시오 http : // localhost : 3000. 새로운 프랙탈 프로젝트의 시작을 보려면. 모든 사람이 프랙탈을 전 세계적으로 설치하도록 요구하지 않으려면 스크립트를 만드십시오. package.json. 프랙탈 바이너리를 호출합니다.

 "스크립트": {
    "프랙탈": "./node_modules/.bin/fractal start --sync"
}

이제 사용할 수 있습니다 npm 프랙탈을 실행합니다 전 세계적으로 아무것도 설치하지 않아도됩니다.

구성 요소 추가

이제 프랙탈 프로젝트를 시작한 이제 일부 구성 요소를 추가 할 시간입니다. 시동기 파일에는 '예'라는 구성 요소가 포함되어 있지만 해제를 제거하고 새로운 것을 처음부터 만들 수 있습니다.

프랙탈에 대한 최선의 사항 중 하나는 구성 요소를 구성 할 수 있지만 구성 요소 폴더 안에서 좋아하며 패턴 라이브러리 탐색에서 해당 조직을 자동으로 모방합니다.

첫 번째 구성 요소의 경우 새 기본 버튼을 작성합니다. 단추 폴더 ...에 그렇게하려면 템플릿 파일로 만들 수 있습니다. 구성 요소 / 버튼 / 기본 버튼 / 기본-Button.hbs ...에 프랙탈은 핸들 바 템플릿을 상자 밖으로 지원하므로 .hbs. 파일 확장자:

<미리 언어 = "HTML">


   & lt; 버튼 클래스 = "기본 버튼"& gt; {{text}} & lt; / button & gt;

그만큼 {{본문}} 버튼 태그 안의 문자열은 변수 자리 표시 자입니다. 이렇게하면 템플릿을 재사용하여 다른 값을 전달할 수 있습니다. 본문 데이터 파일에서.

데이터 파일을 만들려면 핸들 바 파일과 동일한 기본 이름을 사용하지만 다른 경우 yml. 신장. 이제 primary-button.config.yml. 그 안에 앉아있다 구성 요소 / 버튼 / 기본 버튼 폴더는 다음과 같아야합니다.

 제목 : 기본 버튼
문맥:
    텍스트 : 나를 클릭하십시오

이 모든 것은 첫 번째 새 구성 요소 인 기본 구성 요소, 기본 버튼 (기본 버튼)의 구성원이 텍스트 : '클릭'을 입력합니다.

구성 요소 변형

프랙탈은 동일한 구성 요소의 변형을 지원하므로 다양한 수정 자 클래스 또는 속성과 동일한 구성 요소를 표시 할 수 있습니다. 그래서 우리는 어두운 테마 버튼을 사용할 수있는 옵션을 원합니다. 새 템플릿 파일을 만들 수 있습니다 기본 버튼 - Dark.hbs. 원래의 템플릿 옆에있는 (이중 대시는 이러한 구성 요소 변형을 나타냅니다). 이 템플릿에서는 새로운 스타일을 첨부하기 위해 우리가 연결할 수있는 수정자를 적용합니다.

& lt; 버튼 클래스 = "기본 버튼"데이터 - 테마 = "어두워짐"& gt; {{text}} & lt; / button & gt;

이제 CSS를 작성할 때는이 템플릿을 수정하는이 템플릿을 변경하기 위해 다음 선택기를 포함 할 수 있습니다.

 .primary-button [data-theme = "어두운"] {}

데이터 변형

여러 템플리트 파일을 만들어 변형을 정의 할 수있는 바로 데이터 내의 변형을 만들 수 있습니다. 우리는이 일을 할 수 있습니다 primary-button.config.yml. 변형 배열을 추가하여 파일.

 제목 : 기본 버튼
문맥:
    텍스트 : 나를 클릭하십시오
변종 :
- 이름 : 다운로드
    문맥:
텍스트 : 지금 다운로드하십시오
- 이름 : 설치
    문맥:
텍스트 : 지금 설치

이렇게하면 다른 텍스트가 버튼에 전달 된 '다운로드'및 '설치'라는 새로운 변형이 생성됩니다. 더 실용적인 예는 당신이 이것을 사용하는 경우 primary-button.hbs. 프랙탈뿐만 아니라 생산 템플릿. 이 경우 어두운 테마에 대한 새로운 템플릿을 만드는 대신 테마 값을 변수로 전달하고 데이터 변형을 사용하여 모든 다른 버튼 테마를 표시 할 수 있습니다.

& lt; 버튼 클래스 = "기본 버튼"데이터 - 테마 = "{{Theme}}"& gt; {{text}} & lt; / button & gt; 제목 : 기본 버튼 문맥: 텍스트 : 나를 클릭하십시오 테마 : 빛 변종 : - 이름 : 어두운 테마 문맥: 텍스트 : 나를 클릭하십시오 테마 : 어두운

다른 자산 취급

프랙탈은 마크 업 및 데이터 이외의 파일도 처리합니다. 구성 요소 폴더에 추가하는 CSS, JavaScript, 이미지 또는 기타 자산이 '자산'탭에 표시됩니다. A.를 지정할 수 있습니다 readme.md. 구성 요소의 사용 방법에 대한 참고 사항을 작성하거나 문서의 다른 부분에 대한 링크를 쓸 수 있도록 구성 요소의 파일.

다음 단계

모든 핵심 구성 요소에 대한 이전 예제를 반복하면 사이트의 기본 빌딩 블록의 유용한 카탈로그가 생성됩니다. 그러나 패턴 라이브러리의 진정한 힘은이 조각을 함께 결합하는 능력에서 비롯됩니다. 그를 확인하십시오 프랙탈 문서 더 작은 원자 요소를 결합하여 더 큰 원자 요소를 조합하여 더 복잡한 구성 요소를 만드는 방법을 배우려면

Docs 폴더는 전통적인 스타일 가이드 정보와 보충 노트를 넣는 훌륭한 장소입니다. 이로 인해 브랜드의 음성 및 음색, 색상 및 변수 목록, 색상 및 변수 목록 등에있는 지침을 보딩하는 문서, 색상 및 변수 등에 포함 할 수 있습니다. 구성 요소가 동일한 폴더 기반 탐색을 따르고 주체 폴더에서 파일을 구성하는 경우 해당 파일을 탐색 할 수 있습니다. 프랙탈 문서 도구 산들 바람.

프랙탈은 또한보다 복잡한 데이터 소스를 지원합니다. 템플릿에 대한 큰 데이터 세트를 생성하거나 일부 타사 API에서 가져 오려면 사용할 수 있습니다. component-name.config.js yml 파일 데이터 대신 JavaScript 객체를 반환합니다.

마지막으로 프랙탈을 사용하면 여러 가지 다른 템플릿 언어를 사용할 수 있습니다.문서의 전체 목록을 확인하십시오.그리고 무엇보다도, 재미있게 보내십시오!

티켓을 예약하십시오 일으키다 오늘!에 뉴욕 힐러리 클린턴의 대통령 캠페인을위한 디자인 시스템을 구축 한 Mina Markham에서 배울 수 있습니다. 샌프란시스코 Stephanie Rewis는 엔터프라이즈 규모의 '생활 디자인 시스템'을위한 현대적인 CSS 프레임 워크를 건축하고 건축 할 수있는 방법을 설명합니다.

이 기사는 원래 Net Magazine Issue 285에서 출판되었습니다. 여기 그것을 구입하십시오

프랙탈로 디자인 시스템을 문서화하십시오

프랙탈을 입력하십시오

그것을 회전 시키십시오

구성 요소 추가

구성 요소 변형

데이터 변형

다른 자산 취급

다음 단계

어떻게 - 가장 인기있는 기사

MAYA에서 블렌드 모양 생성을 단순화하는 방법

예술에서 대조의 힘을 끌어 들이기

Adobe XD를 사용하여 마이크로 상호 작용을 생성

음성 제어 UI

만화 클래식 다시 만들기

친 화성 디자이너 : 수출 인물 사용법

3 단계에서 그림을 그리는 이사회 준비

창조적 인 어셈블리가있는 게임 캐릭터 수준 업

카테고리