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. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 11 ϓϥ ο τ ϑΥʔϜʹΑ Δҧ͍

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

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

    ֊ 
 ϓϥ ο τ ϑ Υ ʔϜʹ 
 ґଘ͠ ͳ͍ ֊ 
 ϓϥ ο τ ϑ Υ ʔϜʹ 
 ґଘ͢Δ ϓϥ ο τ ϑ Υ ʔϜຖͷը໘σβΠ ϯ΍ɺ 
 ࢪࡦຖͷσβΠ ϯʹར༻ J04 
 $PNQPOFOUT5FYU4UZMF "OESPJE 
 $PNQPOFOUT5FYU4UZMF .PCJMF8FC 
 $PNQPOFOUT5FYU4UZMF %FTLUPQ8FC 
 $PNQPOFOUT5FYU4UZMF $PMPS *DPOT "TTFUT ࢪࡦຖͷσβΠ ϯ .BTUFS%FTJHO
  4. σβΠ ϯϥΠ ϒϥ Ϧͷߏ଄ 15 ̎֊ݐͯͷσβΠ ϯϥΠ ϒϥ Ϧͷϝ Ϧ

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


    ϒϥ ϯ υΛಛ௃͚ͮΔΧϥʔύϨ ο τ 
 ৭૬ͱ໌౓ʹΑ Δఆٛ ֊ɹ1SPEVDU$PMPS 
 6*ʹద༻͢Δ ͨΊʹม਺Խ͞ΕͨΧϥʔ 
 ໨త΍༻్ʹΑ Δఆٛ 6*ʹద༻
  6. ΧϥʔϥΠ ϒϥ Ϧͷߏ଄ 18 ̎֊ݐͯͷΧϥʔϥΠ ϒϥ Ϧͷϝ Ϧ ο τ

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


    ϚϧνϓϩμΫτɺμʔΫϞʔυɺؔ࿈੍࡞෺΁ల։ͤ͞΍͍͢ w ͨͩ͠ɺαʔϏεॳظϑΣʔζͰಋೖ͢Δͱޮ཰͕མͪΔ৔߹͕͋Δ 
 ࣗ෼ͨͪͷαʔϏεʹదͨ͠ϥΠϒϥϦߏ଄Λߟ͑Δ
  8. 20 ࢀߟจݙ w 'JHNBͷϦϑΝΫλϦϯά͔Β͸͡ΊΔσβΠϯγεςϜͷߏங 
 5PSBKJSP4IJJIBTIJ 
 IUUQTOPUFDPNKJSPTIOOGCGF w HFTUBMUQJOUFSFTUTZTUFNT%FTJHOUPLFOT

    
 IUUQTHFTUBMUQJOUFSFTUTZTUFNTGPVOEBUJPOTEFTJHO@UPLFOT w .BUFSJBM%FTJHO$PMPSTZTUFN 
 IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNLFZDPMPSTUPOFT