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
870
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.7k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
5.2k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.5k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
1
120

Other Decks in Design

See All in Design
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
230
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.2k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.4k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
870
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.3k
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
2
2.1k
第18回サイゼミ
Avatar for LW lw
1
3.9k
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
400
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
260
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
230

Featured

See All Featured
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
560
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
130
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
320
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k

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