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

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

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