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

Overlay
Overlay
Apr 7 · 5 min read
Image for post
Image for post

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.

  • 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 :

Let’s try a famous design-to-code tool with this component
Let’s try a famous design-to-code tool with this component
Image for post
Image for post

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.

  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.

Image for post
Image for post
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

Image for post
Image for post
1st step: make a “Symbol” in Sketch

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)
Image for post
Image for post
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.
Image for post
Image for post
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
Image for post
Image for post
Quality check 2: this component uses new style variables. Let’s give them a name, using CSS naming convention like camelCase or kebab-case
  • Once every class name is correct, the layout is good, and variables are shared
  • Just click on export in your project. You’re done!
Image for post
Image for post
Done! Your component is exported :)
  • Now, your component is shared in your project in Overlay App. Just copy-paste the code.
Image for post
Image for post
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)
  • Pixel perfect
  • Using variable from your shared stylesheet
  • Using Flex (Direction, margin/padding, Align items/Justify content, etc..)

Check it out!

Image for post
Image for post
Image for post
Image for post
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 👇👇

Design + Sketch

The best collection of articles, tips, tutorials, and…

Thanks to Richard CASETTA

Overlay

Written by

Overlay

Turn your sketch into reusable ReactJS & Vue.js production code.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Overlay

Written by

Overlay

Turn your sketch into reusable ReactJS & Vue.js production code.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store