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.
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
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.
Components generated in vanilla HTML/CSS
Stylesheet using CSS variable
Line height well calculated for text style variables
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.
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.
Overlay users can now export horizontal and vertical lines in Sketch.
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..)
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 :
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
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.
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.
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.
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.
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.
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.
Fancy illustrations, hand made :)
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.
Line heights included in text styles.
Renaming made easy (errors checks, duplicate names made impossible).
Variables sorted by name and size (for text styles).
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.
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)
Nice illustrations :)
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.
Designers can now rename their layers and correct errors (default names, and duplicate names) directly inside the plugin. Can't be easier !
When Overlay detected a last-of-type optimization on Vue.JS project, he now computes the layout part with the right class name.
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.
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.
Now Overlay group together class with the same style 🎉
We use the first css class name found to change all the other occurrences.
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.
Now the component preview use css class instead of inline-style, our goal is to make the preview closer to the generated code.
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.
Minor bug with letter spacing not computed correctly when there is emphasis part in the text.
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 !