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.2k
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
220
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.4k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.2k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
750
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.5k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.6k
不確実さとうまく付きあうサービス開発
dex1t
3
2.5k
Other Decks in Design
See All in Design
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
550
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
510
Arborea Art Book
thebogheart
1
290
Первая беседа о Карте реализации историй
ashapiro
0
290
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
Yahoo Newsletter Clicker Template
xuechunwu
0
290
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
620
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
210
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
Featured
See All Featured
KATA
mclloyd
29
14k
Fireside Chat
paigeccino
34
3k
A Tale of Four Properties
chriscoyier
156
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Typedesign – Prime Four
hannesfritz
40
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Code Review Best Practice
trishagee
64
17k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Faster Mobile Websites
deanohume
305
30k
GraphQLとの向き合い方2022年版
quramy
43
13k
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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ