If "designer tools" had the
file format
".js" ?
I'm Sanket
GeekyAnts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4030519/logo-icon-lg__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4090627/pasted-from-clipboard.png)
We are the ones behind
NativeBase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4031662/front-page-icon.png)
@sanketsahu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4853642/580b57fcd9996e24bc43c53e.png)
Usual Workflow
UI
Conversion
Graphic
Design
Business Logic
Designers
Developers
Gap
UI
Conversion
Graphic
Design
Business Logic
Let's bridge this gap...
Graphic
Design
Business Logic
Bi-directionally!
Graphic
Design
Business Logic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4859195/Pasted_image_at_2018_04_27_04_08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4888567/Screen_Shot_2018-05-07_at_8.42.48_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4858975/Design___Code.png)
REACT NATIVE
SUPPORTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4858946/react_native_icon.png)
Let's BUILD a music app
Let's design a music app
Curious about the <code />?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4888625/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4888648/Screen_Shot_2018-05-07_at_8.56.32_PM.png)
Header
<Header />
Artboards
React Native Screens
React Native Component
Symbols
<View/> and <Svg/>
Shapes
Text
Stylesheet.create({})
Styles
React Navigation
Prototyping
Designer
Developer
<Text/>
Responsive
Fluidic Designs for your app
Flex Layout
Auto-grow
Fixed & Fluid
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881527/Screen_Shot_2018-05-04_at_8.33.02_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881529/Screen_Shot_2018-05-04_at_8.33.12_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881531/Screen_Shot_2018-05-04_at_8.33.21_PM.png)
Components System
Reuse Code and Design like a Boss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881406/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881407/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881420/pasted-from-clipboard.png)
Symbols
Overrides
Library
Conditionals
Design for Custom States into one Single Screen
Platforms
Custom States
Orientation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881560/Screen_Shot_2018-05-04_at_8.40.18_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881566/Screen_Shot_2018-05-04_at_8.40.27_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4881569/Screen_Shot_2018-05-04_at_8.40.35_PM.png)
Share & Export
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4880379/share-img.png)
Design and Export Images
Live preview on device
But wait, will designers learn a whole new tool?
Not always...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4844938/sketchicon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4844940/react_native_icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4844395/BuilderX-Logo.png)
Sketch
React Native
BuilderX
Sketch Import
More on our roadmap...
Prototyping &
Animations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4849141/1_5-aoK8IBmXve5whBQM90GA.png)
Web support
Flutter
We dream to bring
Designers & Developers
on the same file...
Keeping two things in mind
Design without boundaries
Generate beautiful code
Team BuilderX
Download today!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4844432/BuilderX-Logo.png)
https://builderx.io
@BuilderXio
![](https://s3.amazonaws.com/media-p.slid.es/uploads/728242/images/4853642/580b57fcd9996e24bc43c53e.png)
React Europe 2018 - Final Draft - Detailed
By sanketgeekyants
React Europe 2018 - Final Draft - Detailed
- 528