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

エンジニアのためのFigma

Avatar for shintaro shintaro
April 20, 2022
59
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
0
The Simple React Blueprint
Avatar for shintaro shin_k_2281
0
16
Role of frontend engineer at product growth team
Avatar for shintaro shin_k_2281
0
770
デザインエンジニアへの道
Avatar for shintaro shin_k_2281
0
75
UIデザインとフロントエンド実装のレビュープラクティス集
Avatar for shintaro shin_k_2281
0
330
The Development Productivity Storybook Provides
Avatar for shintaro shin_k_2281
0
5
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
80

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
0
190
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
260
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.6k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
440
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
310
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
97
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k

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/