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
430

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
64

Other Decks in Design

See All in Design
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
280
「デザイン」を信じるには
Avatar for なつ iflection
0
280
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
240
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.5k
ポートフォリオ_藤田歩希(ほまれ)
Avatar for Aki Fujita akifujita_homarecreate
0
600
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
120
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
120
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.7k
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
240
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.1k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
290
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
860k

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k

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