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

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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ