Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「shadcn/ui × 自社デザインシステム」実践ガイド──FigmaトークンからTailw...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
seriseri
January 25, 2026
Programming
0
12
「shadcn/ui × 自社デザインシステム」実践ガイド──FigmaトークンからTailwindまでの連携術
seriseri
January 25, 2026
Tweet
Share
More Decks by seriseri
See All by seriseri
AIに設計を書かせるだけで「理解負債」と「実装漏れ」が激減した話【フロントエンド編】
seriseri
1
100
フロントエンド開発にAIを“仕組みで”組み込む方法
seriseri
0
24
Other Decks in Programming
See All in Programming
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
150
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
arkw
0
170
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
710
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
130
20260320登壇資料
pharct
0
140
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
220
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
tasukuwatanabe
3
430
「速くなった気がする」をデータで疑う
senleaf24
0
110
PHP 7.4でもOpenTelemetryゼロコード計装がしたい! / PHPerKaigi 2026
arthur1
1
440
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
shinyorke
PRO
0
370
RailsのValidatesをSwift Macrosで再現してみた
hokuron
0
140
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
nnaka2992
1
350
Featured
See All Featured
Exploring anti-patterns in Rails
aemeredith
2
300
Building AI with AI
inesmontani
PRO
1
830
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
120
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.2k
For a Future-Friendly Web
brad_frost
183
10k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
400
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.2k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
420
Java REST API Framework Comparison - PWX 2021
mraible
34
9.2k
Transcript
ʮshadcn/ui × ࣗࣾσβΠϯγεςϜʯ࣮ફΨ Πυ──FigmaτʔΫϯ͔ΒTailwind·Ͱͷ࿈ ܞज़ 2025.10.16 X @seriseri_55
PeopleX AI໘ ީิऀମݧΛॏࢹͨ͠ɺରܕAI໘αʔϏεɻ 3
ຊ ⽇ ͓͑͢Δ͜ͱ 1 ࠔ͍ͬͯͨ͜ͱ 2 shadcn/uiʹ͍ͭͯ 3 4 σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ
@2025 PeopleX Inc. ! ։ൃʹ͓͚Δv0ͷ׆༻๏
01ࠔ͍ͬͯͨ͜ͱ @2025 PeopleX Inc. 2
ࠔ͍ͬͯͨ͜ͱ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ •
σβΠϯτʔΫϯͷө͕खؒ
01shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 2
• σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷө͕खؒ ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3
ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ shadcn/ui Λ࠾༻͢Δ͜ͱͰղܾ
shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • Radix UI + Tailwind
CSS • ελΠϧͱϩδοΫΛͰ͖Δ • npmύοέʔδͰͳ͘ɺίʔυΛ औΓࠐΉ • ࣗ༝ͳΧελϚΠζ͕؆୯ • σϑΝΫτʹͳΓͭͭ͋Δ https://ui.shadcn.com/docs/components/button
shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • Material-UI Ant Design
◦ ελΠϧͷoverride 😱
shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • ελΠϧΛ͋ͯΕΔ • ಁ໌ੑ
• σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷө͕खؒ ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3
ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ shadcn/ui Λ࠾༻͢Δ͜ͱͰղܾ
02։ൃʹ͓͚Δv0ͷ׆༻ʹ͍ͭͯ @2025 PeopleX Inc. 2
։ൃʹ͓͚Δv0ͷ׆༻ʹ͍ͭͯ @2025 PeopleX Inc. 3 • ͦͦͳͥv0ʁ ◦ shadcn/ui ४ڌͷUI͕ੜ͞ΕΔײ֮
◦ shadcn/ui ͷϝΠϯίϛολʔ͕vercelʹ ͍Δ • ༷ܾΊ→σβΠϯɹͷஈ֊Ͱ༻ • ϓϩμΫγϣϯͷUIʹରͯ͠͏͜ͱͳ ͍ • https://v0.app/chat/step-VP0RH7qPe0h
03σβΠϯτʔΫϯˠίʔυͷ ྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 2
ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ •
σβΠϯτʔΫϯͷө͕खؒ
@2025 PeopleX Inc. 3 ݁Ռɺ30ඵͰσβΠϯΛөͰ͖ΔΑ͏ʹͳͬͨ σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 1. FigmaͷτʔΫϯΛJSONܗࣜͰΤΫ εϙʔτ 2. Style
DictionaryͰɺTailwindͰѻ͍ ͍͢ܗࣜʹม 3. Tailwind ConfigʹऔΓࠐΉ Tailwind v4͔ΒConfigϑΝΠϧΛܦ༝͠ͳͯ͘Α͘ͳͬ ͨɻ ͚Ͳɺɺɺࢼͨ͠ͱ͜Ζ͋·Γײతʹײ͡ͳ͔ͬͨͷ ͰɺTailwind ConfigΛհͨ͠ํ๏Λ͝հ͠·͢ɻ (v4ͰconfigΛܦ༝͢Δ͜ͱՄೳ)
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 Figma 1. FigmaͷτʔΫϯΛJSONܗࣜͰΤΫ εϙʔτ 2.
Style DictionaryͰɺTailwindͰѻ͍ ͍͢ܗࣜʹม 3. Tailwind ConfigʹऔΓࠐΉ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 tailwind.config.js • tailwindͷΧελϜΫϥεΛఆٛͰ͖ Δ ◦
bg-primary, bg-secondary, bg- contents ◦ text-primary, text-secondary, text-attention, text-disabled rgbܗࣜʹม global.css
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 Semantic.Mode 1.tokens.json Primitive Mode 1.tokens.json
references.json style-dictionary Figma͔Βग़ྗ͞ΕͨJSON
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 text-purple-700 text-green-700 text-success text-l-main bg-purple-700
bg-green-700 bg-light bg-dark bg-primary ͳͲͷΫϥε͕ ༻Մೳʹ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 style-dictionary.config.ts ΠϯϓοτͷJSONΛͲ͜ʹஔ͔͘ มͷϓϨηοτ ग़ྗઌͷύε ग़ྗܗࣜ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 package.json npm run build ↓
references.json ͕ੜ͞ΕΔ ੜ͞ΕͨϑΝΠϧ Figma͔Βग़ྗ ͨ͠JSON
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 text-purple-700 text-green-700 text-success text-l-main bg-purple-700
bg-green-700 bg-light bg-dark bg-primary ͳͲͷΫϥε͕ ༻Մೳʹ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 τʔΫϯΛߋ৽͍ͨ͠߹࠶… npm run build ੜ͞ΕͨϑΝΠϧ
Figma͔Βग़ྗ ͨ͠JSON
@2025 PeopleX Inc. 3 30ඵͰσβΠϯΛө σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ
σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 • typographyͳͲͷϢʔςΟϦςΟΫϥεΛఆٛ͢Δ͜ͱՄೳ • https://github.com/seriseri-123/figma-token-to-tailwind Λࢀߟʹͯ͠Έ͍ͯͩ͘͞
• ͪ͜ΒͷzennͷهࣄΛϕʔεʹॻ͖·ͨ͠ ◦ https://zenn.dev/peoplex_blog/articles/8df87dab4776d2