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
React Sketch.appでデザインガイドラインを作ってみた
Search
sawa-zen
April 24, 2018
Programming
7
2.3k
React Sketch.appでデザインガイドラインを作ってみた
リポジトリのURLはこちらです
https://github.com/sawa-zen/style-guide
sawa-zen
April 24, 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
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
390
Birthday Driven Development
sawa_zen
0
520
Other Decks in Programming
See All in Programming
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
PRレビューのお供にDanger
stoticdev
1
230
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
技術を改善し続ける
gumioji
0
120
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
4k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
Open source software: how to live long and go far
gaelvaroquaux
0
660
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.3k
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
320
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Bash Introduction
62gerente
611
210k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Speed Design
sergeychernyshev
27
810
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building an army of robots
kneath
303
45k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Typedesign – Prime Four
hannesfritz
40
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Transcript
React Sketch.appͰ σβΠϯΨΠυϥΠϯΛ ࡞ͬͯΈͨ גࣜձࣾϝϧϖΠ ϑϩϯτΤϯυΤϯδχΞ @sawa-zen @sawa-zen (2018/4/22) Roppongi.js
@sawa-zen ॴଐɿגࣜձࣾϝϧϖΠ ৬छɿϑϩϯτΤϯυΤϯδχ Ξ/ΠϯλϥΫγϣϯσβΠφʔ Three.js React SketchApp Blender YouTuberେ͖ @sawa-zen
(2018/4/22) Roppongi.js
React Sketch.appͬͯͬͯΔʁ @sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͱ • ReactͰSketchσβΠϯΛѻ͑Δπʔϧ • airbnbࣾͷOSS • SketchϓϥάΠϯΛॻ͖ग़ͤΔ • ه๏΄΅ReactNa0veͱಉ͡
@sawa-zen (2018/4/22) Roppongi.js
import React from 'react'; import { View, Text, render }
from 'react-sketchapp'; export default function(context) { render( <View> <Text>Sample Text</Text> </View>, context.document.currentPage() ); } @sawa-zen (2018/4/22) Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴ @sawa-zen (2018/4/22)
Roppongi.js
React Sketch.app͍͍ࣄͩΒ͚!! • ίʔυͳͷͰόʔδϣϯཧͰ͖ͯ࠷ߴ • σβΠϯमਖ਼ίʔυϨϏϡʔͰ͖ͯ࠷ߴ • ΤϯδχΞͰσβΠϯमਖ਼Ͱ͖ͯ࠷ߴ શ෦͜ΕͰॻ͚͍͍ͷʹ @sawa-zen
(2018/4/22) Roppongi.js
΄Μͱʹʁ @sawa-zen (2018/4/22) Roppongi.js
React Sketch.appͦΜͳ͘ͳ͍!! • σβΠφʔJSΛ֮͑Δඞཁ͕͋Δ • σβΠϯͱΫϥΠΞϯτͷೋख࣮ؒ • ײతʹσβΠϯͰ͖ͳ͍ @sawa-zen (2018/4/22)
Roppongi.js
શͯReact͠ΜͲ͍... ! ! @sawa-zen (2018/4/22) Roppongi.js
σβΠϯΨΠυϥΠϯ͚ͩͳΒ...ʁ @sawa-zen (2018/4/22) Roppongi.js
@sawa-zen (2018/4/22) Roppongi.js
ReactͰॻ͍ͯΈ·ͨ͠ @sawa-zen (2018/4/22) Roppongi.js
ReactͰΨΠυϥΠϯΛ ࡞ͬͯΈͯྑ͔ͬͨ͜ͱ @sawa-zen (2018/4/22) Roppongi.js
① ελΠϧ͕ίʔυͱͯ͠ڞ༗Ͱ͖Δ nodeϞδϡʔϧͱͯ͠ڞ༗͢ΕελΠϧΛίʔυ ͯ͠ѻ͑Δ • color • font-size, font-weight •
margin, padding • etc... @sawa-zen (2018/4/22) Roppongi.js
② ϓϥάΠϯͱͯ͠ڞ༗Ͱ͖Δ ϓϥάΠϯΛ࣮ߦ͢Δ͚ͩͰҎԼ͕̎ͭηοτͰੜ Ͱ͖ΔͨΊɺϓϩδΣΫτΛލ͍ͩσβΠϯͷ౷ ҰԽΛਤΓ͍͢ɻ • ελΠϧΨΠυϥΠϯ • γϯϘϧ @sawa-zen
(2018/4/22) Roppongi.js
③ ࡞Γ͍͢ ܁Γฦ͠ViewΛฒΔ࡞ۀ͕ଟ͍ͷͰίʔυͰදݱ ͢Δํ͕͍ @sawa-zen (2018/4/22) Roppongi.js
④ ແବͳγϯϘϧ͕Βͳ͍ ޮԽͷҝʹ࡞͍ͯͨ͠γϯϘϧ͕ίʔυʹஔ Ͱ͖Δ @sawa-zen (2018/4/22) Roppongi.js
՝ • ίϯϙʔωϯτͷࡉ͔ͳσβΠϯ͔ΒΤϯδχ ΞͰ͍͠ • σβΠφʔ͞Μͱີͳίϛϡχέʔγϣϯ͕ඞਢ • ݁ہJSΛσβΠφʔ͞Μ৮ΔՄೳੑ͕͋Δ • ͦͦ࡞ͬͯΔ༨༟͕ແ͍ࣄ͕ଟ͍
@sawa-zen (2018/4/22) Roppongi.js
ͰखԠ͑͋ͬͨ @sawa-zen (2018/4/22) Roppongi.js
ͬͱϓϩμΫτͷUIΛ ྑ͍͖͍ͯͨ͘͠ʂ @sawa-zen (2018/4/22) Roppongi.js
࣮ۀʹಋೖ͢ΔͨΊʹʁ @sawa-zen (2018/4/22) Roppongi.js
UIͷ৴པੑ্Λ୲͏ ৽෦ॺͷര͔͠ͳ͍ʂ @sawa-zen (2018/4/22) Roppongi.js
Site Reliability EngineeringʢSREʣ ↓ UI Reliability Engineering ʢUREʣ @sawa-zen (2018/4/22)
Roppongi.js
ฐࣾʹ৽෦ॺઃཱݕ౼ ͓ئ͍͠·͢ʂ ! @sawa-zen (2018/4/22) Roppongi.js
ϝϧϖΠͰ #z-youtuber ʹ ೖΓ͍ͨํืूͯ͠·͢ @sawa-zen (2018/4/22) Roppongi.js
GithubϦϙδτϦ h"ps:/ /github.com/sawa-zen/style-guide @sawa-zen (2018/4/22) Roppongi.js