Hacker News new | comments | show | ask | jobs | submit login

Do I understand the use-case correctly ? :

1) Create designs in sketch (mainly core components)

2) Code those designs in React that will generate the React translated version of the sketch

3) Use the react generated sketch to build non-core component designs in sketch . .

4) When the core design changes, update the react component to match the new designs

5) All the other components in the sketch will automatically start using the new updated sketch component




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/

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.


This is how I'm starting to understand it as well but it took a lot of reading comments here and in Designer News to get there.


This is how I understood it as well




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: