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

Figmaでデザインを"ひらく" / Design for Everyone by Figma

Takaya Deguchi
January 31, 2020

Figmaでデザインを"ひらく" / Design for Everyone by Figma

s-dev talks「サービス開発コミュニケーションを加速させるFigma活用事例」
https://s-dev-talks.connpass.com/event/161603/

Takaya Deguchi

January 31, 2020
Tweet

More Decks by Takaya Deguchi

Other Decks in Design

Transcript

  1. FigmaͰσβΠϯΛ ”ͻΒ͘”
    2020.01.31 s-dev talks, @dex1t

    View Slide

  2. @dex1t
    Takaya Deguchi
    CXO / UX Engineer
    à
    Refcome, Inc.
    note.com/dex1t

    View Slide

  3. https://refcome.team/

    View Slide

  4. View Slide

  5. BtoBελʔτΞοϓͰ
    FigmaΛ࢖ͬͨ
    ίϛϡχέʔγϣϯࣄྫ

    View Slide

  6. ςΫχΧϧͳ࿩͸͠·ͤΜ

    View Slide

  7. FigmaΛಋೖͨ͠3ͭͷཧ༝

    View Slide

  8. 1. Webϕʔε

    View Slide

  9. खݩͷϒϥ΢βͰ։͚ͩ͘
    ϑΥϯτ͕ແͯ͘΋ਖ਼͘͠දࣔ

    View Slide

  10. ϊϯσβΠφʔͰ΋
    σβΠϯΛ೷͖΍͍͢

    View Slide

  11. 2. ϞʔυϨεͳڠಉ

    View Slide

  12. Share Mode Publish / Upload
    Adobe XD Sketch, Zeplin

    View Slide

  13. ੜࣽ͑ͳσβΠϯͰ΋
    ڧ੍తʹΦʔϓϯʹ⚡

    View Slide

  14. 3. ΄ͲΑ͘શ෦ೖΓ
    Prototype Animation Developer Handoff

    View Slide

  15. 3. ΄ͲΑ͘શ෦ೖΓ
    2. ϞʔυϨεͳڠಉ
    1. Webϕʔε

    View Slide

  16. https://uxtools.co/survey-2019/

    View Slide

  17. 3. ΄ͲΑ͘શ෦ೖΓ
    2. ϞʔυϨεͳڠಉ
    1. Webϕʔε
    Φʔϓϯͳࢥ૝͕νʔϜʹ͋͏͔Ͳ͏͔

    View Slide

  18. CASE 1: Refcome, Inc.

    View Slide

  19. • HRTech SaaSελʔτΞοϓ
    • ࣾһ 30໊
    • ࡢ೥·ͰσβΠφʔ͕ෆࡏ
    • ϓϩμΫτυϦϒϯͳ૊৫ʹมԽ͍ͨ͠
    ϊϯσβΠφʔΛ͍͔ʹר͖ࠐΉ͔

    View Slide

  20. % PdM, σβΠφʔ, ΤϯδχΞ͕ৗʹಉ͡ϞϊΛΈͯ։ൃ
    ӬԕͷWork In Progress

    View Slide

  21. Engineer
    PdM
    Designer
    ࡉ͔ͳ࢓༷͸ϞϊΛݟͳ͕Βٞ࿦
    จݴͳͲϥΠςΟϯά͸PM͕௚઀खΛՃ͑Δ͜ͱ΋

    View Slide

  22. PdM͕ΤϯδχΞʹԹ౓ײΛϥϕϧͰ఻͑Δ
    Figma͕ৗʹίϛϡχέʔγϣϯͷ৔

    View Slide

  23. ϓϩμΫτͷ੨ࣸਅ΋FigmaͰՄࢹԽ
    FigmaΛݟΕ͹ϓϩμΫτͷ͜ͱ͕෼͔Δঢ়ଶʹ

    View Slide

  24. Kibela (ࣾ಺ϒϩά) ʹεςʔτϝϯτΛ࡞੒
    FigmaΛiframeͰຒΊࠐΉ͜ͱͰɺੜ͖ͨυΩϡϝϯτʹ
    ♻ ࣾ಺͚ͩͰͳ͘ɺגओͳͲࣾ֎΁ͷڞ༗΋

    View Slide

  25. 0 ΨΠυϥΠϯ΍૊৫ਤ΋FigmaͰ࡞੒
    ͍ͣΕ΋ڞ༗ָ͕ͳͷͱɺมߋཤྺ͕࢒Δͷ͕ศར

    View Slide

  26. CASE 2: UUUO Inc.

    View Slide

  27. • ਫ࢈ελʔτΞοϓ
    • ࣾһ 8໊
    • ڌ఺͕޿ౡɾௗऔ
    • ։ൃνʔϜͷ3/4͕෭ۀ͔ͭ౦ژࡏॅऀ
    ଟڌ఺ɾϦϞʔτͰͷϓϩμΫτ։ൃ

    View Slide

  28. ຖि຤ɺϏσΦձٞ (Zoom) ͠ͳ͕ΒFigmaΛғΉ
    2 ձ࿩͠ͳ͕Βͦͷ৔ͰϓϩτλΠϐϯά
    Engineer
    PdM
    UI Designer
    UX Designer

    View Slide

  29. ಠಛͷ঎׳श΍ࣗવͷӨڹ͕ϏδωεཧղΛ೉͘͢͠Δ
    ίϯςΩετͱUI͸ηοτͰίϛϡχέʔγϣϯ

    View Slide

  30. ⚒ طଘͷUI ComponentΛ׆༻
    2 ਫ࢈ʹৄ͍͠PdM͕ࣾ಺ΞϓϦΛσβΠϯ

    View Slide

  31. ·ͱΊ

    View Slide

  32. Figma is…
    the collaborative design tool
    5
    for everyone

    the design tool
    7

    View Slide

  33. • Figma͸ϊϯσβΠφʔͷר͖ࠐΈྗʹ༏ΕΔ
    • ٯʹσβΠφʔʹ͸ϚΠϯυνΣϯδ͕ٻΊΒΕΔ
    • Φʔϓϯͳઃܭࢥ૝Λཧղ্ͨ͠ͰͷಋೖΛ

    View Slide

  34. ݸਓతʹ͸Framer Webʹ΋ظ଴ͯ͠·͢

    View Slide

  35. ϦϑΧϜ͸
    σβΠφʔɾΤϯδχΞΛ
    ੵۃืूதͰ͢
    ɾUXΤϯδχΞ
    ɾόοΫΤϯυΤϯδχΞ
    ɾUIσβΠφʔ
    ɾάϥϑΟοΫσβΠφʔ
    ɾϓϩμΫτϚωʔδϟʔ

    View Slide