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
880
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.3k
なぜ今必要？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
第18回サイゼミ
Avatar for LW lw
1
4k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
1
1.4k
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
740
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
1k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
29k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
270
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
2k
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.4k
Design dependencies
Avatar for Teba_eleven teba_eleven
0
130
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1.3k
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
140

Featured

See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
210
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
210
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k

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