「shadcn/ui × 自社デザインシステム」実践ガイド──FigmaトークンからTailwindまでの連携術

Transcript

1. ʮshadcn/ui × ࣗࣾσβΠϯγεςϜʯ࣮ફΨ Πυ──FigmaτʔΫϯ͔ΒTailwind·Ͱͷ࿈ ܞज़ 2025.10.16 X @seriseri_55
2. PeopleX AI໘઀ ީิऀମݧΛॏࢹͨ͠ɺର࿩ܕAI໘઀׭αʔϏεɻ 3
3. ຊ ⽇ ͓఻͑͢Δ͜ͱ 1 ࠔ͍ͬͯͨ͜ͱ 2 shadcn/uiʹ͍ͭͯ 3 4 σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. ! ։ൃʹ͓͚Δv0ͷ׆༻๏
4. 01ࠔ͍ͬͯͨ͜ͱ @2025 PeopleX Inc. 2
5. ࠔ͍ͬͯͨ͜ͱ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷ൓ө͕खؒ
6. 01shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 2
7. • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷ൓ө͕खؒ ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ shadcn/ui Λ࠾༻͢Δ͜ͱͰղܾ
8. shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • Radix UI + Tailwind CSS • ελΠϧͱϩδοΫΛ෼཭Ͱ͖Δ • npmύοέʔδͰ͸ͳ͘ɺίʔυΛ ௚઀औΓࠐΉ • ࣗ༝ͳΧελϚΠζ͕؆୯ • σϑΝΫτʹͳΓͭͭ͋Δ https://ui.shadcn.com/docs/components/button
9. shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • Material-UI ΍ Ant Design ◦ ελΠϧͷoverride 😱
10. shadcn/uiʹ͍ͭͯ @2025 PeopleX Inc. 3 • ௚઀ελΠϧΛ͋ͯΕΔ • ಁ໌ੑ
11. • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷ൓ө͕खؒ ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ shadcn/ui Λ࠾༻͢Δ͜ͱͰղܾ
12. 02։ൃʹ͓͚Δv0ͷ׆༻ʹ͍ͭͯ @2025 PeopleX Inc. 2
13. ։ൃʹ͓͚Δv0ͷ׆༻ʹ͍ͭͯ @2025 PeopleX Inc. 3 • ͦ΋ͦ΋ͳͥv0ʁ ◦ shadcn/ui ४ڌͷUI͕ੜ੒͞ΕΔײ֮ ◦ shadcn/ui ͷϝΠϯίϛολʔ͕vercelʹ ͍Δ • ࢓༷ܾΊ→σβΠϯɹͷஈ֊Ͱ࢖༻ • ϓϩμΫγϣϯͷUIʹରͯ͠௚઀࢖͏͜ͱ͸ͳ ͍ • https://v0.app/chat/step-VP0RH7qPe0h
14. 03σβΠϯτʔΫϯˠίʔυͷ ྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 2
15. ݩʑԿʹࠔ͍͔ͬͯͨ @2025 PeopleX Inc. 3 ݩʑৡΓड͚ͨϓϩδΣΫτʴٸϐονͰͷ։ൃ • σβΠϯγεςϜͷߏஙʹ͕͔࣌ؒ ͔Δ • σβΠϯτʔΫϯͷ൓ө͕खؒ
16. @2025 PeopleX Inc. 3 ݁Ռɺ30ඵͰσβΠϯΛ൓өͰ͖ΔΑ͏ʹͳͬͨ σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ
17. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 1. FigmaͷτʔΫϯΛJSONܗࣜͰΤΫ εϙʔτ 2. Style DictionaryͰɺTailwindͰѻ͍ ΍͍͢ܗࣜʹม׵ 3. Tailwind ConfigʹऔΓࠐΉ Tailwind v4͔ΒConfigϑΝΠϧΛܦ༝͠ͳͯ͘΋Α͘ͳͬ ͨɻ ͚Ͳɺɺɺࢼͨ͠ͱ͜Ζ͋·Γ௚ײతʹײ͡ͳ͔ͬͨͷ ͰɺTailwind ConfigΛ஥հͨ͠ํ๏Λ͝঺հ͠·͢ɻ (v4Ͱ΋configΛܦ༝͢Δ͜ͱ͸Մೳ)
18. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3
19. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 Figma 1. FigmaͷτʔΫϯΛJSONܗࣜͰΤΫ εϙʔτ 2. Style DictionaryͰɺTailwindͰѻ͍ ΍͍͢ܗࣜʹม׵ 3. Tailwind ConfigʹऔΓࠐΉ
20. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @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
21. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 Semantic.Mode 1.tokens.json Primitive Mode 1.tokens.json references.json style-dictionary Figma͔Βग़ྗ͞ΕͨJSON
22. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @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 ͳͲͷΫϥε͕࢖ ༻Մೳʹ
23. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 style-dictionary.config.ts ΠϯϓοτͷJSONΛͲ͜ʹஔ͔͘ ม׵ͷϓϨηοτ ग़ྗઌͷύε ग़ྗܗࣜ
24. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 package.json npm run build ↓ references.json ͕ੜ੒͞ΕΔ ੜ੒͞ΕͨϑΝΠϧ Figma͔Βग़ྗ ͨ͠JSON
25. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @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 ͳͲͷΫϥε͕࢖ ༻Մೳʹ
26. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 τʔΫϯΛߋ৽͍ͨ͠৔߹͸࠶౓… npm run build ੜ੒͞ΕͨϑΝΠϧ Figma͔Βग़ྗ ͨ͠JSON
27. @2025 PeopleX Inc. 3 30ඵͰσβΠϯΛ൓ө σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ
28. σβΠϯτʔΫϯ→ίʔυͷྲྀΕΛ؆ུԽ @2025 PeopleX Inc. 3 • typographyͳͲͷϢʔςΟϦςΟΫϥεΛఆٛ͢Δ͜ͱ΋Մೳ • https://github.com/seriseri-123/figma-token-to-tailwind Λࢀߟʹͯ͠Έ͍ͯͩ͘͞ • ͪ͜ΒͷzennͷهࣄΛϕʔεʹॻ͖·ͨ͠ ◦ https://zenn.dev/peoplex_blog/articles/8df87dab4776d2