Overlay

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

@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 !

@csaba_kissi @come_sabran Thanks man!

@bapt Thank you for this and all the precious feedbacks you gave us all along the way 😍

@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 !

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

@marcpepe19 Thanks ! And @ForestAdmin helps us a lot to do so, and take good decisions

@abbey_jaz Thanks a lot !

@georgesbiaux 😍 thanks !

@ambroise_tout and here we are !