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
230
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.5k
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
760
ユーザーと向き合いながらつくる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
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
240
Arborea Art Book
thebogheart
1
300
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
240
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
How to go from research data to insights?
mastervicedesign
0
180
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
680
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.8k
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.6k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
最速[要出典]アクセシビリティチェック
magi1125
2
130
実利の世界で、表現者である
kiyou77
3
110
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
How STYLIGHT went responsive
nonsquared
95
5.2k
Visualization
eitanlees
146
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
GitHub's CSS Performance
jonrohan
1030
460k
Building Your Own Lightsaber
phodgson
103
6.1k
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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ