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
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
340
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
260
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
Avatar for Marie BENOIT marietournelle35
0
120
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2k
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
0
130
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
910
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
310
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.5k
#Dubois Challenge 2025: Economics
Avatar for Anthony Starks ajstarks
1
160
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.2k
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.4k

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
900
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k

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