How I code React/Vue.js apps every day straight from Sketch and Figma

TLDR : Watch this short demo video 👉 https://www.youtube.com/watch?v=ZEK_GU8Qvls

Introduction

Hello everyone. I am Côme, a UX/UI designer and Overlay CEO. With Kévin, Overlay CTO, we have been studying for two years design-to-development workflows in web projects. This article explains what we have learned and how we started solving one of its biggest pain points, as stated below.

Every design-to-code or handoff tools on the market fight the same problems.

• Design integration takes time (30% to 70% of a website development project).
• Designers introduce inconsistencies (wrong colors, fonts, sizes..).
• Developers, mainly because of many guesswork, can make mistakes.

Most of the time, product teams use handoff tools as Invision or Zeplin to helps developers integrate design from Sketch to production, and avoid guesswork. Developers can inspect designs and traduce them into clean and reusable code using modern frameworks as React, Vue.js, or Angular. It reduce guesswork, but still, it’s a long and manual process, and doesn’t avoid human mistakes.

More recently, design-to-code tools like Anima, BuilderX, or Laska have shipped Sketch compilers to try to automate design integration. It’s great to see that designers get closer and closer to production but we rarely see these tools used in big and complex projects.

What’s missing? I asked many developers, the answer is clear: code is not reusable and quality is low.

Why developers find it hard to use code produced from design-to-code tools?

1. (Re)usability: everything is in position: absolute.It makes the design pixel perfect but not suitable for dynamic content or further modifications.
2. Performance/readability: these tools produce too many lines of code. It gets hard for developers to read and understand the code, and can lower performances.
3. Maintainability: the code is poorly refactored. Variables are hardcoded and there are many redundant classes. It makes changes very painful. Imagine changing a hundred times a background-color: rgba(32, 120, 231, 1) just to implement a new blue!
4. Readability/naming: class names are often difficult to understand. What do understand if you read this? .u20ac 🤔.

Let’s try a famous Sketch design-to-code tool with this card component :

As you can see, the code generated is extremely long for a simple component, it can’t be used at all.

Our conclusion is simple: the next big challenge is CODE QUALITY.

For 2 years of researches and live tests, Kévin and I, founders of Overlay, have been working hard to find solutions to these problems. Here is what we came with.

Let me first introduce our 3 strong believes.

1. To win this battle, we have to start with little pieces: components (Symbols in Sketch). In complex and long projects, design integration is done piece by piece, using reusable components, easy to maintain. It happens the same in a Sketch file. Let’s start with this!
2. Clean design produces clean code: code quality should start with design quality. We believe that most of the time spent on guesswork and integration errors is due to design mistakes. To produce code straight from design files, we need first to ensure its quality right inside the design tool.
3. Designers and developers have to share standards to work together. They use saved styles (colors, fonts, line heights, shadows..), margin grids, and more. To avoid guesswork, designers should be able to share these standards with developers and have a common stylesheet.

Based on these strong believes, we have built a tool to transform Sketch components (Symbols) into React/Vue.js reusable and clean code.

What is Overlay? Overlay is a Sketch plugin. It communicates with a compiler and renders components on a web platform.

Introducing Overlay ⭐️

Let’s take the same component and export it with Overlay

1st step: make a “Symbol” in Sketch

1. It all starts with a consistency check

Before exporting a component and generate code from Sketch with Overlay, the designer has to follow these steps:

• Step 1: download Overlay Plugin, and create a project. Let’s do it with a project named “MediumTest” and set-up in React
• Step 2: group layers according to their directions (horizontal or vertical)

Here is how I grouped the layers according to their direction, and renamed them for readability

• Step 3: Select the component > open the plugin
• Step 4: name layers with human-readable names. Overlay uses them to create class names.

Quality check 1: class names. Here 2 layers have their Sketch default names. Let’s give them more generic names, like “card label” for the orange label.

• Step 5: name and share style variables so the generated code uses them instead of hardcoded values

Quality check 2: this component uses new style variables. Let’s give them a name, using CSS naming convention like camelCase or kebab-case

2. Export Code

• Once every class name is correct, the layout is good, and variables are shared
• Just click on export in your project. You’re done!

Done! Your component is exported :)

• Now, your component is shared in your project in Overlay App. Just copy-paste the code.

Here is the component preview page where users can: copy the code Html/CSS, download assets and edit the content to test the component (with a longer title for example)

3. Done. You have created a React or Vue.JS component!

• Pixel perfect
• Using variable from your shared stylesheet
• Using Flex (Direction, margin/padding, Align items/Justify content, etc..)

Check it out!

Here is an extract of CSS generated with Overlay

Conclusion

We still have a lot to do (manage responsive media queries, states, props etc..) but strongly believe that we can empower designers to produce production-ready code from their favorite tools (Sketch, Figma, Adobe XD..etc) and help developers focus on business logic and advanced features.

Today, Overlay helps our users to ship design in production 3 times faster, but we can do much more and need your help to do so!

Try it here, for free 👇👇

Overlay | Design production-ready code components