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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Hiroki Tani Hiroki Tani
June 29, 2025
Design
900
1

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

Avatar for Hiroki Tani

Hiroki Tani

June 29, 2025

More Decks by Hiroki Tani

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

Other Decks in Design

See All in Design
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.7k
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
280
Design dependencies
Avatar for Teba_eleven teba_eleven
0
150
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
1.8k
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.6k
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
260
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
7
5.4k
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
370
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
360
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
340
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
200
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
4
3.3k

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
270
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
410
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
370
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
119
120k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k

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