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.
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
Hello, I've been using Overlay for several months now as a Vue.js / React developer. It saved me so much time. I don't know any other solution on the market that can generate such clean components from a designer work (Sketch or Figma). For front-end developers it's a revolution 🔥
I you want to read my user feedback, I wrote an article on how fast I made a showcase website using Overlay and Prismic: https://medium.com/overlay-blog/...
Overlay
Invoice generator
Overlay
Invoice generator
Reflect Benchmark
Overlay
Overlay