React Sketch.appについて
デザイン自動化のお仕事をしてる中で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]で1ヶ月使えるみたい
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
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/
Author And Source
この問題について(React Sketch.appについて), 我々は、より多くの情報をここで見つけました https://qiita.com/miyamotok0105/items/5f9ad6623d769c2d0a36著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .