s-dev talks「サービス開発コミュニケーションを加速させるFigma活用事例」 https://s-dev-talks.connpass.com/event/161603/
FigmaͰσβΠϯΛ ”ͻΒ͘”2020.01.31 s-dev talks, @dex1t
View Slide
@dex1tTakaya DeguchiCXO / UX EngineeràRefcome, Inc.note.com/dex1t
https://refcome.team/
BtoBελʔτΞοϓͰFigmaΛͬͨίϛϡχέʔγϣϯࣄྫ
ςΫχΧϧͳ͠·ͤΜ
FigmaΛಋೖͨ͠3ͭͷཧ༝
1. Webϕʔε
खݩͷϒϥβͰ։͚ͩ͘ϑΥϯτ͕ແͯ͘ਖ਼͘͠දࣔ
ϊϯσβΠφʔͰσβΠϯΛ͖͍͢
2. ϞʔυϨεͳڠಉ
Share Mode Publish / UploadAdobe XD Sketch, Zeplin
ੜࣽ͑ͳσβΠϯͰڧ੍తʹΦʔϓϯʹ⚡
3. ΄ͲΑ͘શ෦ೖΓPrototype Animation Developer Handoff
3. ΄ͲΑ͘શ෦ೖΓ2. ϞʔυϨεͳڠಉ1. Webϕʔε
https://uxtools.co/survey-2019/
3. ΄ͲΑ͘શ෦ೖΓ2. ϞʔυϨεͳڠಉ1. WebϕʔεΦʔϓϯͳࢥ͕νʔϜʹ͋͏͔Ͳ͏͔
CASE 1: Refcome, Inc.
• HRTech SaaSελʔτΞοϓ• ࣾһ 30໊• ࡢ·ͰσβΠφʔ͕ෆࡏ• ϓϩμΫτυϦϒϯͳ৫ʹมԽ͍ͨ͠ ϊϯσβΠφʔΛ͍͔ʹר͖ࠐΉ͔
% PdM, σβΠφʔ, ΤϯδχΞ͕ৗʹಉ͡ϞϊΛΈͯ։ൃ ӬԕͷWork In Progress
EngineerPdMDesigner ࡉ͔ͳ༷ϞϊΛݟͳ͕Βٞ จݴͳͲϥΠςΟϯάPM͕खΛՃ͑Δ͜ͱ
PdM͕ΤϯδχΞʹԹײΛϥϕϧͰ͑Δ Figma͕ৗʹίϛϡχέʔγϣϯͷ
ϓϩμΫτͷ੨ࣸਅFigmaͰՄࢹԽ FigmaΛݟΕϓϩμΫτͷ͜ͱ͕͔Δঢ়ଶʹ
Kibela (ࣾϒϩά) ʹεςʔτϝϯτΛ࡞ FigmaΛiframeͰຒΊࠐΉ͜ͱͰɺੜ͖ͨυΩϡϝϯτʹ♻ ͚ࣾͩͰͳ͘ɺגओͳͲࣾ֎ͷڞ༗
0 ΨΠυϥΠϯ৫ਤFigmaͰ࡞ ͍ͣΕڞ༗ָ͕ͳͷͱɺมߋཤྺ͕Δͷ͕ศར
CASE 2: UUUO Inc.
• ਫ࢈ελʔτΞοϓ• ࣾһ 8໊• ڌ͕ౡɾௗऔ• ։ൃνʔϜͷ3/4͕෭ۀ͔ͭ౦ژࡏॅऀ ଟڌɾϦϞʔτͰͷϓϩμΫτ։ൃ
ຖिɺϏσΦձٞ (Zoom) ͠ͳ͕ΒFigmaΛғΉ2 ձ͠ͳ͕ΒͦͷͰϓϩτλΠϐϯάEngineerPdMUI DesignerUX Designer
ಠಛͷ׳शࣗવͷӨڹ͕ϏδωεཧղΛ͘͢͠Δ ίϯςΩετͱUIηοτͰίϛϡχέʔγϣϯ
⚒ طଘͷUI ComponentΛ׆༻2 ਫ࢈ʹৄ͍͠PdM͕ࣾΞϓϦΛσβΠϯ
·ͱΊ
Figma is…the collaborative design tool5for everyonethe design tool7
• FigmaϊϯσβΠφʔͷר͖ࠐΈྗʹ༏ΕΔ• ٯʹσβΠφʔʹϚΠϯυνΣϯδ͕ٻΊΒΕΔ• ΦʔϓϯͳઃܭࢥΛཧղ্ͨ͠ͰͷಋೖΛ
ݸਓతʹFramer Webʹظͯ͠·͢
ϦϑΧϜσβΠφʔɾΤϯδχΞΛੵۃืूதͰ͢ɾUXΤϯδχΞɾόοΫΤϯυΤϯδχΞɾUIσβΠφʔɾάϥϑΟοΫσβΠφʔɾϓϩμΫτϚωʔδϟʔ