Overlay

Turn Figma components into clean and reusable React/Vue.js

55 followers

Turn Figma components into clean and reusable React/Vue.js

55 followers

•

•

Overlay helps designers and developers convert their Figma components into clean and reusable React, Vue.js and Html code. 💎 Flex attributes ⭐️ Props 👌 Minimum CSS lines 🖌 Style variables 💅SCSS, Styled Components 🔗 No dependencies, just copy-paste.

Launch tags:Design Tools•Productivity•User Experience

Launch Team

Fin Startups get Fin free for a year + 93% off Intercom

Promoted

Great product, I've been using it for a few months now. Do you think you will work on a Abstract integration at some point?

Report

5yr ago

Overlay

Maker

@julien_bleton good question ! It's not on the roadmap for the moment. We count on Figma which is by nature collaborative. But there is indeed a subject about syncing Overlay generated components and IDEs, to help devs get the last version of code easily, and avoid inconsistencies.

Report

5yr ago

Wireframe Components Kit

This looks really impressive, congrats! Some questions, and thanks for answering: 1. Are you planning to add support for SASS as well? The Vue framework we use uses SASS, and is not compatible with SCSS because of the API. 2. Can you generate links to see exported components so anyone can access the page, or can only paid subscribers access the web app to see this? 3. Is it required for a developer to generate the assets, or can I as a designer, just provide components that I've made in Figma? 4. Is Overlay using the latest Auto Layout (flexbox) API from Figma? 5. You mention background layers for components - Figma doesn't need background layers for background Fills. The component itself can have a Fill color (recommended method), thus eliminating the need for a background layer. Have you taken this into consideration, and does it translate correctly to Overlay? 6. I imagine you would want to normally use this for a new project, not an existing project with an existing framework. That would be a lot of overhead work to go through, right? 7. How do you address design tokens for typography. For example, we have classes dedicated to just font-weights. I'd be happy to help you test and contribute with any user testing you need. I just need to actually start using this first.

Report

5yr ago

Overlay

Maker

@megaroeny Hi ! Thanks a lot for all these questions. Here are our answers. 1. Yes we plan to add a SASS support, also did you know that SASS syntax is compatible with SCSS one. So if you want to test scss in your project, you already can by just changing lang=«sass» into lang=«scss» 2. For now, we do not let generate “view only” links, but a paid subscriber can invite as many free users to his project. On the web app, when you enter your project, you will see on the top-right corner an invite feature. 3. Of course, as Overlay is a plugin, and Figma is opened to both developers and designers, they all can export components. Only condition to use plugin in Figma : you have to be in edit mode in your Figma file. “View only” users cannot open Figma plugins. 4. By default, Overlay uses Flexbox to calculate layers positions. The only case where Overlay will apply a position:absolute is when two or more layers overlap. So basically, Figma Auto-Layout just helps Overlay generate clean code because it prevents designers from doing mistakes. For the moment, Overlay uses most of the auto Layout features (Flex direction, align items, justify content, padding, margin) but not every. The latest Auto-Layout V3 is just awesome and will let us uses more properties. Be compliant with Auto Layout V3 is our top 3 priorities :) 5. Yes indeed. This is something we have also to deal with in Sketch. Overlay covers all of these cases to generate a background. Only check to do : when you decide to make a component using a background made with a layer, make sure this layer has the exact same size of the master component and does not have pixels overlapping your component. It could generate absolute positions. 6. Indeed, that would be a better use case. But still, if you want to make new components for an existing project using the same framework (example : Vue.js with SCSS), you can. What you will need to do is add to Overlay Stylesheet your existing style variables (colors and fonts) so that the generated code matches with these. 7. For colors, text-colors and Typos, we generate style variables (in JS or SCSS). So basically, the user is asked to add his variables into his Overlay stylesheet. Then, when he exports components, Overlay generates code using these variable. For example, you export a Blue button, Overlay will use background-color : $blue-primary (the name you used) instead of a hardcoded RBGA value. I really hope that all these answers helps you :) All the best !

Report

5yr ago

Wireframe Components Kit

@come_sabran this is excellent, thank you! Especially helpful answer for #6, appreciate it.

Report

5yr ago

Blocks

Looks great ! I have seen a lot of design to code products. Mostly generating position:absolute, how do you handle this ?

Report

5yr ago

Overlay

Maker

@vicgrss Thanks ! Indeed, this has been the most frequent problem of latest design-to-code tools. I would answer this : 1. Design tools like Figma are now much more dev oriented and let us get more "clean" design, i'm of course thinking about Auto-layout features. 2. We have a component approach. Components are, small, and well structured, it makes it easier to genereate great code out of it, instead of trying to get a thouthand Html lines out of a full page. 3. Our algos generate Flex positions by default, and only position:absolute for Overlapping layers, for example in complex composition (mostly on landing pages) Does this answers your question ?

Report

5yr ago

Blocks

@vicgrss @come_sabran yep completely thanks

Report

5yr ago

Okay that sounds really cool! We will definitely try it. I guess it will save some time! But I need to make my designs clearly and organized? Challenge accepted!

Report

5yr ago

Overlay

Maker

@kiki_sergel ahah, indeed, Overlay loves clean design. Actually, it's the design-to-code tool which code quality depends on the design quality :) So... up to you :)

Report

5yr ago

Prototypr

Congrats ! Can Overlay also work with CSS libraries like tailwind or bootstrap? Just thinking how I would add a component to an existing project

Report

5yr ago

Overlay

Maker

@graeme_fulton Thanks a lot ! About CSS librairies, not yet. For now Overlay is made for full custom components. Then, if your actual project is based on React (SCSS or Styled component), or Vue JS. First step is to use our stylesheet feature to get all your styles (colors, typo) from Figma. into a SCSS or JS stylesheet to sync with your project. then, when you will export components, they will use these styles instead of hardcoded values. Ex : $green-primary instead of rgba(36,206,134,1)

Report

5yr ago

Overlay

Maker

Hi hunters and makers! So glad to be here today! Thanks a lot for the hunt @thomass_fm ❤️ I am Côme (pronounce "Cowm" 😊), and I created Overlay, after 2 years of hard work with my teammate @kevin_jean. To be honest, I dreamed of this special day 😍! 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 or Sketch 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 or Html + SCSS or Styled component), and export your first components. It's FREE to start, and I would love to have all your feedback about the product, our journey is just starting! Best, PS : Use Figma Auto-Layout for your components. It's the best way to get to quality code and avoid inconsistencies (overlaps, wrong padding or margins). Côme

Report

5yr ago

@thomass_fm @kevin_jean @come_sabran I'm really curious about the result. I'll try it out soon. 👍

Report

5yr ago

Overlay

Maker

@csaba_kissi Thanks a lot, you're of course welcome to test ! Just tell us once you have tested ! Just saw all the tools you've made, great job !

Report

5yr ago

@csaba_kissi @come_sabran Thanks man!

Report

5yr ago

Looks good! Would love to see some tech details on how it works and what's the roadmap. Do you guys have a medium page ?

Report

5yr ago

Overlay

Maker

@antoninglebert Thanks ! Of course. @overlay-blog on Medium. And here is an article we wrote speaking about our compiler (without revealing our secret sauce, of course!) https://medium.com/overlay-blog/...

Report

5yr ago

1 2 3

•••

Reviews