Overlay

    Lifetime deal

    Turn your Figma components into clean React, Vue, Html code. No dependencies, just get the code!

    Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code, with a simple Plugin.

    Overlay Includes:

    -Clean and reusable code using Flex attributes
    -Code Props editable
    -A Minimum CSS lines
    -All code using style variables
    -SCSS, Styled Components supported (a lot more to come)
    -No dependencies, just copy-paste the code

    Get access to Overlay today!

    TL;DR

    Helps designers and developers convert their Figma components
    Clean and reusable code using Flex attributes
    SCSS, Styled Components supported
    No dependencies, just copy-paste the code

    At-a-glance

    Overview

    Overlay
    Overlay
    Overlay
    Overlay

    Plans & features

    Deal terms & conditions

    • Lifetime access to Overlay
    • You must redeem your code within 60 days of purchase
    • All future plan updates
    • Please note: this deal is not stackable
    award-badge

    60 day money-back guarantee. Try it out for 2 months to make sure it's right for you!

    From the founders

    April 28, 2021

    Hey, awesome Sumo-ling community!

    So glad to be here!

    I am Côme (pronounce "Cowm" 😊). I’m French, based in Paris, and I created Overlay, after 2 years of hard work with my teammate and CTO Kévin Jean.

    We created Overlay to help designers and developers speak the same language and save hours of design integration.

    Our mission with Overlay is to automate design-to-code workflows.

    And we thought components in Figma are a very good start. They are small, well structured, and good news, developers also use components.

    Also, the biggest challenge to auto-generate code from design tools like Figma is to make it clean and match with developers' constraints.

    This has been our day and night challenge over the last months! Start with small pieces, but generate a crazy CLEAN and REUSABLE code that developers will actually love to reuse.

    Now Overlay is available for Figma!

    You can start creating a project (choose React, Vue.js, Html + SCSS or Styled component), and export your first components.

    A lot more frameworks are going to be released this year (React Native, Angular, Svelte, Flutter, Tailwind)!!

    I wanted to showcase some of the most commonly asked questions and resources our users ask for:

    The most important, our Overlay Playground for Figma, THE file you need to train with first component exports and get all the answers you need about how to export perfect pieces. Just duplicate it!

    Does Overlay support the latest Auto-Layout and Variants features of Figma? Yes of course, and we HIGHLY recommend using them.

    Does Overlay support CSS librairies like Taillwind or Bootstrap? Not for now but we are coming to it this year. Now we support CSS, SCSS, and Styled Components.

    How does Overlay manage styles? You can easily export your Figma styles (Colors, Fonts) into your Overlay Stylesheet. This way, the generated code will be using these variables, and not hardcoded values.

    How does it handle Flexbox vs position: absolute? This is the biggest challenge of design-to code-tools. Overlay is based on Flexbox by default. And it will be generating higher quality code when users use Figma Auto-Layout constraints to make truly responsive components.

    Any other questions? Let’s chat here! Or send us messages to contact@overlay-tech.com

    All the best, and thanks in advance for all your support!

    Côme

    Read more
    Questions
    Reviews

    Questions & Reviews

    Sign up

    All our deals are time-sensitive! Make sure you don't miss any of our awesome limited-time offers.