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
   

   View Slide

2. ࣗݾ঺հ
   2
   ླ໦৻ޗ
   גࣜձࣾͭΈ͖ϦʔυσβΠφʔ
   

   View Slide

3. 'JMNBSLTʹ͍ͭͯ
   3
   ࠃ಺࠷େڃͷ
   

   өըɺ
   υϥϚɺ
   ΞχϝͷϨϏϡʔαʔϏε
   

   View Slide

4. 'JMNBSLTʹ͍ͭͯ
   4
   ϞόΠϧΞϓϦ
   ͱ8FCͰαʔϏεఏڙ
   J04"QQ "OESPJE"QQ .PCJMF8FC %FTLUPQ8FC
   

   View Slide

5. αʔϏε։͔࢝Β೥
   ஝ੵ͞ΕͨσβΠ
   ϯෛ࠴
   5
   

   View Slide

6. ஝ੵ͞ΕͨσβΠ
   ϯෛ࠴
   6
   छྨҎ্ͷάϨʔ
   

   View Slide

7. ஝ੵ͞ΕͨσβΠ
   ϯෛ࠴
   7
   ࣅͯΔ͚Ͳͪ
   ΐ
   ͬ
   ͱ͚ͩҧ͏6*͕૿৩
   

   View Slide

8. ஝ੵ͞ΕͨσβΠ
   ϯෛ࠴
   8
   ϓϥ
   ο
   τ
   ϑΥʔϜຖʹଘࡏ͢ΔΞΠ
   ίϯఆٛʹࠩ෼͕ൃੜ
   .PCJMF8FC %FTLUPQ8FC J04"QQ"OESPJE"QQ
   

   View Slide

9. 9
   ૉૣ͘ɺ
   ҆৺ͯ͠࢖͑Δ
   σβΠ
   ϯϥΠ
   ϒϥ
   Ϧ͕ཉ͍͠
   σβΠφʔͱΤϯδχΞͷਓͰϓϩδΣΫ
   τԽ
   

   View Slide

10. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    10
    ࣗ෼ͨͪͷαʔϏεʹదͨ͠ϥΠ
    ϒϥ
    Ϧͷߏ଄ͱ͸ʁ
    J04"QQ "OESPJE"QQ .PCJMF8FC %FTLUPQ8FC
    

    View Slide

11. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    11
    ϓϥ
    ο
    τ
    ϑΥʔϜʹΑ
    Δҧ͍
    ΞϓϦ
    w өըɺυϥϚɺΞχϝϑΝϯ͕ɺ؍ͨ࡞඼ɺ؍͍ͨ࡞඼Λ؅ཧɻ࣍ʹ؍Δ࡞඼Λ୳͢ɻ
    w J04ɺ"OESPJEͷΨΠυϥΠϯΛ౿ऻ
    w ࡞඼ը૾ʼςΩετ৘ใ
    8FC
    w ࡞඼໊ͳͲͰݕࡧྲྀೖ
    w ؾʹͳΔ࡞඼ͷޱίϛɺରԠ͍ͯ͠Δಈը഑৴ɺөըؗΛௐ΂Δ
    w ςΩετ৘ใ࡞඼ը૾
    'JMNBSLTͷ৔߹ͷΞϓϦ
    ͱ8FCͷҧ͍
    

    View Slide

12. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    12
    ϓϥ
    ο
    τϑΥʔϜʹґଘ͠ͳ͍ ϓϥ
    ο
    τϑΥʔϜʹґଘ͢Δ
    ϓϥ
    ο
    τ
    ϑΥʔϜͷҧ͍Λ࣠ʹσβΠ
    ϯཁૉΛ̎ͭʹ෼ྨ
    Χϥʔ
    ςΩετ
    ελΠϧ
    ίϯϙʔωϯτ
    ΞΠίϯ
    ը૾Ξηοτ
    

    View Slide

13. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    13
    ̎֊ݐͯͷσβΠ
    ϯϥΠ
    ϒϥ
    Ϧ
    ̍
    ֊
    

    ϓϥ
    ο
    τ
    ϑ
    Υ
    ʔϜʹ
    

    ґଘ͠
    ͳ͍
    ֊
    

    ϓϥ
    ο
    τ
    ϑ
    Υ
    ʔϜʹ
    

    ґଘ͢Δ
    ϓϥ
    ο
    τ
    ϑ
    Υ
    ʔϜຖͷը໘σβΠ
    ϯ΍ɺ
    

    ࢪࡦຖͷσβΠ
    ϯʹར༻
    J04
    

    $PNQPOFOUT5FYU4UZMF
    "OESPJE
    

    $PNQPOFOUT5FYU4UZMF
    .PCJMF8FC
    

    $PNQPOFOUT5FYU4UZMF
    %FTLUPQ8FC
    

    $PNQPOFOUT5FYU4UZMF
    $PMPS *DPOT "TTFUT
    ࢪࡦຖͷσβΠ
    ϯ
    .BTUFS%FTJHO
    

    View Slide

14. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    14
    'JHNBϑ
    ΝΠϧͱ
    ͯ͠ϥΠ
    ϒϥ
    ϦԽ
    

    View Slide

15. σβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷߏ଄
    15
    ̎֊ݐͯͷσβΠ
    ϯϥΠ
    ϒϥ
    Ϧͷϝ
    Ϧ
    ο
    τ
    ͱσϝ
    Ϧ
    ο
    τ
    w ϓϥοτϑΥʔϜʹదͨ͠6*ίϯϙʔωϯτΛఏڙͰ͖Δ
    w ϥΠϒϥϦߋ৽ͷӨڹൣғΛখ͘͞Ͱ͖Δ
    w ΧϥʔɺΞΠίϯɺΞηοτͷॏෳ͕ແ͍ͨΊೋॏ؅ཧͷख͕ؒੜ͡ͳ͍
    ϝϦοτ
    w ؅ཧ͢ΔϑΝΠϧ਺͕૿͑ΔͨΊɺ৽͍͠6*ͷ௥Ճ͕ଟ͍ॳظϑΣʔζͰ͸
    

    ޮ཰͕མͪΔ
    σϝϦοτ
    

    View Slide

16. 16
    ΧϥʔϥΠ
    ϒϥ
    Ϧ
    ΋
    ̎֊ݐͯߏ଄Λ࠾༻
    

    View Slide

17. ΧϥʔϥΠ
    ϒϥ
    Ϧͷߏ଄
    17
    ̎֊ݐͯͷΧϥʔϥΠ
    ϒϥ
    Ϧ
    ̍
    ֊ɹ(SPCBM$PMPS
    

    ϒϥ
    ϯ
    υΛಛ௃͚ͮΔΧϥʔύϨ
    ο
    τ
    

    ৭૬ͱ໌౓ʹΑ
    Δఆٛ
    ֊ɹ1SPEVDU$PMPS
    

    6*ʹద༻͢Δ
    ͨΊʹม਺Խ͞ΕͨΧϥʔ
    

    ໨త΍༻్ʹΑ
    Δఆٛ
    6*ʹద༻
    

    View Slide

18. ΧϥʔϥΠ
    ϒϥ
    Ϧͷߏ଄
    18
    ̎֊ݐͯͷΧϥʔϥΠ
    ϒϥ
    Ϧͷϝ
    Ϧ
    ο
    τ
    ͱσϝ
    Ϧ
    ο
    τ
    w 6*ͷ໨తɾ༻్ʹԠͯ͡ΧϥʔΛద༻͢ΔͨΊ൑அͷϒϨ͕গͳ͍
    w ڞ௨ΧϥʔύϨοτΛϕʔεʹɺෳ਺ͷ໨తͰΧϥʔఆٛΛߏஙͰ͖Δ
    w ؔ࿈ϓϩμΫτͷΧϥʔఆٛ
    w 4/4ը૾ɺόφʔɺ-1ͳͲؔ࿈੍࡞෺ͷΧϥʔఆٛ
    w μʔΫϞʔυͷΧϥʔఆٛ
    ϝϦοτ
    w 6*ͷύλʔϯ͕গͳ͍ॳظϑΣʔζͷ৔߹͸ɺ1SPEVDU$PMPSͷચ͍ग़͕͠೉͍͠
    σϝϦοτ
    

    View Slide

19. 19
    ·
    ͱΊ
    w σβΠϯϥΠϒϥϦΛߏங͢Δࡍ͸̎֊ݐͯߏ଄ʹ͢Δͱ
    

    ϚϧνϓϥοτϑΥʔϜʹద༻ͤ͞΍͍͢
    w ΧϥʔϥΠϒϥϦ΋̎֊ݐͯߏ଄Ͱߏங͢Δͱ
    

    ϚϧνϓϩμΫτɺμʔΫϞʔυɺؔ࿈੍࡞෺΁ల։ͤ͞΍͍͢
    w ͨͩ͠ɺαʔϏεॳظϑΣʔζͰಋೖ͢Δͱޮ཰͕མͪΔ৔߹͕͋Δ
    

    ࣗ෼ͨͪͷαʔϏεʹదͨ͠ϥΠϒϥϦߏ଄Λߟ͑Δ
    

    View Slide

20. 20
    ࢀߟจݙ
    w 'JHNBͷϦϑΝΫλϦϯά͔Β͸͡ΊΔσβΠϯγεςϜͷߏங
    

    5PSBKJSP4IJJIBTIJ
    

    IUUQTOPUFDPNKJSPTIOOGCGF
    w HFTUBMUQJOUFSFTUTZTUFNT%FTJHOUPLFOT
    

    IUUQTHFTUBMUQJOUFSFTUTZTUFNTGPVOEBUJPOTEFTJHO@UPLFOT
    w .BUFSJBM%FTJHO$PMPSTZTUFN
    

    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNLFZDPMPSTUPOFT
    

    View Slide

21. 21
    5XJUUFSͰ6*σβΠϯʹ͍ͭͯൃ৴͍ͯ͠·͢
    !TIJOHP
    5IBOL:PV
    

    View Slide