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

FigmaのFigmaファイルから学ぶTips & Tricks

Avatar for Hiroki Tani Hiroki Tani
June 29, 2025
Design
0
660

FigmaのFigmaファイルから学ぶTips & Tricks

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025
Tweet

More Decks by Hiroki Tani

See All by Hiroki Tani
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.9k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.2k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
0
79

Other Decks in Design

See All in Design
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
530
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
140
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
3.9k
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
250
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
170
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
200
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
580
What makes a great Director?
Avatar for _Limex_ _limex_
0
230
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
Avatar for マズロー安達 maslow_akkun
0
320
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
520
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
180
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.8k

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
630
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
71
19k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k

Transcript

  1. Hiroki Tani Designer Advocate Figmaの Figmaファイルから学ぶ Tips & Tricks

  2. None

  3. figma.com/community

  4. UI3: Figma's UI Kit → FigmaのUIに使われているコンポーネントを 整理したUI Kit

  5. Tips & Tricks - UI3: Figma's UI Kit

  6. Tips & Tricks - UI3: Figma's UI Kit コンポーネント名の先頭に_や.をつ けることで公開ライブラリから除外

    できる

  7. Simple Design System → Figma公式で作成したデザインシステムのサンプル

  8. Simple Design System コンポーネントセット (Variants)のレイアウトの 線や背景の色を変えるこ とができる。変えた背景 色はAssetsパネルなどに も反映される。

  9. github.com/figma/sds

  10. Thank you! UI3: Figma's UI Kit Simple Design System (Figma

    file) Simple Design System (GitHub repo) x.com/hiloki