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
130
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
230
知った気になれるUX心理学用語
shin_k_2281
0
74
OOUIを知る
shin_k_2281
2
58
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing for humans not robots
tammielis
250
25k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Visualization
eitanlees
146
15k
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/