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

Transcript

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

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

   note.com/dex1t

3. https://refcome.team/

4. None

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

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

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

8. 1. Webϕʔε

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

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

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

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

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

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

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

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

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

18. CASE 1: Refcome, Inc.

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

    ϊϯσβΠφʔΛ͍͔ʹר͖ࠐΉ͔

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

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

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

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

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

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

26. CASE 2: UUUO Inc.

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

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

    Designer

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

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

31. ·ͱΊ

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

    design tool 7

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

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

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