스케치에 React 구성 요소 렌더링

블로그

스케치에 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