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
48
エンジニアのためのFigma
Figmaでデザインしないけど触ることが多い方に向けた操作の高速化Tipsをお届けします。
shintaro
April 20, 2022
Tweet
Share
More Decks by shintaro
See All by shintaro
Role of frontend engineer at product growth team
shin_k_2281
0
490
デザインエンジニアへの道
shin_k_2281
0
34
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
200
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
260
知った気になれるUX心理学用語
shin_k_2281
0
100
OOUIを知る
shin_k_2281
2
66
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Applications with DynamoDB
mza
95
6.5k
Designing for Performance
lara
609
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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/