For designers

Get started with best in class design to code tool

How to make a good layout in Sketch ?

Layout is how you organize your Sketch layer tree in order to prepare your component to responsive behaviors : how your component behaves when content or screen changes.

In CSS, layers use flex attributes to position correctly. To export a perfect layout, Overlay needs to know the flex directions : vertical and horizontal. In Sketch, use Groups to indicate the position, as in the following examples.

Vertical layout

When layers are positioned one under another. In CSS, Overlay with generate a flex-direction: column property.

See example below

Horizontal layout

When layers are positioned one after another in a row. In CSS, Overlay with generate a flex-direction: row property.

See example below

Both vertical and horizontal layout

When you build complex layouts, you may have different containers with different directions. Make sure you have grouped them by their direction. In these cases, use Sketch Smart Layout options to optimize your component for reuse.

See example below

What happen if I don't group my layers ?

Don't worry, Overlay does.

Overlay's compiler always detects flex directions and absolute positions and generates new containers if needed. . BUT, in these cases, Overlay names them flex-wrapper and relative-wrapper, which are not dev friendly class names.

Overlay's compiler always detects flex directions and absolute positions and generates new containers if needed. In these cases, Overlay names them flex-wrapper and relative-wrapper, which are not dev friendly class names.

Pro Tip: After exporting, check the generated code and see if Overlay created new containers. If it did, you can create your own groups in Sketch, and give them more contextual and dev friendly name.

Absolute positions

Sometimes, your layout needs to have absolute layout. A position: absolute is used when you want to fix the position of a layer, or when you want to overlap layers.

Overlay will generate an absolute position when a layer overlaps one or more layers in the same group.

See example below

How to manage text constraints ?

Use Sketch text alignment options to set up text constraints. It will generate the corresponding CSS properties like width or max-width. You can use Sketch Smart Layout to test your component's behavior when text content changes (for example: If you want to text to be on two lines after a defined width).

Do not use Fixed Size Sketch option, Overlay does not cover it yet.Sketch text options

To test your text constraints after upload, go to Overlay App, in your component's page, and use the Content feature to change/remove text content and see how the component reacts.

How to export assets ?

As you usually do when you use Zeplin, Invision or another handoff tool, Overlay uses the Make exportable Sketch option to generate SVG and PNG assets.

You can use this option with any type of asset (images, icons, even Symbols or groups). Here two ways to export assets with a button with icon.Sketch Button with icon

Sketch Button with icon

After upload, you can get all your component's assets, in the component's page, tab "assets".

How to choose class names ?

Overlay uses Sketch layers names to generate class names. Naming classes is a matter of communication between devs and designer. Before starting a project, just talk as a team to define the naming standard.

Standard example: all class names in english, using kebab-case.

Then Overlay will help you as a designer to avoid mistakes, like:

  • Duplicate layers names for different layer's style. It is forbidden in Overlay because in CSS, if two layers get the same class they will have the same style.

  • Sketch default names. They are not forbidden, but very often, your dev team will prefer a class named title than sketch default name copy 33 🤯. Try to give layers a dev-friendly name, related to your project context.

GOOD NEWS:

Overlay will not ask you to rename EVERY layer. Indeed, Overlay algorithms will merge identical layers, delete useless layers or groups, and only ask you to rename what is converted into a CSS class

Here the list of layer which you didn't have to rename:

  • Layer used as a background property

  • List of identical layers (same style, size, margins etc...)

  • Exportable Group of shapes

Examples:

Layer used as a background property

List of identical layers (same style, size, margins etc...)

Exportable Group of shapes

How to manage borders ?

General

In Sketch, designers can make borders of different types.

  • Inside borders

  • Centered borders

  • Outside borders

In web development, Centered and Outisde borders are not supported. As Overlay will export high fidelity code, we will ask designers to use only Inside borders.

How to setup default borders in Sketch

It is possible in Sketch to set-up your default borders position to "Inside" so that your components always match with Overlay requirements. Here is how to do it in 3 steps :

  1. Make a rectangle in Sketch with a border "Inside"

  2. Select your rectangle

  3. On top of your Sketch screen, select Layer/Style/Set as Default Style.

How to set default borders as "inside"

Single side borders

Designers usually use rectangles in Sketch to make single side borders. Sketch doesn't allow to make it natively.

Overlay will generate a CSS border like for example border-left: 2px solid yellow only if :

  • Your rectangle is the exact height or width of its parent layer (group or symbol)

  • Your rectangle is max 5px large

  • It is grouped with the layer of which it is going to be the border

Note: As this rectangle is transformed into a border, it is not a CSS class, so it doesn't have to be renamed :)

See example below

How to export components with dependencies (Symbols inside Symbols)

In a design system, designers used to make Symbols nested, which means Symbols into Symbols. It is the same in a front end project, and it's called dependencies.

To export Symbols using Symbols, you have to export first the nested Symbols (dependencies), then export the parent Symbol. Overlay Plugin will display a warning if you forgot to do it.

See example below

How to make inputs components ?

To tell Overlay that a section or group is an input :

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

  • name the placeholder “@placeholder”

  • name the value “@value” (you can hide it if you want)

  • Placeholder and Value text box must have the same size


  • If you need to add an icon (like a search icon), it has to be OUT of the group, in position: absolute

See example below

How to make responsive/adaptative components ?

Responsive or adaptative ? What is this ?

It’s well-known that designing with multiple screen sizes in mind is a key factor in the delivery of a website. There is two ways for creating multiple screen size screens :

  • Adaptive web design uses distinct layouts for multiple screen sizes, the layout largely depends on the screen size being used so with each of these sizes in mind a layout would have to be designed for it.

  • Response web design adapts to the size of the screen no matter what the target device screen size is. The layout is ‘fluid’ and uses CSS media to change styles.

To make responsive component developers usually use only one codebase, as a designer in Sketch things are a bit different.

First, you have to define breakpoints for different screen sizes. Once you are done with this, start designing a first component for a first screen size. Let's take for example, a header.

To adapt your header to other screen sizes, you can start using Resizing constraints Sketch's option to create a fluid layout in your design tool. If you are not familiar with this feature, start with this Sketch tutorial.

For the moment, Overlay use constraints to create a space-between layout. Which are commonly use in headers and navbars.

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)

That’s it 🎉 !

Pro Tip: You can also make the same thing for column layout with Pin to top and Pin to bottom.

space-between example

Then, if you need to make more advanced modifications for mobile or Tablet screens, you will need to design another component (Sketch does not let manage breakpoints)

Two possible cases for a designer :

  • The common case: the component is very similar on another device (elements disappear, layout goes from vertical to horizontal). In this case reuse as possible the same layout that you did for the first export. Same layout also means same layers names so developers doesn't get confused.

    Once you are done, export this component to Overlay.

Just like this :)

  • The component is very different on another device. In this case the developer will certainly create a new different component, do as well.

How to build my stylesheet ?

Overlay Stylesheet is used for two things : avoid design mistakes and inconsistencies, and help developers build maintainable components using style variables.

1. Get started with your stylesheet

First, you need to synchronize between developers and designers. A stylesheet is a list of style variables (colors, typos, etc..) that is used as a single source of truth in a project.

As it is a list of variables, they have to be well named.

For example, you can decide this, as a team:

  • Name colors like this : blue-primary blue-secondary

  • Name text colors like this : text-blue-primary etc..

  • Name typos like this : roboto-16-regular

2. Add new variables to your stylesheet

To add your first variable to your project, go to your Sketch project, and export your first component.

Overlay will detect all style variables that your component uses and ask you to add them to your stylesheet. You can name them according to your naming convention, and click "Continue".

That's it, your stylesheet has its first variables, and the generated code uses these variables.

3. Detect inconsistencies

It can also be very useful to identify design mistakes and inconsistencies. Imagine you make a new component, and use accidentally a different yellow color. Overlay will detect it, and ask you if you want to add it to your stylesheet.

When it happens, you can close Overlay plugin, change your color and use the right yellow-primary, and export it again.