스케치에 React 구성 요소 렌더링
스케치에 React 구성 요소를 렌더링합니다. 맞춤형 디자인 시스템
빠른 시작
먼저 설치했는지 확인하십시오. 스케치 버전 50 이상 및 최근 해발 .
새 스케치 파일을 연 다음 터미널에서:
git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install npm run render 다음, 몇 가지 더 많은 예를 확인하십시오 !
왜?!
Sketch에서 디자인 시스템의 자산을 관리하는 것은 복잡하고 오류가 발생하기 쉬우며 시간이 많이 걸립니다. 스케치는 스크립팅이 가능하지만 API는 종종 변경됩니다. React는 JavaScript 개발자에게 이미 친숙한 방식으로 재사용 가능한 문서를 빌드할 수 있는 완벽한 래퍼를 제공합니다.
코드는 어떻게 생겼나요?
import * as React from 'react'; import { render, Text, Artboard } from 'react-sketchapp'; const App = props => ( {props.message} ); export default context => { render(, context.document.currentPage()); }; 내가 무엇을 할 수 있습니까?
- 디자인 시스템 관리— |_+_| 위해 지어졌다 에어비앤비의 디자인 시스템 ; 이것은 대규모 디자인 시스템에서 Sketch 자산을 관리하는 가장 쉬운 방법입니다.
- 설계에 실제 구성 요소 사용— 코드에서 디자인을 React 구성 요소로 구현하고 Sketch로 렌더링
- 실제 데이터로 설계— 데이터로 디자인하는 것은 중요하지만 도전적입니다. |_+_| 스케치 파일에 실제 데이터를 가져와 통합하는 것을 간단하게 만듭니다.
- Sketch를 기반으로 새로운 도구 구축— Sketch를 사용자 정의 디자인 도구를 위한 캔버스로 사용하는 가장 쉬운 방법
새로운 용도를 찾았습니까? 우리는 그것에 대해 듣고 싶습니다!
선적 서류 비치
다운로드 세부 정보:
작가: 에어비앤비
라이브 데모: http://airbnb.io/react-sketchapp/
깃허브: https://github.com/airbnb/react-sketchapp
#reactjs #자바스크립트 #react #react-js