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
510

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

Other Decks in Design

See All in Design
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
290
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
190
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
1k
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
260
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
2.3k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
250
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.8k
ビジネス成果を最大限に発揮するPORTFOLIO
Avatar for 新井拓海 ataxi1003
0
200
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3k
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
390
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
310
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
310

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
340
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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