Re:Painting with Code: Introducing our new open source libra...
by joekim on Wednesday April 26, 2017 @07:28PM
(#14207938)
Here's my variation:
1) Using a text editor like Visual Studio Code, write core components in react-primitives. This code can be largely the same as your real react-native code with all it's handling of layout and internationalization.
3) Use react-sketchapp to transform your core components in react-primitives to sketch symbols. If you have a large design system and support multiple languages, then this will save you a lot of time as the number of combinations of layout, language and potential input values are explosive.
4) Use sketch to design your new feature. Use sketch symbols to quickly pull in core components. If you need to create a new core component go back to step 1. With all your fancy tooling, it can be as fast as 1 minute to build a new page.
5) When core components change, go back to the "source of truth", the react-primitives code and modify that. Re-run react-sketchapp. Now all sketch files that depend on that core component will be automatically updated because of updated sketch symbols.
1) Using a text editor like Visual Studio Code, write core components in react-primitives. This code can be largely the same as your real react-native code with all it's handling of layout and internationalization.
https://github.com/lelandrichardson/react-primitives/
2) Create a library of core components. In aggregate, this library is your DLS (Design Language System)
http://airbnb.design/building-a-visual-language/
3) Use react-sketchapp to transform your core components in react-primitives to sketch symbols. If you have a large design system and support multiple languages, then this will save you a lot of time as the number of combinations of layout, language and potential input values are explosive.
http://airbnb.design/painting-with-code/
4) Use sketch to design your new feature. Use sketch symbols to quickly pull in core components. If you need to create a new core component go back to step 1. With all your fancy tooling, it can be as fast as 1 minute to build a new page.
https://twitter.com/karrisaarinen/status/849733176150773761
5) When core components change, go back to the "source of truth", the react-primitives code and modify that. Re-run react-sketchapp. Now all sketch files that depend on that core component will be automatically updated because of updated sketch symbols.