How to create a card component from Sketch to React or Vue.js with Overlay

Overlay is a plugin that helps designers and developers around the globe convert their design components into clean React, Vue.js or HTML/CSS code components.

Before starting this tutorial, make sure you have created an Overlay account, created a new project in Overlay app and downloaded Overlay plugin.

For this example I created a project called “My project”, in React + SCSS.

Create a new project in Overlay app

Ready ?

Step 1 : Design an awesome card component in Sketch.

For this tutorial I decided to make an article card in Sketch. I used a nice illustration designed by Pablo Stanley and downloaded with the new Sketch plugin Blush.

Then, I converted it into a Symbol. Overlay only allows to export Symbol elements.

Here the result :

Our card, designed in Sketch

Step 2 : Check that your layout is correct.

Design-to-clean code is not magic.To generate readable code, design has to embrace developers constraints. Layout is one of the biggest.

Overlay follows simple principles :

1. Your Sketch layout (groups and layers) will be converted into code (Html tags like divs, p, input etc..).
2. The names you use in Sketch, will be converted into classnames
3. Overlay uses flex CSS properties like padding and margin to position layers. In the case of an overlapping element, it will use an absolute position.

In this case, let’s make it simple. My component contains :

1. The top image. I used a mask to resize the image. Then i toggled the “make exportable” Sketch option to let Overlay generate a <img> tag.
2. A content group with

• A title named “Title”
• A description named “Description”
• An Author container with the Author Image and Author Name

3. A background, which is the global container of all elements.

To check my component structure, you can download the Sketch file here

Here is how my layout looks in Sketch. Note that every layer and group has a readable and business related name. Indeed, these layers will be used as classnames. It is important to make them readable for developers.

For example, a group named “Group copy 4”, will not be understandable for a developer reading only code lines. Let’s give it a business related name, like “Content”.

Article card layout in Sketch. Look how my layers are renamed.

For text containers, I used a fixed height to make sure it starts a new line if the text gets longer. Overlay will convert fixed heights into a CSS max-width .

In other cases, like for a button, I can use an auto-width in Sketch. Overlay will generate no width (which means the text into my button will stay on a single line, regardless of its length.)

Auto height in Sketch generates a max-width in CSS

Step 3 : Generate clean code.

Now it’s time to generate code.

Select your component, open Overlay, then click “Export”

Overlay plugin export screen

If your layers are not correctly named, Overlay will help you first rename them, directly into the plugin.

Before exporting your component and as it is your first export, and your project is empty, Overlay will ask you to add your style variables !

It looks like this in the plugin :

Stylesheet feature in Overlay plugin

In this Card, Overlay has detected :

• 2 colors
• 2 text colors
• 2 typos

Let’s give them a name so that the generated code can use real variables instead of hardcoded values. (you can also ignore this step)

Here is how to add variables into your Overlay Stylesheet :

Click on “add” to export these variables into your stylesheet.

Great ! Now you can click on “Continue” to generate your React code.

Once your component is exported, go to your project in Overlay app and see the React and SCSS Code.

Here is the React part :

React code generated by Overlay

Note that : Every classname comes from the name given in Sketch.

And here is the SCSS part :

SCSS Code generated by Overlay

Note that : The component uses flexbox and all the style variables you have given.

In the tab “Content” you can also edit content and see how you component behaves. For example, try typing a longer title in the and see what happens.

In the Tab “Assets”, you can get all the images related to this component :

Assets feature in Overlay

If you go back to your Project page, you will see a tab called “Stylesheet” where you can find all your variables, and can easily copy it into your code base.

Just like that :

Stylesheet feature in Overlay

You are Done !

You have just created a great Card in React using CSS best practices, ready to go to production :)

And what’s more, here is the code in a public sandbox, just test it yourself :

If you need further info about how to setup your codebase to Start with React or Vue.js and Overlay, you will find plenty off tips in our developers Documentation

Then, learn how to make more complex components, like real inputs (oh yeah !), check the designer documentation.

Join the design-to-code movement with Overlay !