디자인 자동화의 일을 하고 있는 가운데 Sketch에 대해 몰랐기 때문에 모았습니다.
디자인에 자세하지는 않지만 PhotoShop은 WEB에 편리하고 Sketch는 모바일 앱에 편리하다는 의견이 있습니다.

React Sketch.app

React.js에서 Sketch 파일을 출력하는 도구.
Airbnb는 디자인 시스템의 일관성으로 사용하고 있습니까?
코드 쓰고 스케치에 떨어뜨려 저장하고 있는 것 같다.

코드와 설정 파일을 쓰고 → Sketch 파일로 변환.



샘플들
ht tp // // rb b. 이오/레아 ct-s t 짱 p/도 cs/에아 mpぇs. HTML

환경 구축

Sketch는 mac만 사용할 수 있다.

Sketch를 입수 [Try Free]에서 1개월 사용할 수 있는 것 같다
htps //w w. s 케 짱 p. 코m/

.app 파일은 application 폴더 이하로 떨어뜨린다.

스케치의 빈 프로젝트를 열어 둡니다.
New Document 누르세요



npm의 버전과 Sketch의 버전이 맞지 않고 죽는 것도 상정된다고 한다.
우선은 basic-setup를 움직인다.

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

컴퓨터 슈슈를 말해
스케치 화면이 반영되면 OK

프로필 카드

cd profile-cards
npm install
npm run render

//#timeline-airtable

참고

기타 일본어 자료

React Sketch.app에서 코드에서 디자인 파일 만들기
htps : // v.ぁsss d. jp / ゔ ぃ す ぃ ㅇ
react-sketchapp를 사용한 개발 워크플로
htps : // ぺr 소 lpt. 기주 b. 이오 / 포 sts / 레아 cts t t p /