Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Shingo Suzuki

June 02, 2023
Tweet

More Decks by Shingo Suzuki

Other Decks in Design

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

    [email protected]
    w .BUFSJBM%FTJHO$PMPSTZTUFN

    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNLFZDPMPSTUPOFT

    View Slide

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

    View Slide