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.1k
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
210
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.3k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.7k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.2k
体験を売るためのサービスづくり
dex1t
3
700
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.5k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.4k
不確実さとうまく付きあうサービス開発
dex1t
3
2.5k
Other Decks in Design
See All in Design
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
740
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
Product-Writing
aguringo
6
2.8k
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Web 組版の課題とその解法
yamatoiizuka
0
110
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
リリース1ヶ月後で機能をなくした話
hinofu
1
700
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Web development in the modern age
philhawksworth
202
10k
Become a Pro
speakerdeck
PRO
11
4.5k
It's Worth the Effort
3n
180
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Rails Girls Zürich Keynote
gr2m
91
13k
Navigating Team Friction
lara
178
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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ