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
240
コードを書きながらデザインする意味と効果 / 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
770
ユーザーと向き合いながらつくる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
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3k
セブンデックス カルチャーブック
sevendex
0
1.7k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
870
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Why Our Code Smells
bkeepers
PRO
335
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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σβΠφʔ ɾάϥϑΟοΫσβΠφʔ ɾϓϩμΫτϚωʔδϟʔ