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
520

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
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
770
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.4k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
310
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.2k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
810
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
370
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
190
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
560
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
410
札幌の雪を観光資源に変える：デザインプログラムSESSAの挑戦
Avatar for Ittyanm ittyann
0
270
線で考える画面構成
Avatar for natsuume natsuume
1
890
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.2k

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k

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