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
840
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.6k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
5.1k
なぜ今必要？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
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
140
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
610
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
220
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.3k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
760
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
2
320
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
770
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
240
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
880
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
350
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.4k

Featured

See All Featured
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
530
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
200
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
280
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
170
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
120
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
540

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