Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニアのためのFigma

Avatar for shintaro shintaro
April 20, 2022
60
0

 エンジニアのためのFigma

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

Avatar for shintaro

shintaro

April 20, 2022

More Decks by shintaro

See All by shintaro
Agentic Engineering Blueprint
Avatar for shintaro shin_k_2281
0
7
The Simple React Blueprint
Avatar for shintaro shin_k_2281
0
23
Role of frontend engineer at product growth team
Avatar for shintaro shin_k_2281
0
810
デザインエンジニアへの道
Avatar for shintaro shin_k_2281
0
81
UIデザインとフロントエンド実装のレビュープラクティス集
Avatar for shintaro shin_k_2281
0
340
The Development Productivity Storybook Provides
Avatar for shintaro shin_k_2281
0
6
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
Avatar for shintaro shin_k_2281
2
330
知った気になれるUX心理学用語
Avatar for shintaro shin_k_2281
0
140
OOUIを知る
Avatar for shintaro shin_k_2281
2
81

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
210
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
380
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
550
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
160
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
190
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
340
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k

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/