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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Hiroki Tani Hiroki Tani
June 29, 2025
Design
0
790

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

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025
Tweet

More Decks by Hiroki Tani

See All by Hiroki Tani
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.4k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
4.7k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.4k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
0
99

Other Decks in Design

See All in Design
Diverse Design Team Deck
Avatar for Diverse diverse
0
640
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
800
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
280
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
390
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
260
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
510
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
290
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
350
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
380
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
530
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
97
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
61
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
58
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
690
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k

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