Overlay

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

4.50 stars
4.50 stars
34 reviews
Sold out

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

too long didn't read
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

Overlay

Lifetime access
  • 3 seat
  • Unlimited component exports
  • Unlimited Style variables
  • Unlimited projects
  • All frameworks: React, Vue, Html and more coming.
  • All UI Frameworks: SCSS, Styled Components, CSS..
  • All Overlay features and future updates

Overlay

FounderFounder
Côme Sabran

Updates from Overlay

April 28, 2021

Posted Feb 9, 2023

Questions
Reviews

Questions & Reviews

Log in to ask a question
Log in
Showing 5 of 49 questions

Q: Product needs work, needs the ability to export animations and effects.

Their support is lack luster. I am refunding.

digitalstemcellSep 3, 2023
See detail
Share
Helpful?

Q: Hello, is it possible to export to Tailwind ?

Has it been implemented since ?

do_obFeb 24, 2023
See detail
Share
Helpful?

Q: Is this tool still being supported?

I haven’t seen the devs comment in a while.

jamoooretNov 3, 2022
See detail
Share
Helpful?

Q: Hey @Côme_Overlay, I asked these in support.

I wanted to restate here and add to them – because these questions are for a current, time-sensitive WordPress/Divi website project:

1. It seems Overlay is not truly WYSIWYG. Whether as component or variant, my completed Figma design (for a website) doesn’t translate properly at all. Whether in Overlay preview or rendered test HTML output (with the CSS in <style> tag inside HTML head), many boxes seem shifted many pixels to the right. This despite the attribute not being set in Figma. Also, none of the embedded images display, with placeholders in their place. This contradicts the AppSumo screenshot showing a project that displays the image. I thought the styles would be proper with elements centered to web design best practices. Maybe I am doing something wrong. Is there a reason this is happening, and if so, how do I prevent it?

2. Even if #1 keeps happening, how do I visually edit the HTML inside the Overlay editor before I actually copy the code to an HTML file? The way Overlay is designed has me under the impression I could change the rendered HTML and CSS by dragging elements like in Figma. This is not the case. I find no ability to drag and drop.

3. SCSS for fonts and colors appears not to work properly in a straight copy. Some colors display, others don’t. Fonts don’t work at all; they default to browser default (Times New Roman or the likes). How do we make them work?

4. I expect that settings, such as tagging fonts and font colors as class names, can be changed after I am first asked about them. This also has not been the case. I would like to change this on the fly after creating an HTML output so I can more easily diagnose any future issues that may arise.

These issues are VITAL. I feel they hold us back from completing this project ahead of time. I am hopeful Overlay can serve its promoted purpose.

@Côme_Overlay, I’d much appreciate it if you could answer these questions. Pretty sure I’m not the only one.

Thanks!

its4us3Sep 28, 2022
See detail
Share
Helpful?

Q: Hi I try to reach you from chat inside the web but after 10 days, no response.

So here I am.

First, You have nice app! Congrats.

But, I have questions regarding variant (not component) export.

When I try to export variant. it's always show 'Could not validate your component'. And I use your sample file. not my file or someone else. It's yours.

So any explanation to export variant will be great. I know you're not fulltime on this plugin. but when you release product that user need to pay before use it, user expect a support from you.

thanks

sunupfSep 12, 2022
See detail
Share
Helpful?
See all questions

Sign up

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