Изображения и иконки

1. Изображения выносите на отдельный и слой накладывайте эффекты поверх, чтобы исходник изображения оставался доступным для экспорта.
2. В то же время макетное изображение должно быть доступным для экспорта в один клик. То есть, если используется режим наложения отличный от стандартного, фон должен быть в одном блоке с изображением.
3. Используйте векторную графику Везде, где это возможно. При соблюдении некоторых условий, векторная графика технологичнее растровой: меньше размер файлов, поддерживает «эффекты внутри картинки», не требует ретинизации или ускоряет её.
4. Создавайте векторную графику в векторных редакторах. Для любых форм (сложнее прямоугольника со сглаженными краями или простых библиотечных форм) используйте Adobe Illustrator, Inkscape или подобное ПО.
5. Не рисуйте векторную графику в Photoshop. Составные иконки (более одного слоя), нарисованные с помощью векторных форм в Photoshop, почти никогда не получается «достать» без серьезного искажения картинки.
6. Создавайте векторную графику в отдельных файлах. Любые иконки и иллюстрации создавайте в отдельных файлах (лучше всего — сразу в SVG-файлах, одна иконка = один файл). При работе не в Figma, если Вы предоставите такие небольшие файлы технологу, его работа будет существенно быстрее.
7. Рисуйте векторные формы вместо работы кистью. Заливки и формы, созданные кистью получаются «грязными» — имеют множество лишних ключевых точек, что крайне негативно сказывается на размере файла. Примечание: иногда, оптимизировав количество точек, удавалось сжать SVG-изображение в 12 (!!!) раз.

<aside> ⚠️ Обязательно предоставляйте векторную графику в том её размере, в котором она использована в макете.

</aside>

Стайлгайд

1. Должен быть стайлгайд, в котором видны все необходимые состояния меняющихся элементов (интерактивных и просто изменяющихся) и типографическое оформление.
2. Создали стайлгайд — используйте его. Сетки, кнопки, шрифты — всё должно быть типизированно. Думайте «компонентами» (блоками), не плодите сущности (размеры шрифтов и отступов, цвета, типы обводки и пр.) без надобности.
3. Стайлгайд — это отдельный макет или отдельная страница в figma. Это не текстовая инструкция как включать/выключать видимость слоёв, варианты композиции слоёв. Это не артборд, включённый в какой-либо макет.
4. Для ссылок нужны, как минимум, состояния: «покой», «наведение», «клик» (последние два могут совпадать). Для навигационных ссылок нужно состояние «находимся на этой странице». Для контентных ссылок можно указать состояние «ссылка посещалась».
5. Для кнопок нужны состояния: «покой», «наведение», «клик», «блокирована». Иногда ещё нужно состояние «занята» (к примеру, так может быть показан процесс отправки какой-либо формы).
6. Для текстовых полей форм нужны состояния: «покой», «курсор в поле», «блокировано». Обычно, нет смысла прорисовывать состояния «клик» и «наведение». Иногда стоит показать состояние «ошибка заполнения» или даже «заполнено верно».
7. Для флажков (чекбоксов) и радиокнопок нужны состояния: «отмечено», «не отмечено», «блокировано». Нет смысла прорисовывать состояния «клик» и «наведение».
8. Для типографики нужно показать, как минимум, следующую последовательность: заголовок 1, параграф, заголовок 2, параграф, заголовок 3, параграф, заголовок 4, параграф, параграф, маркированный список, параграф, нумерованный список, блочная цитата, параграф, таблица, параграф. Верстальщику важно увидеть все вертикальные расстояния (для этого и нужно чередование параграфами и два параграфа подряд).
9. Хорошо, когда текстовые блоки имеют один интерлиньяж при разных размерах шрифта (на разных вьюпортах). Если размер шрифта на «мобильной» ширине уменьшается (в сравнении с «настольной» шириной), относительный интерлиньяж (140%, к примеру) лучше не менять.
10. В идеале, стайлгайд служит библиотекой блоков, из которых строится весь интерфейс. Один раз делается прототип элемента (кнопки, поля ввода, заголовка...), а везде, где он нужен, вставляется его клон. При изменении прототипа, элемент меняется во всех местах, где использован.
11. Думайте о клик-блоках. Любой реагирующий на действие пользователя (скажем, клик) элемент должен иметь некоторую минимальную площадь, реагирующую на действие. Для кнопок-иконок, к примеру, рекомендуемая площадь клик-блока — не менее 32×32 пикселей, независимо от размеров иконки (важно для устройств с touch-интерфейсом).

Модульные сетки

1. Используйте модульные сетки.
2. Модульные сетки — резиновые. «Строку» с блоками модульной сетки можно вставить в блок любой ширины с сохранением параметров сетки. Пример.
3. Граница ячеек модульной сетки — это середина промежутка между ячейками. Блок не может выступать за середину этого промежутка — левая граница блока не может проходить по правой границе предыдущей ячейки модульной сетки.
4. Идеал модульной сетки — 12 колонок. Ибо 12 делится на 2, 3, 4 и 6. Чтобы придумывать свои (пяти- и восьми-колоночные) сетки нужно иметь действительно серьезные причины, ибо восьми-колоночная сетка не позволит выстроить блоки по 3 в ряд.сетки.