Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Hiroki Tani Hiroki Tani
June 29, 2025
Design
930
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.9k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
5.9k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.6k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
1
140

Other Decks in Design

See All in Design
言幹と言葉（Stems & Leaves）
Avatar for 加来幸樹 SIGNCOSIGN kakukoki
0
240
The decksh tutorial
Avatar for Anthony Starks ajstarks
1
100
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
210
コールセンターのオペレーターに6時間だけなってみた
Avatar for Hiroki Hosaka h0sa
0
100
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
520
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
470
デザイナーがいない部署にハーネスを設計する
Avatar for 太田賢一 kenichiota0711
5
5.3k
PLATEAUで白い街を作る
Avatar for aikautau aikautau
0
210
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
Avatar for Sayaka Kubouchi sayadesign2
0
770
【2026】ポートフォリオ_大坪明日香
Avatar for tsubo52 tsubo52
0
130
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
4.3k
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
430

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
520
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
520
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
710
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
560
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
550
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k

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