설계부터 코드까지
Figma에서 설계
Dell 설계자는 Figma와 협력하고 있으며 개발자와 손쉽게 협업할 수 있도록 설계된 네트워킹 기반 도구입니다.잠시 후에 우리는 그것을 어떻게 실제적으로 이용하는지 보여줄 것이지만, 지금은 우리가 프로젝트를 어떻게 구축하는지 보여 준다.
일반적으로 우리는 Figma에서 다섯 개의 이른바 '페이지' 를 만든다.
설계 토큰
디자인 ID는 색상, 레이아웃, 크기 및 효과 변수 집합으로, 제품 전체에 걸쳐 일관되고 간단한 디자인 언어를 작성하는 데 사용됩니다.
Design Tokens 페이지에서 우리는 네 가지 다른 예술판을 만들었는데 그것이 바로 색깔, 레이아웃, 간격과 기타이다.
색상은 레이아웃 색상 또는 장식 색상을 포함할 수 있습니다.어떤 색깔이 어떤 일에만 쓰일 수 있도록 이 두 가지 색깔을 분리하는 것은 우리에게 매우 중요하다.예를 들어 옅은 회색은 배경이나 윤곽에 적용될 수 있지만 조판에 적용되지 않는다. 왜냐하면 대비도가 실패할 수 있기 때문이다. 특히 시력이 손상된 사용자에게는 그렇다.
간격은 픽셀 기반 간격 값 목록을 포함합니다. (잠시 후 CSS에서rem로 변환됩니다.) 보통 4부터 8-10을 초과하지 않습니다.
레이아웃에는 제목, 복사본, 강조 표시된 텍스트, 링크 등 다양한 유형의 텍스트 스타일이 나열됩니다.
다른 한편, 우리는 높이, 경계, 반경, 정지 효과, 중첩에 필요한 일부 효과 스타일의 값을 정의합니다.
요소, 모드, 템플릿 구성 요소 및 템플릿
페이지 요소, 모드, 템플릿 구성 요소 및 템플릿은 실제 디자인이 있는 위치입니다.
원소에 있어서, 우리는 어느 곳에서든 다시 사용할 수 있는 작은 구성 요소가 있다.일반적으로 버튼, 아이콘, 양식 요소, 이미지 등의 구성 요소입니다.
패턴은 원소의 조합이지만, 그뿐만이 아니다.그것들은 이미지 라이브러리, 풍부한 텍스트, 슬라이드 쇼 등 상당히 복잡한 구성 요소이다.CMS의 편집은 나중에 이 구성 요소를 선택하여 사이트의 내용을 구성할 수 있습니다. 예를 들어 Drupal의 레이아웃 생성기를 사용합니다.
템플릿 구성 요소는 템플릿의 단일 부분입니다. 눈썹, 꼬리, 내비게이션, 검색 결과, 사이드바 등입니다.이 요소들은 편집기에서 선택할 수 없고 템플릿의 고정 부분입니다.
템플릿은 모든 내용을 한데 결합시킨다. 템플릿 구성 요소와 모델을 연결하고 홈 페이지, 제품 페이지, 검색 결과 등 완전한 페이지를 표시한다.
Figma API를 통해 설계 토큰 가져오기
Figma에서 페이지, 예술판 및 태그를 명명할 때 일정한 구조와 명명 약정을 따르는 것이 매우 중요하다.이렇게 하면 통신과 재사용이 용이할 뿐만 아니라 Figma API를 사용하여 설계 태그와 구성 요소를 프로젝트에 직접 가져올 수 있습니다.
우리의 전방 창고는 모든 새로운 프로젝트의 일부분으로 작은 스크립트를 포함하여 우리가 이 점을 완전히 할 수 있도록 한다.이 파일은 Figma API를 사용하여 Figma 파일에 연결하여 설계에 필요한 모든 정보를 포함하는 JSON 응답을 받은 다음 생성됩니다.
요소, 모드, 템플릿 구성 요소 및 템플릿의 경우 스크립트는 동일한 계층 구조에서 빈 구성 요소를 생성합니다.Figma 파일(예:)이 Elements artboard에 버튼 구성 요소를 포함하는 경우
elements
└── button
├── button.css
├── button.twig
├── mocks.yaml
└── schema.yaml
버튼을 누르다.css와 단추입니다.twig (twig는 우리가 선택한 템플릿 언어) 는 실제 구성 요소 Mock의 일부분입니다.yaml과 모드.yaml은 백엔드 개발자와의 협업과 우리의 구성 요소 라이브러리에 매우 중요합니다.
궁성 개발
Pattern Lab을 사용한 지 여러 해가 지난 후, Pattern Lab은 점점 더 구성 요소 라이브러리로서의 우리의 요구에 부합되지 않는다.이것은 검증되고 잘 작동하는 도구였지만, 우리로 하여금 너무 무겁고 느리게 느끼기 시작했다.우리도 점점 더 많은 수요가 있다. 우리의 부품 라이브러리는 이런 수요를 만족시켜야 하는데 모델 실험실은 이 점을 해낼 수 없다.많은 다른 도구를 평가한 후에 나는 우리가 필요로 하는 모든 것을 제공할 수 있는 도구를 찾지 못했다. 마지막으로 나는 스스로 도구를 만들어서 이 목적을 달성했다.그것은 miyagi라고 불린다.
궁성은 노드 모듈로express 서버를 사용하여 기본적으로 모든 프로젝트 구조에 적합합니다.폴더와 구성 요소를 원하는 깊이에 끼워 넣고, 프로젝트에 필요한 구성 파일만 사용할 수 있는 자바스크립트 템플릿 언어를 사용할 수 있습니다. (실제로는 구성 파일이 없는 상황에서도 작업을 할 수 있습니다. 템플릿 언어를 추측해 볼 수 있지만, 폴더와 구성 요소의 특정한 명칭을 따라야 합니다.)이것은 우리가 서로 다른 유형의 프로젝트에서 그것을 사용할 수 있도록 하며, 동시에 프로젝트 구조가 우리의 구성 요소 라이브러리와 완전히 독립되도록 유지한다.만약 우리가 다른 프로필을 사용하려고 한다면, 우리가 해야 할 일은 프로필을 삭제하는 것이다.
설계 토큰
궁성 실례의 시작 페이지를 열 때, 궁성은 우리의 CSS 파일을 분석하고, 특정한 이름을 가진 사용자 정의 속성을 찾을 수 있으며, (우리의 태그 가져오기 때문에, 우리는 상자를 열면 사용할 수 있습니다.) 프로젝트의 모든 디자인 태그에 대한 좋은 설명을 만들 수 있습니다.
고객 주제
궁성도 우리 고객의 CI에서 스타일을 설정할 수 있습니다. 글씨체, 색깔, 로고는 기본적으로 모든 CSS를 추가하여 고객들이 이것이 그들의 구성 요소 라이브러리라고 느끼게 할 수 있습니다.
모드 파일
모드 파일은 JSON schema개의 파일입니다.우리는 백엔드 서비스가 제공하는 데이터가 실제적으로 이 구성 요소에 적합한지 확인하기 위해 구성 요소의 특정한 데이터 구조를 협의하기 위해 그것들을 사용합니다.그러나 우리 디자이너들이 주어진 텍스트의 길이가 200글자를 넘으면 안 된다는 등 몇 가지 제한을 제기하도록 허용한다.
이러한 패턴 파일은 구성 요소 라이브러리에 독립되어 있지만 궁성은 여전히 그것들을 사용하여 아날로그 데이터를 검증한다. 만약 구성 요소의 주어진 아날로그 데이터가 주어진 JSON 모드에 적합하지 않으면 오류가 발생할 것이다.
아날로그 파일
구성 요소 라이브러리의 한 부분은 일반적으로 구성 요소의 봉인과 독립 개발을 허용한다.이는 백엔드 개발자가 백엔드 서비스를 기다리지 않아도 구성 요소를 구축할 수 있고 백엔드 서비스는 그들에게 데이터나 환경을 제공하여 이 구성 요소를 나타낼 수 있다는 것을 의미한다.
궁성에서 이를 위해 우리는 아날로그 파일을 만들어 구성 요소에 가상 데이터를 제공할 수 있다.yaml이나 json을 사용하면 정적일 수도 있지만 JavaScript 파일을 사용할 수도 있습니다. 예를 들어, 이것은 일부 API에서 온 데이터를 비동기적으로 내보낼 수도 있습니다.이렇게 하면, 우리는 구성 요소에 전달된 데이터가 어떻게 보이든지 간에 구성 요소가 시종일관 작동할 수 있도록 여러 가지 다른 변체를 가지고 있을 수 있다.
이 시뮬레이션 파일을 바탕으로 궁성은 모든 변체에 단독 보기를 생성합니다.우리도 이러한 보기를 시각 회귀 테스트에 사용할 것이다.
우리의 구성 요소 라이브러리를 사용하여 시각 회귀를 테스트합니다
우리가 의외로 시각 회귀를 만들지 않도록 하기 위해서, 우리는 BackstopJS 을 사용하여 우리의 구성 요소 (모든 요소, 패턴, 템플릿 구성 요소와 템플릿 포함) 를 테스트하여 이를 실현한다.
우리git 메모리 라이브러리에pull 요청을 만들 때우리는 먼저 구성 요소 라이브러리의 정적 구축을 만들고 (잠시 후에 하나의 전용 실례에 배치할 것이다. 그러면 모든 사람이 디자이너, 개발자, 프로젝트 매니저, 클라이언트 등)에 접근할 수 있다. 그리고 이러한 정적 구축 파일을 사용하여 이전의 구축 파일(git 저장소에 서명)과 비교할 수 있다.
이것은 우리가 구성 요소 라이브러리와 시각화 회귀 테스트 사이에 직접적인 결합이 있고 특정한 제3자 서비스에 의존하지 않는다는 것을 의미한다. 정지 시간도 없고 서버를 떠나는 것도 없다.
프런트엔드 초보자 키트로 프로젝트 시작
마지막으로 가장 중요하지 않은 것은 우리가 일을 더욱 쉽고 일치하게 하여 더욱 좋고 안정적으로 만들려고 하는 것이다.
웹 사이트는 일반적으로 동일하거나 적어도 매우 비슷한 구성 요소로 구성되어 있기 때문에, 우리는 상술한 모든 구성 요소로 구성된 전방 초보자 도구 패키지를 내놓았다.
이 전방 초보자 패키지는 여러 종류의 프로젝트에 적용됩니다. 구성 요소를 노드 모듈로 발표하기 때문에, Vue 프로젝트에서도 사용할 수 있습니다.
전반적으로 말하자면, 이것은 우리의 모든 항목이 표준화되고, 충분한 검증을 거쳤으며, 일치하는 기초를 가지게 하고, 모든 항목에 포함된 '어리석은' 업무를 피하며, 우리로 하여금 나머지 업무에 전념하게 한다.
Reference
이 문제에 관하여(설계부터 코드까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/factorial-io/from-design-to-code-4f72텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
