Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
FigmaͰσβΠϯΛ ”ͻΒ͘” 2020.01.31 s-dev talks, @dex1t
Slide 2
Slide 2 text
@dex1t Takaya Deguchi CXO / UX Engineer à Refcome, Inc. note.com/dex1t
Slide 3
Slide 3 text
https://refcome.team/
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
BtoBελʔτΞοϓͰ FigmaΛͬͨ ίϛϡχέʔγϣϯࣄྫ
Slide 6
Slide 6 text
ςΫχΧϧͳ͠·ͤΜ
Slide 7
Slide 7 text
FigmaΛಋೖͨ͠3ͭͷཧ༝
Slide 8
Slide 8 text
1. Webϕʔε
Slide 9
Slide 9 text
खݩͷϒϥβͰ։͚ͩ͘ ϑΥϯτ͕ແͯ͘ਖ਼͘͠දࣔ
Slide 10
Slide 10 text
ϊϯσβΠφʔͰ σβΠϯΛ͖͍͢
Slide 11
Slide 11 text
2. ϞʔυϨεͳڠಉ
Slide 12
Slide 12 text
Share Mode Publish / Upload Adobe XD Sketch, Zeplin
Slide 13
Slide 13 text
ੜࣽ͑ͳσβΠϯͰ ڧ੍తʹΦʔϓϯʹ⚡
Slide 14
Slide 14 text
3. ΄ͲΑ͘શ෦ೖΓ Prototype Animation Developer Handoff
Slide 15
Slide 15 text
3. ΄ͲΑ͘શ෦ೖΓ 2. ϞʔυϨεͳڠಉ 1. Webϕʔε
Slide 16
Slide 16 text
https://uxtools.co/survey-2019/
Slide 17
Slide 17 text
3. ΄ͲΑ͘શ෦ೖΓ 2. ϞʔυϨεͳڠಉ 1. Webϕʔε Φʔϓϯͳࢥ͕νʔϜʹ͋͏͔Ͳ͏͔
Slide 18
Slide 18 text
CASE 1: Refcome, Inc.
Slide 19
Slide 19 text
• HRTech SaaSελʔτΞοϓ • ࣾһ 30໊ • ࡢ·ͰσβΠφʔ͕ෆࡏ • ϓϩμΫτυϦϒϯͳ৫ʹมԽ͍ͨ͠ ϊϯσβΠφʔΛ͍͔ʹר͖ࠐΉ͔
Slide 20
Slide 20 text
% PdM, σβΠφʔ, ΤϯδχΞ͕ৗʹಉ͡ϞϊΛΈͯ։ൃ ӬԕͷWork In Progress
Slide 21
Slide 21 text
Engineer PdM Designer ࡉ͔ͳ༷ϞϊΛݟͳ͕Βٞ จݴͳͲϥΠςΟϯάPM͕खΛՃ͑Δ͜ͱ
Slide 22
Slide 22 text
PdM͕ΤϯδχΞʹԹײΛϥϕϧͰ͑Δ Figma͕ৗʹίϛϡχέʔγϣϯͷ
Slide 23
Slide 23 text
ϓϩμΫτͷ੨ࣸਅFigmaͰՄࢹԽ FigmaΛݟΕϓϩμΫτͷ͜ͱ͕͔Δঢ়ଶʹ
Slide 24
Slide 24 text
Kibela (ࣾϒϩά) ʹεςʔτϝϯτΛ࡞ FigmaΛiframeͰຒΊࠐΉ͜ͱͰɺੜ͖ͨυΩϡϝϯτʹ ♻ ͚ࣾͩͰͳ͘ɺגओͳͲࣾ֎ͷڞ༗
Slide 25
Slide 25 text
0 ΨΠυϥΠϯ৫ਤFigmaͰ࡞ ͍ͣΕڞ༗ָ͕ͳͷͱɺมߋཤྺ͕Δͷ͕ศར
Slide 26
Slide 26 text
CASE 2: UUUO Inc.
Slide 27
Slide 27 text
• ਫ࢈ελʔτΞοϓ • ࣾһ 8໊ • ڌ͕ౡɾௗऔ • ։ൃνʔϜͷ3/4͕෭ۀ͔ͭ౦ژࡏॅऀ ଟڌɾϦϞʔτͰͷϓϩμΫτ։ൃ
Slide 28
Slide 28 text
ຖिɺϏσΦձٞ (Zoom) ͠ͳ͕ΒFigmaΛғΉ 2 ձ͠ͳ͕ΒͦͷͰϓϩτλΠϐϯά Engineer PdM UI Designer UX Designer
Slide 29
Slide 29 text
ಠಛͷ׳शࣗવͷӨڹ͕ϏδωεཧղΛ͘͢͠Δ ίϯςΩετͱUIηοτͰίϛϡχέʔγϣϯ
Slide 30
Slide 30 text
⚒ طଘͷUI ComponentΛ׆༻ 2 ਫ࢈ʹৄ͍͠PdM͕ࣾΞϓϦΛσβΠϯ
Slide 31
Slide 31 text
·ͱΊ
Slide 32
Slide 32 text
Figma is… the collaborative design tool 5 for everyone the design tool 7
Slide 33
Slide 33 text
• FigmaϊϯσβΠφʔͷר͖ࠐΈྗʹ༏ΕΔ • ٯʹσβΠφʔʹϚΠϯυνΣϯδ͕ٻΊΒΕΔ • ΦʔϓϯͳઃܭࢥΛཧղ্ͨ͠ͰͷಋೖΛ
Slide 34
Slide 34 text
ݸਓతʹFramer Webʹظͯ͠·͢
Slide 35
Slide 35 text
ϦϑΧϜ σβΠφʔɾΤϯδχΞΛ ੵۃืूதͰ͢ ɾUXΤϯδχΞ ɾόοΫΤϯυΤϯδχΞ ɾUIσβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ