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 full-size slide

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

    View full-size slide

  3. https://refcome.team/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 1. Webϕʔε

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. CASE 1: Refcome, Inc.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. CASE 2: UUUO Inc.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    the design tool
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide