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
620

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

Other Decks in Design

See All in Design
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
110
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
290
信念を持つ方法
Avatar for Rikiya Ihara / magi magi1125
0
170
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.1k
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
330
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
160
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.5k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.3k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
220
ポートフォリオ_webデザイナー
Avatar for Nami_designer/corder nami_webdesigner
0
150
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
800
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
830

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
430
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k

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