Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアのためのFigma
Search
shintaro
April 20, 2022
0
33
エンジニアのためのFigma
Figmaでデザインしないけど触ることが多い方に向けた操作の高速化Tipsをお届けします。
shintaro
April 20, 2022
Tweet
Share
More Decks by shintaro
See All by shintaro
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
170
知った気になれるUX心理学用語
shin_k_2281
0
44
OOUIを知る
shin_k_2281
2
53
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Visualization
eitanlees
137
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Statistics for Hackers
jakevdp
790
220k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Rails Girls Zürich Keynote
gr2m
91
13k
Transcript
Figma Operation for Engineers エンジニアのためのFigma操作
Desktop版を使おう デザインしない人でもWEB版より捗る 画面が広くな` デザインの読み込みが早い(気がするs プロジェクト切り替えがタブ操作でG メインコンポーネントへの移動がスムー6
デザインファイルの構造が把握しやすい こちらから https://www.figma.com/downloads/
最初に覚えるショートカット ショートカットを表示するショートカット Ctrl ? + + Shift
非表示系テクニック ルーラーの非表示 コメントの非表示 ⌘ \ + Shift R + 全部非表示にする
Shift C +
両脇のタブ切り替え Layers / Assetsの切り替え Design / Prototype / Inspect の切り替え
2 or Opt 1 + 9 0 or or Opt 8 +
オブジェクトのpngをコピー ばり便利(ちょっと時間がかかる) ⌘ C + + Shift
オブジェクトの遷移 次のフレームに移動 前のフレームに移動 N Shift N +
オブジェクトを直接選択 直接構造の深いところのオブジェクトを選択したいとき ⌘ Click +
アウトラインモード デザインの骨格を見ることができる ⌘ Y +
色コードの確認 HEX color codeがわかる + 色コードの確認 HEX color codeがわかる Ctrl
C +
marginの調査 オブジェクト間の余白を見る を押しながら他オブジェクトhover Opt
体型的に学ぶなら Frame, Component, Group, AutoLayout, Contraint Variants, Prototype, PenTool, ColorStyles,
Grid... https://www.udemy.com/course/figma-app-design/