What's New ? πŸŽ‰


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

The Overlay Team is so proud to announce the Overlay plugin, 1.5 release πŸ™€ including new UI, better tips to improve your component quality, live sketch editing.

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