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
650

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.8k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.2k
You Don’t Know Figma Yet
Avatar for Hiroki Tani hilokifigma
0
76

Other Decks in Design

See All in Design
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
Avatar for マズロー安達 maslow_akkun
0
280
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
220
株式会社Muture_ソーシャル推進事業
Avatar for Muture muture
PRO
0
140
What makes a great Director?
Avatar for _Limex_ _limex_
0
180
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
290
デザイナーのAI活用とチームへの浸透戦略
Avatar for Kaori Ueda ukaoli
0
110
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
480
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
150
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
Avatar for Marie BENOIT marietournelle35
0
120
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
770
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
240
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.5k

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
284
13k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
790
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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