Figmaを使ったマルチプラットフォームサービスのデザイン管理

2023年6月2日のDIST.39 「みんなのFigma」で発表した資料です。
Figmaを使ったマルチプラットフォームサービスのライブラリ構築について発表しました。

ライブラリ構築にあたっては以下を参考とさせていただきました。
- Figmaのリファクタリングからはじめるデザインシステムの構築
- gestalt.pinterest.systems - Design tokens
- Material Design - Color system

Transcript

1. 'JHNBΛ࢖ͬͨ 
 Ϛϧνϓϥ ο τ ϑΥʔϜαʔϏεͷσβΠ ϯ؅ཧ גࣜձࣾͭΈ͖ɹླ໦৻ޗ DIST.39 - 2023.06.02
2. ࣗݾ঺հ 2 ླ໦
   ৻ޗ גࣜձࣾͭΈ͖
   ϦʔυσβΠφʔ
3. 'JMNBSLTʹ͍ͭͯ 3 ࠃ಺࠷େڃͷ 
 өըɺ υϥϚɺ ΞχϝͷϨϏϡʔαʔϏε
4. 'JMNBSLTʹ͍ͭͯ 4 ϞόΠϧΞϓϦ ͱ8FCͰαʔϏεఏڙ J04
   "QQ "OESPJE
   "QQ .PCJMF
   8FC %FTLUPQ
   8FC
5. αʔϏε։͔࢝Β೥
   ஝ੵ͞ΕͨσβΠ ϯෛ࠴ 5
6. ஝ੵ͞ΕͨσβΠ ϯෛ࠴ 6 छྨҎ্ͷάϨʔ
7. ஝ੵ͞ΕͨσβΠ ϯෛ࠴ 7 ࣅͯΔ͚Ͳͪ ΐ ͬ ͱ͚ͩҧ͏6*͕૿৩
8. ஝ੵ͞ΕͨσβΠ ϯෛ࠴ 8 ϓϥ ο τ ϑΥʔϜຖʹଘࡏ͢ΔΞΠ ίϯఆٛʹࠩ෼͕ൃੜ .PCJMF
   8FC %FTLUPQ
   8FC J04
   "QQ
   
   "OESPJE
   "QQ
9. 9 ૉૣ͘ɺ ҆৺ͯ͠࢖͑Δ
   σβΠ ϯϥΠ ϒϥ Ϧ͕ཉ͍͠ σβΠφʔͱΤϯδχΞͷਓͰϓϩδΣΫ τԽ
10. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 10 ࣗ෼ͨͪͷαʔϏεʹదͨ͠ϥΠ ϒϥ Ϧͷߏ଄ͱ͸ʁ J04
    "QQ "OESPJE
    "QQ .PCJMF
    8FC %FTLUPQ
    8FC
11. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 11 ϓϥ ο τ ϑΥʔϜʹΑ Δҧ͍ ΞϓϦ w өըɺυϥϚɺΞχϝϑΝϯ͕ɺ؍ͨ࡞඼ɺ؍͍ͨ࡞඼Λ؅ཧɻ࣍ʹ؍Δ࡞඼Λ୳͢ɻ
    w J04ɺ"OESPJEͷΨΠυϥΠϯΛ౿ऻ
    w ࡞඼ը૾
    ʼ
    ςΩετ৘ใ 8FC w ࡞඼໊ͳͲͰݕࡧྲྀೖ
    w ؾʹͳΔ࡞඼ͷޱίϛɺରԠ͍ͯ͠Δಈը഑৴ɺөըؗΛௐ΂Δ
    w ςΩετ৘ใ
    
    ࡞඼ը૾ 'JMNBSLTͷ৔߹ͷΞϓϦ ͱ8FCͷҧ͍
12. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 12 ϓϥ ο τϑΥʔϜʹґଘ͠ͳ͍ ϓϥ ο τϑΥʔϜʹґଘ͢Δ ϓϥ ο τ ϑΥʔϜͷҧ͍Λ࣠ʹσβΠ ϯཁૉΛ̎ͭʹ෼ྨ Χϥʔ ςΩετ ελΠϧ ίϯϙʔωϯτ ΞΠίϯ ը૾Ξηοτ
13. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 13 ̎֊ݐͯͷσβΠ ϯϥΠ ϒϥ Ϧ ̍ ֊ 
 ϓϥ ο τ ϑ Υ ʔϜʹ 
 ґଘ͠ ͳ͍ ֊ 
 ϓϥ ο τ ϑ Υ ʔϜʹ 
 ґଘ͢Δ ϓϥ ο τ ϑ Υ ʔϜຖͷը໘σβΠ ϯ΍ɺ 
 ࢪࡦຖͷσβΠ ϯʹར༻ J04 
 $PNQPOFOUT
    
    5FYU
    4UZMF "OESPJE 
 $PNQPOFOUT
    
    5FYU
    4UZMF .PCJMF
    8FC 
 $PNQPOFOUT
    
    5FYU
    4UZMF %FTLUPQ
    8FC 
 $PNQPOFOUT
    
    5FYU
    4UZMF $PMPS *DPOT "TTFUT ࢪࡦຖͷσβΠ ϯ .BTUFS
    %FTJHO
14. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 14 'JHNBϑ ΝΠϧͱ ͯ͠ϥΠ ϒϥ ϦԽ
15. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 15 ̎֊ݐͯͷσβΠ ϯϥΠ ϒϥ Ϧͷϝ Ϧ ο τ ͱσϝ Ϧ ο τ w ϓϥοτϑΥʔϜʹదͨ͠6*ίϯϙʔωϯτΛఏڙͰ͖Δ
    w ϥΠϒϥϦߋ৽ͷӨڹൣғΛখ͘͞Ͱ͖Δ
    w ΧϥʔɺΞΠίϯɺΞηοτͷॏෳ͕ແ͍ͨΊೋॏ؅ཧͷख͕ؒੜ͡ͳ͍ ϝϦοτ w ؅ཧ͢ΔϑΝΠϧ਺͕૿͑ΔͨΊɺ৽͍͠6*ͷ௥Ճ͕ଟ͍ॳظϑΣʔζͰ͸ 
 ޮ཰͕མͪΔ σϝϦοτ
16. 16 ΧϥʔϥΠ ϒϥ Ϧ ΋ ̎֊ݐͯߏ଄Λ࠾༻
17. ΧϥʔϥΠ ϒϥ Ϧͷߏ଄ 17 ̎֊ݐͯͷΧϥʔϥΠ ϒϥ Ϧ ̍ ֊ɹ(SPCBM
    $PMPS 
 
    ϒϥ ϯ υΛಛ௃͚ͮΔΧϥʔύϨ ο τ 
 
    ৭૬ͱ໌౓ʹΑ Δఆٛ ֊ɹ1SPEVDU
    $PMPS 
 
    6*ʹద༻͢Δ ͨΊʹม਺Խ͞ΕͨΧϥʔ 
 
    ໨త΍༻్ʹΑ Δఆٛ 6*ʹద༻
18. ΧϥʔϥΠ ϒϥ Ϧͷߏ଄ 18 ̎֊ݐͯͷΧϥʔϥΠ ϒϥ Ϧͷϝ Ϧ ο τ ͱσϝ Ϧ ο τ w 6*ͷ໨తɾ༻్ʹԠͯ͡ΧϥʔΛద༻͢ΔͨΊ൑அͷϒϨ͕গͳ͍
    w ڞ௨ΧϥʔύϨοτΛϕʔεʹɺෳ਺ͷ໨తͰΧϥʔఆٛΛߏஙͰ͖Δ
    w ؔ࿈ϓϩμΫτͷΧϥʔఆٛ
    w 4/4ը૾ɺόφʔɺ-1ͳͲؔ࿈੍࡞෺ͷΧϥʔఆٛ
    w μʔΫϞʔυͷΧϥʔఆٛ ϝϦοτ w 6*ͷύλʔϯ͕গͳ͍ॳظϑΣʔζͷ৔߹͸ɺ1SPEVDU
    $PMPSͷચ͍ग़͕͠೉͍͠ σϝϦοτ
19. 19 · ͱΊ w σβΠϯϥΠϒϥϦΛߏங͢Δࡍ͸̎֊ݐͯߏ଄ʹ͢Δͱ 
 ϚϧνϓϥοτϑΥʔϜʹద༻ͤ͞΍͍͢
    w ΧϥʔϥΠϒϥϦ΋̎֊ݐͯߏ଄Ͱߏங͢Δͱ 
 ϚϧνϓϩμΫτɺμʔΫϞʔυɺؔ࿈੍࡞෺΁ల։ͤ͞΍͍͢
    w ͨͩ͠ɺαʔϏεॳظϑΣʔζͰಋೖ͢Δͱޮ཰͕མͪΔ৔߹͕͋Δ 
 ࣗ෼ͨͪͷαʔϏεʹదͨ͠ϥΠϒϥϦߏ଄Λߟ͑Δ
20. 20 ࢀߟจݙ w 'JHNBͷϦϑΝΫλϦϯά͔Β͸͡ΊΔσβΠϯγεςϜͷߏங 
 5PSBKJSP
    4IJJIBTIJ 
 IUUQTOPUFDPNKJSPTIOOGCGF
    w HFTUBMUQJOUFSFTUTZTUFNT
    
    %FTJHO
    UPLFOT 
 IUUQTHFTUBMUQJOUFSFTUTZTUFNTGPVOEBUJPOTEFTJHO@UPLFOT
    w .BUFSJBM
    %FTJHO
    
    $PMPS
    TZTUFN 
 IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNLFZDPMPSTUPOFT
21. 21 5XJUUFSͰ6*σβΠϯʹ͍ͭͯൃ৴͍ͯ͠·͢ !TIJOHP 5IBOL
    :PV