What's New ? πŸŽ‰

INTRODUCING COMPONENTS WITH PROPS .. AND MORE 🀩

Tuesday, November 4rd.

new features

🌟 New features

COMPONENTS WITH PROPS

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 :

PLUGIN EXPORT EXPERIENCE IMPROVED

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) :

A FIRST STEP TO FIGMA VARIANTS INTEGRATION

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 !

CODE QUALITY IMPROVED AND MORE DESIGN PROPERTIES SUPPORTED

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

PRICING PLANS FOR EVERYONE, AND EXPORT EXPERIENCE IMPROVED πŸ’Ž

Monday, October 26th

announcement

πŸŽ™ Announcement

NEW PRICING

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 :)

OVERLAY FOR FIGMA IS OUT 😍

Thursday, October 15th, 2020

announcement

πŸŽ™ 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.

INTRODUCING STYLED COMPONENTS πŸ’…

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

ORGANISE YOUR DESIGN SYSTEM INTO CATEGORIES πŸ•Ί

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

OVERLAY NOW GENERATES VANILLA HTML/CSS πŸ¦„

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

TEST YOUR COMPONENTS IN OVERLAY APP πŸ’ͺ

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.

INPUTS GENERATION AND NESTED COMPONENTS 😍

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

IN APP PREVIEW AND FIRST CLASS ASSETS DOWNLOAD FEATURE πŸ’ͺ

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.

OVERLAY BROWSER APP : BRAND NEW EXPERIENCE, STYLESHEET IMPROVED πŸ’ͺ

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

πŸŽ™ 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 !