The secret to beautiful, low cost, fast React solutions.
The problem:
A client shows up saying “I want to develop a great, beautiful, cheap solution and I want it now”. Does it sound similar to you?
Have you ever had to develop a solution under lots of pressure but not even the designs aren’t ready yet?
Are you having trouble integrating development and design teams or balance time, cost and value given to stakeholders?
I have. I had been struggling with these challenges, searched and tested lots of different solutions with little real improvement.
I’ve seen a lot of professionals struggling with these same challenges and I believe we have found a good solution to these problems, let me tell you about it..
What we did:
After having tested lots of magical “convert designs to react code” solutions which none work completely, instead of discarding them, we asked ourselves if we can partially use these tools to streamline our work in a way that significantly reduces the amount of time from design to code.
We wanted to integrate better our design and development teams, so we started from UI standards, searching from those that have:
- Sketch-compatible components
- React-compatible development components
So we found different ones, being the most famous Material-UI which I’ll use as an example.
Here is the Material-UI React-compatible development components: https://material-ui.com/components/box/
And here the Sketch-compatible components: https://material-ui.com/discover-more/related-projects/#design-resources
Now, the interesting part, if we look at these components, they look the same in sketch and in react by default, so if the design and development teams start from these components they start from the same baseline, they “speak the same language”, which makes any changes to these components easier to understand.
Then when the design team makes visual changes to these components, the development team only has to re-make the changes they do the difference, aka the delta, instead of creating new components from zero.
Which is good, it reduces a lot of development time, but also reduces a lot of design time because they start with a design guideline and pre-built components. Instead of thinking “how should my component be?” they now think “Which ones of these components satisfy this particular user need?”, making their work a lot faster.
But still, development takes a lot more time than design. Isn’t there a way to improve this workflow even more? Yes there is!, using tools like https://www.invisionapp.com/
By uploading the sketch designs to Invision, you can inspect them. And inside the inspector there is a “CSS” option.
This shows you the changes made to the original component in sketch, which is the original component in react, since they look the same.
Then the development teams only have to copy the CSS and make minimal adaptations to the react components to achieve the same look & feel.
This reduces even more the development time, my estimate is that we gain a 25 to 35% overall reduction in time for every project we make with this technique.
Conclusion:
Using invision, Sketch-compatible & React-compatible libraries is a great way to streamline our work! We have reduced the design and development time between 25 to 35% allowing us to make great, beautiful and cheaper solutions for our clientes.
Our clients and stakeholders are happy and satisfied, so are we, the design and development team.
We strongly recommend you to try this work scheme and tell us your results!
