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

Overlay is a plugin that helps designers and developers around the globe to 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 Figma.

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

Then, I converted it into a Figma Component. Overlay only allows to export Figma Component.

Here the result :

Our card, designed in Figma

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 Figma layout (Frames, groups and layers) will be converted into code (Html tags like divs, p, input etc..).
2. The names you use in Figma, 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, using Figma Auto-layout contains :

1. The top “Article image”, toggled as “exportable” in Figma to let Overlay generate a <img> tag.
2. A “Article preview” auto-layout vertical frame with :

• A title named “Title”
• A subtitle named “subtitle”
• An “Author infos” auto-layout horizontal frame with the “Author avatar” and “Author name”

To check my component structure, you can visit the component Figma file here.

Here is how my layout looks in Figma. Note that every layer, group or frame 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 frame named “Frame 2”, will not be understandable for a developer reading only code lines. Let’s give it a business related name, like “Article preview”.

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

For text containers, I used an auto-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 Figma. 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 Figma 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
• 1 text color
• 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 :

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 app

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 app

You are Done !

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

Here is the source file of the card, just duplicate it to be able to edit, then export it yourself with your Overlay plugin.

And here is a Sandbox to read the code :

If you need further info about how to setup your codebase to Start with React (SCSS or Styled Components) 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 !