エンジニアのためのFigma

Figmaでデザインしないけど触ることが多い方に向けた操作の高速化Tipsをお届けします。

Transcript

1. Figma Operation for Engineers エンジニアのためのFigma操作
2. Desktop版を使おう デザインしない人でもWEB版より捗る ” 画面が広くな` ” デザインの読み込みが早い（気がするs ” プロジェクト切り替えがタブ操作でG ” メインコンポーネントへの移動がスムー6 ” デザインファイルの構造が把握しやすい こちらから
 https://www.figma.com/downloads/
3. 最初に覚えるショートカット ショートカットを表示するショートカット Ctrl ? ＋ ＋ Shift
4. 非表示系テクニック ルーラーの非表示 コメントの非表示 ⌘ \ ＋ Shift R ＋ 全部非表示にする Shift C ＋
5. 両脇のタブ切り替え Layers / Assetsの切り替え Design / Prototype / Inspect の切り替え 2 or Opt 1 ＋ 9 0 or or Opt 8 ＋
6. オブジェクトのpngをコピー ばり便利(ちょっと時間がかかる) ⌘ C ＋ ＋ Shift
7. オブジェクトの遷移 次のフレームに移動 前のフレームに移動 N Shift N ＋
8. オブジェクトを直接選択 直接構造の深いところのオブジェクトを選択したいとき ⌘ Click ＋
9. アウトラインモード デザインの骨格を見ることができる ⌘ Y ＋
10. 色コードの確認 HEX color codeがわかる ＋ 色コードの確認 HEX color codeがわかる Ctrl C ＋
11. marginの調査 オブジェクト間の余白を見る を押しながら他オブジェクトhover Opt
12. 体型的に学ぶなら Frame, Component, Group, AutoLayout, Contraint
 Variants, Prototype, PenTool, ColorStyles, Grid... https://www.udemy.com/course/figma-app-design/