What's New ? ๐ŸŽ‰

Overlay Fragments: cherry-pick only the code you need !

May, 14th, 2021

new features

๐ŸŒŸ New features


What you love with Overlay, is the generated code, and the time saver it is when starting building a new component. But what you also love in inspectors like Zeplin or Invision (even the native Figma inspector), is the ability to pick only the properties or information you need in a design.

What about being able to do BOTH? Get the whole component code AND be able to select and display only the code lines you need. The maximum flexibility.

It is now possible in Overlay, just like in your browser dev-tools!

Here is what you can do with Overlay Fragments :

  • Select any element or container and get the associated code

  • Quickly get padding, margin or style information while hovering an element

  • On the right panel, quickly see the variables used, props and assets.

  • Navigate between containers like in your browser dev tools

You asked for more flexibility, we listened! Can't wait to have more feedback on this new feature.


Every Saas users like resources. And Overlay users are not an exception to this rule! You asked for more, we did more and come today with something new : a new "resources" section in Overlay app, accessible everytime, that contains :

A step by step video tutorial.

We wanted to do this first video ourselves, with our means and Frenchy accent :), to tell you for each step of the Overlay workflow, what's important and how to do things well.

We had a lot of fun doing this video, hope it will help you building more.

It's accessible in your Overlay account, section "ressources", and also on our Youtube channel.

Bushlife : a Free Overlay UI Kit

The second thing we wanted to give you was the opportunity to start using Overlay with pre-built "Overlay ready" components. This is why we built and published to Figma Community, this file with hundreds of components that you can edit as much as you need, and just export to Overlay.

You just need to duplicate the Figma file.

Overlay playground

You may already know this one, you were more than 1000 to duplicate it. Overlay playground is our step-by-step onboarding file with explanations and component examples to get started with Overlay.

You also just need to duplicate it.

Have fun with Overlay!

Multiple backgrounds and Figma resizing constraints

May, 14th, 2021

new features

bug fixes

๐ŸŒŸ New features


Over the last weeks, we have been busy reshaping our plans and Teams organizations. But we got back a soon as we could to new features work and product improvements.

Here is what we have just released :

Multiple backgrounds

Many of our users use multiple backgrounds to build their UI. Here are 2 common cases we now cover with Overlay:

  • Multiple gradient colors to create complex color compositions

  • Image background + color overlay on top to create image filters.

Figma constraints

After covering Figma Auto-Layout, we worked on Figma resizing constraints, to let our users get more flex properties out of their Figma components. Here is what is now covered:

  • Vertical and Horizontal Scale property generates a CSS width: x%

  • Vertical and Horizontal Strech property generates a CSS width: calc (100%-Xpx)

Material Icons Font supported

So far, when using Material Icons or another icon font in Figma, Overlay had problems to generate a good visual result. Users were asked to install in local their icon font to get the accurate result.

Most of them use Material Icon as an icon Font. So we decided to natively support it, which means that when using Material Icons in Figma, you will not need to install it in local anymore to get accurate results in Overlay App.

And of course, the code remains correct.

๐Ÿ› Bug fixes


Here are a few bugs we fixed over the past 2 weeks:

  • Overlay now fallbacks to an image placeholder when it fails to generate an image after more than 15 seconds

  • Components and layers which names are numbers (often named by mistake) are now supported and renamed

  • Stylesheet variables named with special caracters are now supported

Introducing Figma Variants to Overlay

March, 10th, 2021

new features

๐ŸŒŸ New features


That's great news. You have been a lot to ask about Variants. We listened and got to work. With Figma Variants, Overlay users will be able to export multi-states components, and a great amount of pieces of clean code, with a single export.

Rules are the same, component Variants reflects exactly what you have got in Figma. For this first version, code will not be merged, to create complex multi states components.

We prefered let users the ability to get the states code separately and then easily make the component they need in their code environment.

With this first version, Overlay users can:

  • Export Variants from Figma

  • In Overlay app, navigate between states, exactly like in Figma

  • Get the code they need from each state

Here is how it looks in Overlay app.

You don't know Figma Variants ? Here is a powerful community file to help you start with Variants.

Already a Variants power user? Try a few exports with Variants from Overlay playground.

Release alert >> handoff, new generation : Part 2

February, 25th, 2021

new features

bug fixes

๐ŸŒŸ New features


You have been quite a lot sending us feedbacks about Overlay not always handling your design files fonts. The rule is simple: in Overlay preview, every component exported using a font that is not installed in Local, will be rendered with browser default fallback fonts. Don't worry, if you look at the code, it does refer to the right font.

So what's new ? This week we have added a new feature to detect missing font and warn you when using a font not installed in Local.


What's more, we continued working on your new component page, and we are happy to introduce new handoff features to easily deal with the generated code. Starting today, you can :

  • Interact with your preview and the component instances. Easily select the instance you need to inspect

  • Manage your component props faster. Easily select a prop in the props list by hovering elements in the preview.

  • See the full list of colors and font variables used in your component.

Here is how it looks:

๐Ÿ› Bug fixes

We also fixed some bugs that caused unexpected behaviors. Thanks to everyone who helped spotted them.

  • Fixed a bug caused when exporting components using margin values with decimals

  • Fixed a bug caused by background blur values with decimals

  • Fixed a bug caused when a component used the same color variable twice on a layer (ex: background color + border-color)

Component handoff, new generation

February, 8th, 2021

new features

๐ŸŒŸ New features


This week was step 3 in our mission to make components exports simpler and faster : tackle nested components and overrides.

You remember to be asked to export individually any nested components before you can export a whole composition?ย 

And this composition not covering your instances overrides?

This time is now over.ย ๐Ÿ˜ Overlay now allows users to export complex compositions in ONE SHOT, and covers all design and content overrides

In Overlay app, users will get components' code, and all the nested componentโ€™s code attached, so they can stay as flexible as they need to build apps.ย 

Why not cover overrides using props? We wanted it to be easy, and flexible, not over-charging the generated code with a prop for every overridable property.


With this major improvement, we wanted to make it easier to handoff components code. Letโ€™s introduce the V1 of the new Overlay app component preview.ย 

The new version introduces:ย 

  • A free space to zoom in/out and resize your componentโ€™s preview to test responsive behaviors.

  • All your components props and assets accessible in a click (and a lot more is coming).

  • As mentioned above, all your nested componentsโ€™ code where you can easily navigate to.

  • Your code, at the bottom of your screen, resizable.ย 

  • And a brand new design

This is still the V1 of a series of improvements to make components handoff easy and flexible. Stay tuned, itโ€™s going to be something :)

Export components, easier than ever

January, 22nd, 2021

new features

bug fixes

๐ŸŒŸ New features

Better layers naming

User feedback and research have helped us A LOT during the last months. A few month ago, we were convinced that to produce good quality code, we had to put strong constraints on the designer side by almost forcing them to rename their layers.

You made us change our mind :)

We are now convinced that, the more exports users can do, and the easier it is, the more they are going to get a strong understanding of how Overlay works, and how powerfull it is. And not by raising barriers.

This is why we decided to make naming much easier and less stressfull :

  • No more critical warning for duplicate layer names > Overlay now autogenerates an attribute to diferenciate them: name, nameTwo, nameThree etc.. Users are free to rename them first to avoid it.

  • Optional renaming made easier, and less stressful: now, optional layers renaming is closed by default, and can be opened if needed, in an accordion.

New stylesheet modal

Naming was a thing. Adding style variables was another pain point for Overlay users. We decided to make it easier than ever. Here is what we improved :

  • No more separation between text colors and colors, now there will be only Colors, exactly like in design tools.

  • If users have no idea how to rename styles, Overlay will make auto suggestions for colors and typos.

  • If users have already saved styles in their design, Overlay will suggest using them.

  • Users can add or ignore adding styles. They can also ignore all.

๐Ÿ› Bug fixes

Bug fixes and small improvements

Talking to users, we could also fixed some issues and edge cases :

  • Fixed a bug caused by components using Autolayout in Figma with a non-integer padding value (like padding-top : 4.5px).

  • Fixed a bug a bug caused when exporting an Ellipse made with vector tool. Overlay did convert it into an SVG <img>. Now it's exported as a <div>.

  • Fixed a bug in Figma caused by the export as image feature for dependencies exports.

  • Fixed an infinite loader that happened sometimes when adding a style variable

  • Improved our background image calculator. Images are considered as background images only is they have children.

Introducing custom HTML tags

January, 11th 2021

new features

bug fixes

๐ŸŒŸ New features

HTML custom tags.

Overlay has passed an important step this week. We have observed that HTML semantic was an important point to improve our generated code quality. Today, we are happy to announce that every Overlay users is now able to generate the following custom HTML tags :

  • <h1>, <h2>, <h3>

  • <a>

  • <button>

  • <input>

  • <textarea>

How does it works ? We wanted to make it very easy for designers in Sketch or Figma to add specific HTML tags to their elements. And we decided to introduce Overlay decorators. Overlay decorators are simple attributes to put on your layers name in your design file. For example, when making a "Title" in Figma, users will be able to name it "Title @h1", and Overlay will generate a <h1> tag. Here is the entire list of Overlay decorators :

  • For <h1>, <h2>, <h3> : @h1 @h2 @h3

  • For <a> : @a or @link

  • For <button> : @button

  • For <input> : @input

  • For <textarea> : @textarea

How to start with decorators ? ๐Ÿ‘‡ Figma users : just duplicate our Overlay Playground file to see every cases in action with examples.

Sketch users : read our documentation on every cases here. We are building a brand new playground also for Sketch this week. Here is an example of a new component using some Html tags ๐Ÿ‘‡

๐Ÿ› Bug fixes

These last weeks, working with users on some edge cases, we could identify and fix the following bugs :

  • Bug causing infinite loops on some edge cases with overlaping elements

  • Bug with corner radius. Overlay deleted corner radius in Figma when exporting.

  • Syntax correction for Styled Components when using component instances

Introducing Responsive components

December, 17th, 2020


new features

bug fixes

๐ŸŒŸ New features

Figma has done a huge step in responsive component creation these last days releasing their new version of Auto-Layout : V3.ย 

With Auto Layout, designers can make updates to things like button text without manually adjusting the size of the button frame, or add blocks to a row or column, and it would all resize by itself, like magic.

This was already done by Figma, and the V3 comes with a lot more options :ย 

  • Set individual paddings

  • Stretch on both axis

  • Hug content

  • Distribution options: packed or space-between

  • Alignment optionsย 

We have worked hard since our last release to make Overlay compatible with this new feature. And we are so happy to announce that Overlay is now 100% compatible with Auto-Layout V3. Here is whatโ€™s new in Overlay when using Auto Layout :

Flex properties on containers.

Direction : Overlay uses Flex-direction properties according to what is selected in Auto-Layout frames.

Padding and margin : Overlay generates the exact padding or margin put in Auto Layout frames.

Distribution :

  • Packed : Overlay generates margins right/left/top/bottom in px

  • Space-between : Overlay generates a space-between property

Alignment :

  • On the cross axis : Overlay generates align-items properties

  • On the main axis : Overlay generates justify-content properties

Resizing properties: properties applied to layers inside their container.

Fixed size : Overlay generates a width/heigh fixed in px.

Fill container :

  • In the flex direction : Overlay generates a width/height : flex1

  • In the opposite flex direction : Overlay generates a width/height : 100%

Hug content : Overlay doesnโ€™t generate fixed sizes, the containers grow as the content grows.

๐ŸŒŸ New features

Preview resizing

Now that users can make real responsive components, we wanted them to be able to test them in the Overlay interface.

Itโ€™s now possible, you can adjust the preview containerโ€™s size to see your component resize, adapting to itโ€™s context.

You can also zoom in, zoom out ๐Ÿ˜

Here is a short demo of how it works : https://youtu.be/ZEK_GU8Qvls

New Overlay playground : a community file with perfect components

Many of you asked us about building a file with component examples and explanations about how to build perfect components, ready to be converted into clean code.

It is now possible with Overlay Playground !

And good news, almost all components use Auto-Layout V3 :)

Get started with Overlay playground ๐Ÿ‘‡๐Ÿ‘‡

For Figma >> Hereย 

For Sketch >> Coming soon

๐Ÿ› Bug fixes

Some bug fixes :

  • we fixed a bug caused by the "export as image" feature that crashed the calculation of layers positions.

  • we fixed a bug occuring when trying to export an input using the decorator @input

Overlay goes Freemium !

December, 8th, 2020


๐ŸŽ™ Announcement

At Overlay, we ship new features every week. And we want EVERY user to be able to use them. EVERY week.ย For FREE.ย 

Great news ! Starting today, every Overlay Free user will be able to make 4 exports/week, for free.ย  For occasional use, or simply to keep in the loop and test the last features.ย  ๐Ÿฅณ ๐Ÿฐ


Tuesday, November 4rd.

new features

๐ŸŒŸ New features


This is a new big step for Overlay on our journey to generate code that developers can reuse, and like doing it. Starting today, exported components will include content props for :

  • Texts

  • Images

Also, we wanted to make it flexible for Overlay users. It is now, and you can easily :

  • Activate/De-activate a props if you don't need everything to be dynamic.

  • Test content changes on your components.

Here is how it looks :


We have dedicated these last weeks to understand users need and improve the way they export components, and above all, make it way faster. In particular, many users in their design tools used icons and backgrounds as Symbols/Components. And this to override them easily in their design. Before, they had to export them first as dependancies components in Overlay.

Now, with Overlay plugin, you can decide, in one click, to export them :

  • As images : Overlay generates a <img> tag instead of a component import.

Here is how it looks now in Overlay (for example in Figma) :

  • As backgrounds : Overlay uses styles properties of the Background layer to apply them to the parent container, as background properties. (Available for Sketch only)

Here is how it looks now in Overlay (for example in Sketch) :


Figma just released a great feature helping designers creating multi-states components. It is going to be something very powerful for Overlay users. We made the first step, Overlay users now can export a component that is part of a Variant.

Step 2 and Step 3 are coming soon ! And we would like to do it like this :

  • Step 2: export all the Variant's components with a single export

  • Step 3: merge code and make it on single Multi States component ๐Ÿคฉ.. Wow !


We also worked hard to help users get even more accurate visual results and a better code quality. Here is what we did :

  • Layers and Group rotations are now well supported

  • Shadows applied to groups in Figma are now correctly applied to their children

  • Layer names in camelCase and snake_case now remained unchanged in the generated code.

  • Overlay now detects automatically whenever layers are positioned INSIDE another parent element but not grouped together. Overlay, in those cases creates a new parent container with flex attributes. Just like this :

Stay tuned, what's coming next is amazing ๐Ÿ˜

๐Ÿ› Bug fixes

  • We also corrected a bug that caused unexpected plugin and Web app user logouts


Monday, October 26th


๐ŸŽ™ Announcement


Since we launched, we have met designers and developers all around the globe with very different needs and budget. And we want to be able to help ALL OF THEM improving their design-to-code processes. We also want our first users to get a very special treatment, as they are so helpful for us with all their precious feedbacks. This why we are so happy to release a brand new pricing policy, as follows :

  • A Starter plan, for less frequent users, with up to 10 exports weekly, for 9.90โ‚ฌ / month

  • An Unlimited plan, for Overlay daily users, with unlimited projects and exports, for 19,90โ‚ฌ/month FOR THE 200 FIRST CUSTOMERS

PS : don't be late :)


Thursday, October 15th, 2020


๐ŸŽ™ Announcement

Overlay for Figma

This is now real, Overlay is live, for everyone, in Figma ๐Ÿพ๐Ÿพ These last two months, we have put all our energy to take your feedbacks and prepare Overlay for its journey into the Figma world. We are so excited it has become a reality. Discover our brand new Plugin page on Figma Store

Plugin new onboarding

Overlay new users will now start using Overlay plugin on both Sketch and Figma with a great experience exporting a perfect component.


Thursday, August 13th, 2020

new features

๐ŸŒŸ New features

Styled components ๐Ÿ’…

Our React users, for most of them, use SCSS or Styled components for styling. Overlay historically generates React components with SCSS. We are now proud to announce that we now let users generate React components using Styled Components ๐Ÿคฉ

  • Choose between SCSS and Styled component when you start a project

  • Switch whenever you need

Here is how looks the stylesheet for a Styled Component Overlay Project

Overlay FAQ

Overlay is the design-to-code tool that delivers the best code quality as long as your design is itself well organised. Overlay FAQ is a series of content notes to help you start with Overlay and become an expert. It contains :

  • Designer FAQ

  • Developper FAQ

  • How to set up your first project with Overlay

Brand new onboarding

Overlay new users will now start their journey in the design to code world with a brand new onboarding to help them create great components for their first try. It contains :

  • Getting started slides

  • Overlay main principles

  • A demo file to try a first export

Rename components ๐Ÿ˜Ž

Designers in Sketch often have naming conventions for their symbols that are not development related. For example, a card component in Sketch can be named molecule/desktop/card. To be more flexible, it is now possible to rename your components in Overlay :

  • Directly in the plugin, when exporting

  • In Overlay app, in your browser


Wednesday, June 17th, 2020

new features

bug fixes

๐ŸŒŸ New features

Project categories

A great design system has to be well organised to help developers use it easily. This is why we introduced a new "categories" feature into Overlay projects. Here is the full list of new features added :

  • Create and name categories.

  • Order categories as you like.

  • Create inputs with/without label.

  • Detects unused Sketch groups and delete them when exported.

๐Ÿ› Bug fixes

We also focused this week on correcting some edges cases and bugs on latest features.

  • We have corrected an edge case on text attributes generation

  • We fixed 2 edge cases on our classname pooling feature


Wednesday, June 3rd, 2020

new features

bug fixes

Many users ask us to use OVERLAY to integrate design in different dev stacks. After our two historical target frameworks REACT and VUE.js, we decided to add a new export option : Vanilla HTML/CSS.

๐ŸŒŸ New features

Projects in HTML/CSS

  • Components generated in vanilla HTML/CSS

  • Stylesheet using CSS variable

๐Ÿ› Bug fixes

  • Line height well calculated for text style variables


Monday, June 1st, 2020

new features

This week, we focused on developer and designer experience using Overlay. To produce great components, it is important to be able to test it live, and see how it behaves. First step, let overlay users change its content.

๐ŸŒŸ New features

Edit content section

With this new feature, Overlay users can test their components by editing its text content.

  • New "Content" tab.

  • Users can change text content.

  • Users can hide/show a text element of the component.

Vertical and horizontal lines

Overlay users can now export horizontal and vertical lines in Sketch.


Tuesday, May 26th, 2020

new features

This week Overlay goes further into dynamic components generation from Sketch with inputs generation ! This is a first step and an open door to a range of new features (buttons, select box, progress bars etc..)

๐ŸŒŸ New features

Input field generation

With this new feature, designer can now generate inputs field in Vue.js or React directly from Sketch.

It is now possible to :

  • Design a custom input field.

  • Precise its placeholder and text area style.

  • export it and test it live in Overlay preview ๐Ÿ˜

How to use it ? It's simple. To tell Overlay that a section or group is a type input :

  • Group it, and add @input to the name of the group.

  • Name the placeholder @placeholder.

  • Name the text input @value (you can hide it if you want).

  • And that's it :)

The result :

Dependencies : Overlay manages nested components ๐Ÿงฉ๐Ÿคฉ

Most of UI designers use symbols in Sketch, and very often they make compositions of nested symbols. Example : a button symbol used in a card symbol. So far, Overlay did generate only a placeholder for dependencies. Now it does it like a boss :

  • Using Imports functions in React or Vue.js.

  • Linked components are displayed in a new "dependencies" tab


Thursday, May 14th, 2020

new features

bug fixes

After launching our Beta version two weeks ago, we got a lot feedbacks and worked hard to improve Overlay thanks to them. For the last twos weeks, we focused on component test and preview, and assets download.

๐ŸŒŸ New features

In app preview and new component page with assets feature ๐Ÿ‘๐ŸŒ

The new component page is live ! This space will be fully dedicated to your component : test it live, change states and props, download assets, rename classes and assets.

Starting with, this week :

  • New assets download feature.

  • Live preview.

  • Code section.

Overlay now generates React functional componentโ€

Since the React 16.8 release (hooks release), more and more projects prefer to use functional component syntax. You end up with less code and the code is easier to read. So, we decide to use this syntax instead of class component syntax.

๐Ÿ› Bug fixes

  • Unused masks in Sketch don't generate an image anymore. Now Masks generate img tags when they have content masked. We decided to improve this feature because, sometimes, designers use old mask layers using copy/paste to make components and forget to cancel their mask properties when they are unused.

  • Remaining fills, borders, shadows unselected in Sketch are not exported anymore. For the same reason as old masks, they can easily be forgotten and break component visual aspects.

  • Last-of-type and duplicate style algorithms are improved to handle edge cases.

  • You don't have to rename masked contents anymore because it is transformed into images.


Friday, May 1st, 2020

new features

We are proud to announce Overlay Web app is ready for Beta. We have just opened to a first wave of Beta users and are exiting to get their feedbacks soon. For this new release, we gave a spring cleaning to Overlay web app, and added new features to the stylesheet section.

๐ŸŒŸ New features

Web app new UI

As we did last week with the plugin, Overlay web app is now based on a consistent design system (made with Overlay of course ๐Ÿ˜). It is never too early to invest on design !

This is why we reshaped our web app with:

  • New fonts colors and icons.

  • Flat design.

  • Fancy illustrations, hand made :)

Stylesheet improvementsโ€

We believe at Overlay that clean code always comes with good and well named variables. It has become a key feature in Overlay app, and this week we gave it a new look and experience:

  • Clear list of variables.

  • Opacity included.

  • Line heights included in text styles.

  • Renaming made easy (errors checks, duplicate names made impossible).

  • Variables sorted by name and size (for text styles).

Plugin v1.5.0: New look and seamless experience ๐Ÿ˜ป

Wednesday, April 15, 2020

new features

bug fixes

๐ŸŒŸ New features

Styled components ๐Ÿ’…

Our React users, for most of them, use SCSS or Styled components for styling. Overlay historically generates React components with SCSS. We are now proud to announce that we now let users generate React components using Styled Components ๐Ÿคฉ

  • Choose between SCSS and Styled component when you start a project

  • Switch whenever you need

Here is how looks the stylesheet for a Styled Component Overlay Project

Overlay FAQ

Overlay is the design-to-code tool that delivers the best code quality as long as your design is itself well organised. Overlay FAQ is a series of content notes to help you start with Overlay and become an expert. It contains :

  • Designer FAQ

  • Developper FAQ

  • How to set up your first project with Overlay

Brand new onboarding

Overlay new users will now start their journey in the design to code world with a brand new onboarding to help them create great components for their first try. It contains :

  • Getting started slides

  • Overlay main principles

  • A demo file to try a first export

Rename components ๐Ÿ˜Ž

Designers in Sketch often have naming conventions for their symbols that are not development related. For example, a card component in Sketch can be named molecule/desktop/card. To be more flexible, it is now possible to rename your components in Overlay :

  • Directly in the plugin, when exporting

  • In Overlay app, in your browser

๐ŸŒŸ New features

New UI ๐ŸŒน

Overlay plugin is the first step of Overlay complete redesign. Designer experience is key to let Overlay users keep exporting components and love doing it.

This is why we reshaped Overlay plugin with :

  • New fonts (Geomanist + Nunito)

  • Flat design

  • Better spacings

  • Nice illustrations :)

Dry run for quality check ๐Ÿƒ

Before displaying naming errors, Overlay plugin now makes a dry run of the component. It generates code, and check which class really needs to be properly named. Designer has to rename only the layers that will be used in the code.

They don't have to rename the following layers :

  • Shapes used as backgrounds.

  • Item copies of a list of many elements. Only the first one is needed.

Live editing, like magic ๐Ÿง™โ€

Designers can now rename their layers and correct errors (default names, and duplicate names) directly inside the plugin. Can't be easier !

๐Ÿ› Bug fixes

  • When Overlay detected a last-of-type optimization on Vue.JS project, he now computes the layout part with the right class name.

Space Between + Plugin v1.4.6

Tuesday, April 07, 2020

new features

bug fixes

๐ŸŒŸ New features

Space between Property

Overlay use margin for positioning children inside a container which is what developers did in most of the cases. But margin are not always the solution, with flex layout developers can define dynamic behaviors. To help design teams to build dynamic layout, Overlay can now use space-between property !

Designer can now use sketch resizing constraint to specify if they want to make the layout responsive !

To specify a space between you have to :

  • Pin to left the first child in a group/symbol

  • Pin to right the last child in the same parent

  • Make the margins between all the children in this parent equals (there is a tolerance of 1 pixel)

And thatโ€™s it ๐ŸŽ‰ ! You can also make the same thing for column layout with pin to top and pin to bottom.

As you can see, for now, Overlay generate hard-coded <strong>width</strong> in this case, developers can change it to percentage property to add dynamic layout to the parent too :) Soon we will add this feature in Overlay.

๐Ÿ› Bug fixes

  • not(:last-of-type) selector, minor bug fix with complex layouts.

  • Padding are computed correctly when the parent has border property.

  • Linear gradient are disable for now due to a bug.

  • Single border are now correctly computed when designer use a line in a container.

  • Border/box-shadow/border-radius properties are now directly include inside SVG and not in the image class.

Merge common style + component Preview v2

Wednesday, April 03, 2020

new features

bug fixes

๐ŸŒŸ New features

The duplicate style optimization

Now Overlay group together class with the same style ๐ŸŽ‰

We use the first css class name found to change all the other occurrences.

The last of type optimization

Moreover, when we find a way to use last-of-type to group layer we use it.

With these two optimizations we reduce the amount of code produced by 15% to 20% #lean.

The component preview ๐Ÿ–ผ

Now the component preview use css class instead of inline-style, our goal is to make the preview closer to the generated code.

The width property ๐Ÿ“

Overlay by default generated width property on all paragraph, this behavior create rework because very often developers donโ€™t need this property or use max-width property instead.

In sketch, there is 3 ways to specify text behavior :

  • Auto Width, where the text width is only based on the characters written by the designer. Now, in this case Overlay donโ€™t write width property at all and let the browser compute the size as in sketch window.

  • Auto Height, where the text width is based on the value fixed by the designer. Now, Overlay generate max-width if the text is on several lines, if not we generate width property.

  • Fixed Height, where both width and height are fixed by the designers. Overlay still generate height and width for this case as sketch did.

We will continue to improve this functionality, donโ€™t hesitate to give your feedback on it.

๐Ÿ› Bug fixes

  • Minor bug with letter spacing not computed correctly when there is emphasis part in the text.

Overlay Beta launch ๐Ÿพ

Thursday, March 26th, 2020


๐ŸŽ™ Announcement

Overlay Beta version is now available !

We are very excited to ship our first beta version ! You can now request access and start creating ReactJS and Vue.js components from Sketch !

Overlay - Turn Figma components into clean and reusable React/Vue.js | Product Hunt