Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaでデザインを"ひらく" / Design for Everyone by Figma
Search
Takaya Deguchi
January 31, 2020
Design
1
1.3k
Figmaでデザインを"ひらく" / Design for Everyone by Figma
s-dev talks「サービス開発コミュニケーションを加速させるFigma活用事例」
https://s-dev-talks.connpass.com/event/161603/
Takaya Deguchi
January 31, 2020
Tweet
Share
More Decks by Takaya Deguchi
See All by Takaya Deguchi
キャリアの分岐点 / the intersection of my carrier
dex1t
3
240
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.5k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.3k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
790
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.6k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.6k
不確実さとうまく付きあうサービス開発
dex1t
3
2.5k
Other Decks in Design
See All in Design
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
2.9k
ito aya Portfolio
itoaya116
0
140
Cards | Storyboards
giofortuna_story
0
130
250131_product meetup
motokoishida
0
150
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
The Golden Whitney
ohtristanart
PRO
0
240
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
1
4.6k
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
580
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
520
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
230
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
320
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Unsuck your backbone
ammeep
670
57k
Fireside Chat
paigeccino
37
3.4k
The Invisible Side of Design
smashingmag
299
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
27
5.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
740
Designing for Performance
lara
607
69k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
For a Future-Friendly Web
brad_frost
176
9.7k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
FigmaͰσβΠϯΛ ”ͻΒ͘” 2020.01.31 s-dev talks, @dex1t
@dex1t Takaya Deguchi CXO / UX Engineer à Refcome, Inc.
note.com/dex1t
https://refcome.team/
None
BtoBελʔτΞοϓͰ FigmaΛͬͨ ίϛϡχέʔγϣϯࣄྫ
ςΫχΧϧͳ͠·ͤΜ
FigmaΛಋೖͨ͠3ͭͷཧ༝
1. Webϕʔε
खݩͷϒϥβͰ։͚ͩ͘ ϑΥϯτ͕ແͯ͘ਖ਼͘͠දࣔ
ϊϯσβΠφʔͰ σβΠϯΛ͖͍͢
2. ϞʔυϨεͳڠಉ
Share Mode Publish / Upload Adobe 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
Engineer PdM Designer ࡉ͔ͳ༷ϞϊΛݟͳ͕Βٞ จݴͳͲϥΠςΟϯάPM͕खΛՃ͑Δ͜ͱ
PdM͕ΤϯδχΞʹԹײΛϥϕϧͰ͑Δ Figma͕ৗʹίϛϡχέʔγϣϯͷ
ϓϩμΫτͷ੨ࣸਅFigmaͰՄࢹԽ FigmaΛݟΕϓϩμΫτͷ͜ͱ͕͔Δঢ়ଶʹ
Kibela (ࣾϒϩά) ʹεςʔτϝϯτΛ࡞ FigmaΛiframeͰຒΊࠐΉ͜ͱͰɺੜ͖ͨυΩϡϝϯτʹ ♻ ͚ࣾͩͰͳ͘ɺגओͳͲࣾ֎ͷڞ༗
0 ΨΠυϥΠϯ৫ਤFigmaͰ࡞ ͍ͣΕڞ༗ָ͕ͳͷͱɺมߋཤྺ͕Δͷ͕ศར
CASE 2: UUUO Inc.
• ਫ࢈ελʔτΞοϓ • ࣾһ 8໊ • ڌ͕ౡɾௗऔ • ։ൃνʔϜͷ3/4͕෭ۀ͔ͭ౦ژࡏॅऀ ଟڌɾϦϞʔτͰͷϓϩμΫτ։ൃ
ຖिɺϏσΦձٞ (Zoom) ͠ͳ͕ΒFigmaΛғΉ 2 ձ͠ͳ͕ΒͦͷͰϓϩτλΠϐϯά Engineer PdM UI Designer UX
Designer
ಠಛͷ׳शࣗવͷӨڹ͕ϏδωεཧղΛ͘͢͠Δ ίϯςΩετͱUIηοτͰίϛϡχέʔγϣϯ
⚒ طଘͷUI ComponentΛ׆༻ 2 ਫ࢈ʹৄ͍͠PdM͕ࣾΞϓϦΛσβΠϯ
·ͱΊ
Figma is… the collaborative design tool 5 for everyone the
design tool 7
• FigmaϊϯσβΠφʔͷר͖ࠐΈྗʹ༏ΕΔ • ٯʹσβΠφʔʹϚΠϯυνΣϯδ͕ٻΊΒΕΔ • ΦʔϓϯͳઃܭࢥΛཧղ্ͨ͠ͰͷಋೖΛ
ݸਓతʹFramer Webʹظͯ͠·͢
ϦϑΧϜ σβΠφʔɾΤϯδχΞΛ ੵۃืूதͰ͢ ɾUXΤϯδχΞ ɾόοΫΤϯυΤϯδχΞ ɾUIσβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ