Design to clean code.

Transform your design components into clean React, Vue and HTML components.

How it works ?

Overlay is a plugin to transform your Figma components and Sketch Symbols into clean and reusable React/Vue/HTML code.

Watch Figma demo

Watch Sketch demo

Features

Integrated to your favorite design tool Sketch, Overlay helps designers produce more consistent websites and developers integrate code way faster, and pixel perfect.

Keep your workflow

Overlay is a plugin integrated into your favorite design tool so you don’t need to change your usual design workflow. Just accelerate it.

Code faster

Overlay generates code in ReactJS, Vue.js and HTML/CSS that developers can actually reuse and are happy reusing it :)

Improve consistency

Before generating code, Overlay helps designers with a consistency check on style variables such as colors, sizes or text styles.

Reusable Code

Forget about absolute positions and thousands of Html/CSS lines. Overlay transforms design into reusable and clean code that developers love.

This component is not image, inspect it your dev tools :)

STARTER

Delicious ramen meal

This popular dish, which remains a simple and nutritious way to eat noodles, is originally marked by Chinese culinary traditions. It was consumed in Japanese trading ports in the mid-19th century.

          import React from "react";
import styles from "./MealCard.module.scss";

export default const MealCard = () => {
 return (
   <div className={styles.mealCard}>
     <img
       alt="mealImage"
       className={styles.mealImage}
       src="/images/meal-image.png"
     />
     <p className={styles.mealType}>STARTER</p>
     <p className={styles.mealName}>Delicious ramen meal</p>
     <p className={styles.mealDescription}>
       This popular dish, which remains a simple and nutritious way to eat
       noodles, is originally marked by Chinese culinary traditions. It was
       consumed in Japanese trading ports in the mid-19th century.
     </p>
     <div className={styles.priceContainer}>
       <p className={styles.price}>5</p>
       <p className={styles.currency}>$</p>
     </div>
   </div>
 );
}

          .mealCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mealImage {
  width: 325px;
  margin-bottom: 15px;
  border-radius: 10px;
}
.mealType {
  @include desktop-avenir-black-small;
  color: $ice-blue;
  line-height: 25px;
  margin-bottom: 10px;
}
.mealName {
  @include desktop-avenir-black-regular;
  color: $text-primary;
  line-height: 27px;
  margin-bottom: 10px;
}
.mealDescription {
  max-width: 325px;
  @include desktop-avenir-light-regular;
  color: $text-primary;
  line-height: 22px;
  margin-bottom: 5px;
}
.priceContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.price {
  @include desktop-avenir-black-xxl;
  color: $text-primary;
  margin-right: 5px;
}
.currency {
  @include desktop-avenir-black-xl;
  color: $text-primary;
  line-height: 33px;
}

          <template>
  <div class="meal-card">
    <img
      alt="meal-image"
      class="meal-image"
      src="/images/meal-image.png"
    />
    <p class="meal-type">STARTER</p>
    <p class="meal-name">Delicious ramen meal</p>
    <p class="meal-description">
      This popular dish, which remains a simple and nutritious way to eat
      noodles, is originally marked by Chinese culinary traditions. It was
      consumed in Japanese trading ports in the mid-19th century.
    </p>
    <div class="price-container">
      <p class="price">5</p>
      <p class="currency">$</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "MealCard"
};
</script>

<style lang="scss" scoped>
.meal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.meal-image {
  width: 325px;
  margin-bottom: 15px;
  border-radius: 10px;
}
.meal-type {
  @include desktop-avenir-black-small;
  color: $ice-blue;
  line-height: 25px;
  margin-bottom: 10px;
}
.meal-name {
  @include desktop-avenir-black-regular;
  color: $text-primary;
  line-height: 27px;
  margin-bottom: 10px;
}
.meal-description {
  max-width: 325px;
  @include desktop-avenir-light-regular;
  color: $text-primary;
  line-height: 22px;
  margin-bottom: 5px;
}
.price-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.price {
  @include desktop-avenir-black-xxl;
  color: $text-primary;
  margin-right: 5px;
}
.currency {
  @include desktop-avenir-black-xl;
  color: $text-primary;
  line-height: 33px;
}
</style>

Why Overlay is a better design-to-code tool ?

Overlay 2020

Overlay 2021

Competitors

Match your needs

Overlay can be used for different contexts and purposes. Be a better designer, code faster, or/and avoid waste and bring consistency to your apps.

Dev/Design agencies

Implement the most effective design-to-dev worflow for your teams. Ship projects much faster and use this precious time to improve quality (animations, SEO, perf..etc)

Freelancers

Become a "designer that codes". Provide more value to your clients and ship your projects faster. Start making more money !

Companies

Focus on business value.

You don’t want to waste your employees’ time on web integration ? Use Overlay to generate all your components, then just focus on you complex business value.

They loved it

Overlay has already helped designers and developers around the globe to make amazing apps faster than ever. See what they said about it.

It is super fast. I did one page in 30 minutes that I would have developed in a day without Overlay.

Ivann, Lead Developer @LegalPlace

I developed my React components 2 times faster on my project, and with zero inconsistencies. Now I spend time focusing on my client's business logic.

Charles, Developer @Theodo

As a designer, it helps me produce more consistent design. It is exciting to produce code directly and see our product evolve faster.

Anthony, designer @ChooseMyCompany