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
850
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.7k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
5.2k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.5k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
1
110

Other Decks in Design

See All in Design
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.7k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
820
Tendências de UX Research 2026
Avatar for Viviane Delvequio videlvequio
0
110
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
840
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
200
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
Avatar for BASE, Inc. base
PRO
0
110
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
700
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
360
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
380
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
300
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
1
630
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
200

Featured

See All Featured
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
290
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
120
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.5k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
400
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
220

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