3 ms·
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
by joekim 9y ago
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.
https://github.com/lelandrichardson/react-primitives/ 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/ 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/ 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 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.