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
41
エンジニアのためのFigma
Figmaでデザインしないけど触ることが多い方に向けた操作の高速化Tipsをお届けします。
shintaro
April 20, 2022
Tweet
Share
More Decks by shintaro
See All by shintaro
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
140
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
240
知った気になれるUX心理学用語
shin_k_2281
0
75
OOUIを知る
shin_k_2281
2
59
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Practical Orchestrator
shlominoach
186
10k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Docker and Python
trallard
44
3.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Side Projects
sachag
452
42k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building Adaptive Systems
keathley
40
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Documentation Writing (for coders)
carmenintech
67
4.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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/