デザイン自動化のお仕事をしてる中でSketchについて知らなかったので纏めました。
デザインに詳しくないですが、PhotoShopはWEBに便利で、Sketchはモバイルアプリに便利だという意見あり。
React Sketch.app
React.jsからSketchファイル出力するツール。
Airbnbではデザインシステムの一貫で使ってる？
コード書いてスケッチに落として保存してるそうな。
コードと設定ファイルを書いて → Sketchファイルに変換。
サンプルたち
http://airbnb.io/react-sketchapp/docs/examples.html
環境構築
Sketchはmacしか使えない。
Sketchを入手 [Try Free]で１ヶ月使えるみたい
https://www.sketchapp.com/
.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
Profile Cards
cd profile-cards
npm install
npm run render
//#timeline-airtable
参考
その他日本語資料
React Sketch.app でコードからデザインファイルを作ってみる
https://dev.classmethod.jp/visual-design/react-sketch-app/
react-sketchappを使った開発ワークフロー
https://persol-pt.github.io/posts/react-sketchapp/