Sketchのすゝめ

Transcript

1. Sketch のすヽめ Sketch のすヽめ 2020.1.30 TR: Yu Nagamine
2. Sketch って便利！ Sketch って便利！
3. What's Sketch? What's Sketch? Mac ⽤のグラフィックデザインツール Web やアプリのUI デザインによく使われる ベクター画像
4. エンジニアあるある エンジニアあるある 画⾯のモックを作る 画⾯遷移図を作る プロトタイプを作って関係者に⾒せたい etc
5. できます。 できます。 しかも簡単 & はやい しかも簡単 & はやい
6. Case#1 モック Case#1 モック
8. UI Kit UI Kit 各デバイス向けのUI パーツ集が⽤意されている ↓ コピペするだけで画⾯（ほぼ）完成
9. Android Android （公式） https://material.io/resources/
10. iOS iOS （公式） https://developer.apple.com/design/resources/
11. Element(CSS Framework) Element(CSS Framework) （公式） https://github.com/ElementUI/Resources
12. Symbol Symbol UI を再利⽤できる
14. Case#2 プロトタイプ Case#2 プロトタイプ
16. できること できること 要素を押して画⾯遷移 画⾯遷移のトランジション . できないこと できないこと 複雑なアニメーション UI からデータを⼊⼒する（フォームなど）
17. Sketch Mirror （アプリ）を使って スマホでも確認できる
18. Case#3 画⾯遷移図 Case#3 画⾯遷移図
19. こんな感じの画⾯遷移図が作れる
20. プラグインを⼊れよう プラグインを⼊れよう 『User Flows 』というプラグインが必要 インストールには ”Sketchpacks” が便利 https://sketchpacks.com/
21. 料⾦ 料⾦ 99$ 99$ 1 年のアップデート 1 年のSketch Cloud 利⽤ アップデート受けなければ、99$ 買い切りでずっと 使える 無料期間あり（ 30 ⽇間）
22. まとめ まとめ Sketch を使えば、 モック、プロトタイプなどが簡単にできる！
23. 個⼈的おすすめプラグイン 個⼈的おすすめプラグイン
24. 1. Runner 1. Runner コマンドで処理を実⾏できるプラグイン よく使う処理はキーボードのみで実⾏できるので、 早い& 楽
25. 2. Butter 2. Butter めんどくさい余⽩の調整や整列が⼀瞬で
26. 3. Find and Replace Text 3. Find and Replace Text ⽂字列を検索・置換してくれる スコープも指定可能
27. 4. 4. Anima Toolkit Anima Toolkit ⾊々機能があると思うが、padding を固定してくれ る機能をよく使う ボタンのテキストの⻑さに合わせて⾃動で伸縮する ボタンが作れる。楽。