React Sketch.appについて

2791 ワード
memo memo テキストリンク

デザイン自動化のお仕事をしてる中で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/