Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Other Decks in Design

See All in Design
NAHO SHIMONO_Portfolio2025
Avatar for Naho nahohphp
0
830
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
ポートフォリオ_藤田歩希(ほまれ)
Avatar for Aki Fujita akifujita_homarecreate
0
590
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
590
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
2.8k
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.3k
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
220
Echoes Boomerang
Avatar for Cloud Yu artcloudyu
PRO
0
240
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
250
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
500
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.6k

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
210
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k

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