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
デザインガイドラインを作るWebサービスを作っている話 / React Native Meet...
Search
sawa-zen
June 22, 2018
Design
1
380
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa-zen
June 22, 2018
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.6k
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
810
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.3k
Birthday Driven Development
sawa_zen
0
510
Other Decks in Design
See All in Design
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
170
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
クライアントワークにおける UXリサーチの実践
kozotaira
0
350
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
900
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
190
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
890
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
250
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
Featured
See All Featured
Done Done
chrislema
182
16k
Navigating Team Friction
lara
183
15k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Automating Front-end Workflow
addyosmani
1368
200k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Being A Developer After 40
akosma
89
590k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Statistics for Hackers
jakevdp
797
220k
Facilitating Awesome Meetings
lara
52
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
σβΠϯΨΠυϥΠϯΛ࡞Δ WebαʔϏεΛ࡞͍ͬͯΔ Merpay, Inc ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen ॴଐɿMerpay, Inc ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ͖
@sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͬͯ ͬͯ·͔͢ʁ @sawa-zen (2018/6/22) react-na5ve-meetup
react-primi*vesͱʁ • ϓϥοτϑΥʔϜຖͷAPIʹࠨӈ͞Εͣڞ௨Ͱ༻ Ͱ͖ΔΠϯλʔϑΣʔε • ҎԼͷrenderʹରͯ͠ಉ͡ίʔυͰView͕࡞ΕΔ • react-dom • react-na.ve
• react-sketchapp @sawa-zen (2018/6/22) react-na5ve-meetup
ػೳ • View: ϨΠΞτͷͨΊͷίϯϙʔωϯτ • Text: ςΩετͷͨΊͷίϯϙʔωϯτ • Image: ը૾ͷͨΊͷίϯϙʔωϯτ
• Touchable: ΠϯλϥΫγϣϯͷͨΊͷίϯϙʔω ϯτ • StyleSheet: ReactNa9ve ͷ StyleSheet ͱಉ͡ @sawa-zen (2018/6/22) react-na5ve-meetup
ఆ͠͏Δ࣮༻ྫ σβΠϯஈ֊ͰίʔυͰUIΛ࡞͠ ίϯϙʔωϯτΛΤϯδχΞʹڞ༗͢Δ @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
ͬͯΈͨ!! @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
ײ • ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ @sawa-zen (2018/6/22) react-na5ve-meetup
ײ • ෳࡶͳViewͷ߹एׯͷݟͨͷࠩҟ͕ؾʹͳΔ • σβΠφʔ͞Μʹ͜ͷίʔυॻ͔ͤΔͷࠅ • ܕఆٛϑΝΠϧ͕ແͯ͘ෆ҆ => C͚ͷϓϩμΫτʹ࣮༻తͰͳ͍ @sawa-zen
(2018/6/22) react-na5ve-meetup
ଞʹ༻్ແ͍ͷ͔ ! @sawa-zen (2018/6/22) react-na5ve-meetup
Ͳ͏͍͏༻్Ͱ͋Ε͑ͦ͏͔ʁ • ෳࡶͳViewΛඞཁͱ͠ͳ͍ • ݎ࿚͞Λඞཁͱ͠ͳ͍ • σβΠφʔ͞Μ͕ίʔυΛॻ͘ඞཁ͕ͳ͍ @sawa-zen (2018/6/22) react-na5ve-meetup
ۀޮԽπʔϧͰ͋Ε ͍͚ΔͷͰ? ! @sawa-zen (2018/6/22) react-na5ve-meetup
͔͜͜Β͕ຊ @sawa-zen (2018/6/22) react-na5ve-meetup
͜ΜͳΛ࡞Γ࢝Ί·ͨ͠ ελΠϧΨΠυϥΠϯΛWeb্Ͱ࡞Ͱ͖Δπʔϧ • SketchͷϓϥάΠϯͱͯ͠ViewΛॻ͖ग़ͤΔ • ΨΠυϥΠϯʹؔΘΔใΛjsonͰॻ͖ग़ͤΔ • Χϥʔ • ςΩετελΠϧ
• etc... @sawa-zen (2018/6/22) react-na5ve-meetup
@sawa-zen (2018/6/22) react-na5ve-meetup
DEMO @sawa-zen (2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱ͕ͯ͠Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘ѻ͑Δ @sawa-zen
(2018/6/22) react-na5ve-meetup
Կ͕ྑ͍ͷ͔ • σβΠφʔ͕GUIૢ࡞Ͱѻ͑Δ • jsonͱ͕ͯ͠Β͑Δ • ViewϥΠϒϥϦʹ੍ݶ͞Εͳ͍ • JSͰͳͯ͘ѻ͑Δ =>
react-primi-ves͕ແବʹͳΒͳ͍ʂ @sawa-zen (2018/6/22) react-na5ve-meetup
ࠓޙͷల • ֤ฤूػೳ • font-famiryύλʔϯ • marginύλʔϯ • border-radiusύλʔϯ •
jsonͷexport/importػೳ @sawa-zen (2018/6/22) react-na5ve-meetup