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
Cursorハンズオン実践!
eltociear
2
1.2k
AI Agent 時代的開發者生存指南
eddie
4
2.1k
CSC305 Lecture 09
javiergs
PRO
0
310
Go言語はstack overflowの夢を見るか?
logica0419
0
610
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
理論と実務のギャップを超える
eycjur
0
180
CSC305 Lecture 10
javiergs
PRO
0
260
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimizing for Happiness
mojombo
379
70k
How GitHub (no longer) Works
holman
315
140k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Gamification - CAS2011
davidbonilla
81
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Context Engineering - Making Every Token Count
addyosmani
8
300
Making Projects Easy
brettharned
120
6.4k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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