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

エンジニアのためのFigma

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for shintaro shintaro
April 20, 2022
0
58

 エンジニアのためのFigma

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

Avatar for shintaro

shintaro

April 20, 2022
Tweet

More Decks by shintaro

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

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.3k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
320
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
150
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
200
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
850
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k

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/