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
1
820

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

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025
Tweet

More Decks by Hiroki Tani

See All by Hiroki Tani
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
4
1.5k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
4.9k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.5k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
1
110

Other Decks in Design

See All in Design
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.1k
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.1k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
610
kintone Style Book
Avatar for kintone kintone
6
12k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
360
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.1k
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
980
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
930
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
260
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
2
900
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
920

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
5.6k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
130
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
770

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