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.4k
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
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
34
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
sawa_zen
5
1.7k
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
830
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
440
Birthday Driven Development
sawa_zen
0
550
Other Decks in Programming
See All in Programming
Go言語はstack overflowの夢を見るか?
logica0419
0
610
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
260
CSC305 Lecture 10
javiergs
PRO
0
260
Pythonに漸進的に型をつける
nealle
1
130
品質ワークショップをやってみた
nealle
0
640
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
モテるデスク環境
mozumasu
3
1.3k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
YesSQL, Process and Tooling at Scale
rocio
173
15k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for humans not robots
tammielis
254
26k
Documentation Writing (for coders)
carmenintech
75
5.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.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