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
910
1

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

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025

More Decks by Hiroki Tani

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

Other Decks in Design

See All in Design
Design dependencies
Avatar for Teba_eleven teba_eleven
0
160
Warner Bros. Discovery 2025 Box Office Booklet
Avatar for Sam Bird samb1rd
0
120
タイル紹介サイト「タイルだもんで」
Avatar for しま calpin
0
180
AVI 2026 Keynote "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
130
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
380
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
0
430
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
430
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
210
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
390
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.5k
【CEDEC2026】派手さと見やすさは両立できる！『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
Avatar for Cygames, Inc. cygames
PRO
1
1.8k
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
Avatar for kgsi kgsi
1
450

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
460
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
590

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