$30 off During Our Annual Pro Sale. View Details »

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

Avatar for Hiroki Tani Hiroki Tani
June 29, 2025
Design
0
750

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

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025
Tweet

More Decks by Hiroki Tani

See All by Hiroki Tani
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
4.4k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.3k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
0
91

Other Decks in Design

See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
340
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
3.3k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
120
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
140
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
380
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
240
Liquid GlassとApp Intents
Avatar for touyou touyou
0
520
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
170
kintone Style Book
Avatar for kintone kintone
5
6.9k
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
2.3k

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
980
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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