For designers
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.
When layers are positioned one under another. In CSS, Overlay with generate a flex-direction: column property.
See example below
When layers are positioned one after another in a row. In CSS, Overlay with generate a flex-direction: row property.
See example below
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
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.
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
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.
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
After upload, you can get all your component's assets, in the component's page, tab "assets".
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
titlethansketch 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
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.
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 :
Make a rectangle in Sketch with a border "Inside"
Select your rectangle
On top of your Sketch screen, select Layer/Style/Set as Default Style.
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
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
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
ā
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.
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.
Overlay Stylesheet is used for two things : avoid design mistakes and inconsistencies, and help developers build maintainable components using style variables.
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-primaryblue-secondaryName text colors like this :
text-blue-primaryetc..Name typos like this :
roboto-16-regular
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.
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.
