Checklist for finalizing layouts

General

Send the final layouts to a separate Figma tab with a self-explanatory name «For Developers» or «In the Development».

The layout is built on the basis of any grid (ideally, 8 or 12 columns). All design elements must be placed in accordance with the layout grid. You can read more about grids here. A grid is part of the design system that makes life a lot easier. With it, developers will not puzzle over the spaces between elements (and save a lot of time).

The design that we transfer to development must be final and approved by the customer (in an ideal world, of course).

If some parts of the design are being finalized or will be presented later, we mark this with a sticker next to the layout or a comment for the developer.

If we make changes to the design during development (and this happens), we necessarily mark them with a comment or sticker with a note for the developer or project manager.

We prepare font files: we collect an archive with a font in WOFF / TTF format.

There should be nothing superfluous in the layouts for development:

Elements that are not related to the final design.

Hidden layers that are not related to the final design.

Blocked layers.

Fractional values of any elements or spaces

If there is «hidden» content in the design, for example, FAQ, add a layout with a full variation of its states next to the place in the general layout where it is used.

Layers in the final project should have a logical hierarchy.

Layers and elements in the final project should be named in accordance with the value/purpose of the layer. Development teams work with hundreds of elements that we export from Figma. It’s easy to get confused in them, especially if they are given random names.

For dynamic blocks that must be entered into the CMS, we prescribe the names of CMS groups.

All font and color styles are specified in the project styles.

We collect all the same types of elements as components. You can read more about working with components here and here.

Layout adaptability

Checking the presence of all breakpoints (minimum 1920 / 1440 / 1024 / 375) (maximum 1920 / 1680 / 1440 / 1280 / 1024 / 768 / 375 / 320)

If it is not possible (for example, due to time) to draw a resolution of 1920, then it is necessary to draw in a wide format at least those screens on which there are elements that «go over the edges».

Try to think in advance about how the layout will look when viewed in different resolutions. You can read more about the rules of layout adaptability here.

Important: In some cases, especially if complex interface components are used in the design, it is necessary to check the display of the layout at a resolution of 320. This is necessary for the correct layout. Sometimes for this resolution you have to create separate typography styles and component options.

Graphics

Most effects (especially gradients and blending modes) created in the design cannot be adequately reproduced on the layout due to CSS limitations and different browsers. Please familiarize yourself with this guide (or video) on what can and cannot be done on the Internet in terms of graphics.

Make sure that there are no layers or groups of layers in the layout with blending modes other than «Normal»

If you want to apply a color overlay to a group of layers or elements, apply it to each layer or element separately.

Prepare vector content (icons and graphic elements) in SVG format. If the icons are linear, it is necessary to observe the same thickness of the contours. When transferring to development, all contours must be converted to curves.

Place icons in separate equilateral frames (for example, 32×32 pixels).

Prepare raster content (photos and illustrations) in JPG or PNG formats. Make sure that the final content that is planned in the design is used, including purchased images (if they are available). You can learn more about preparing images for the Internet here.

In the layout, we use an image resolution of no more than x2 of the final size.

Text layers

When working with text layers, auto layouts are a great tool for organizing and accurately positioning design elements. They also simplify working with other aspects of layout during the design process.

The size of the text field must match the amount of text used.

If you need to move the text to the next line, we use a non-breaking space (opt+space) instead of pressing Enter.

Be sure to mark the places in the layout where dynamic (changeable) content will be placed.

We show how the component with text will behave if there is more content. In such cases, it is better to agree in advance with the client on restrictions on the possible amount of text.

We mark all the places on the layout with approved restrictions on the amount of text.

Animations

Drawing up a ToR for animations of active elements, as well as animations of the appearance of content with examples.

All animations used in the design must be described in one of the following formats.

Storyboard of frame-by-frame animation.

Animatic or Figma prototype. You can use Principle, Adobe After Effects or Jitter to create animation.

If there is a finished animation file, we upload it to the cloud and place a link to the file next to the place in the layout where the animation should be placed.

Text description with links, ideally accompanied by a video recording or screenshots (we indicate what we like or dislike in the link, what specific parts of the links should be paid attention to);

The description of the link must be accurate to avoid misunderstanding.

When describing the animation, we try to select easings. This will help developers better understand your idea and implement it more accurately. Here is a site that will help with easings, and another one.

Don’t forget about:

UI kit

We check that the UI kit contains all the necessary elements: