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
890
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.4k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.6k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
1
120

Other Decks in Design

See All in Design
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
620
hicard_credential_202601
Avatar for hicard hicard
0
260
Signull 団体説明資料
Avatar for Signull signull
0
720
where_imagination_ends_ai_begins.pdf
Avatar for R-524 r5ni4
0
240
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
760
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3.2k
Frontier
Avatar for Renny Wang rwang05
0
180
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.4k
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.4k
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
710
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.2k

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
380
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
410
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.5k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
410
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.7k

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