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
2. @dex1t Takaya Deguchi CXO / UX Engineer à Refcome, Inc. note.com/dex1t
3. https://refcome.team/
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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ