Экраны, полностью состоящие из символов:

(Кстати заметьте, как кайфово, когда внутри у каждого компонента уже заданы все необходимые отступы — это требует некоторого времени на старте, но зато потом вообще не нужно думать о том, какой в данном случае сделать отступ)

Короче все, что располагается в одну строчку или колонку, можно запихать в стек и мы будем знать наверняка, что расстояния между объектами не поплыли и все выравнивается как надо.

Если расстояния между объектами одинаковые, то отступ можно задать прямо в плагине. Если расстояния разные (например в странице блога отступ между абзацами обычно меньше чем над подзаголовком), то в плагине нужно задать отступ 0, а в макете сами отступы задавать прямоугольниками без заливки. Это классно, потому что мы можем схватить такой прямоугольник и скопировать его в новое место, там автоматически возникнет правильный отступ.

Плюсы:
• Поддерживается «гигиена» макета: мы абсолютно точно знаем что все отступы какие надо и после передачи на верстку у вас нигде не вылезет 53px потому что мы где-то случайно дернули или недотянули слой.
• При очередном небольшом изменении не нужно бегать по макету и вручную сдвигать те слои, которые оно затронуло — все происходит автоматически.
• Переходим от отступов «на глаз» к точной системе. Систематизация в больших проектах — это очень важно

У плагина был один минус — он плохо работает с Зеплином в символах, при экспорте в Зеплине слои оказываются на тех местах, где они были в символе, а не на тех, куда их сдвинул плагин. Но теперь с нативными скетчевыми стеками об этом можно не беспокоиться.

Минус нативных стеков — они работают только в символах, но бывают часто нужны и в обычных страницах. Надеюсь допилят.

Фигма тоже анонсировала стеки (сразу после релиза Скетча, видимо чтобы не расстраивать фанатов), но пока не выкатили. В Фигме они особенно нужны, поскольку заменяющих плагинов нет, а двигать все вручную — это прямо боль.

Удивительный мир интерфейсов гугл

Секси-интерфейс сегодня контрастный, обходится без тяжелых цветных плашек и живет в основном за счет полей и акцентов. Это, в принципе, уже давно понятно, но новый VK еще раз подтвердил. Спасибо, что не стали пихать логотип в шапку.

Соотношение элементов в формах

Хорошая графическая дизайн-система — это конструктор лего. Формы и страницы так же собираются из отдельных модулей и эти модули должны быть совместимы друг с другом. Лего-детали разного цвета и формы, но у них есть одинаковые связующие элементы — разъемы, с помощью которых они соединяются.

В типичной форме таким «разъемом» является размер шрифта. Большая часть элементов в форме текстовые, поэтому текст — это скелет:

Заметьте — все, кроме заголовка, здесь сделано одним размером шрифта, 16-м.

Далее идут контейнеры для текста — инпуты и кнопки. Если в таких элементах тексты одинакового размера, то у них должны быть одинаковые вертикальные поля. Добавляем контейнеры и у нас получается система модулей:

Горизонтальные поля могут варьироваться у разных типов элементов. Кнопки лучше выглядят с более широкими боковыми полями, чем инпуты. Думаю это связано с выравниванием текста внутри элемента — то, что отцентровано, требует больше пространства.

На последнем этапе добавляем оставшиеся мелочи:

В данном случае информационные слои различаются размером и цветом шрифта. У второстепенного слоя шрифт мельче и светлее

Часто дизайнеры делают так:

Не знаю с какой целью увеличивают кнопку, возможно чтобы добавить выразительности.

Но потом нужна другая конфигурация формы и ой:

Помимо того, что кнопка не подходит к полю по высоте, два разных размера шрифта выглядят неопрятно.

Хорошо если такая ситуация возникнет в начале и можно быстренько привести все к одному виду. Но если мы уже нарисовали 20 экранов с такими формами, придется на ходу придумывать костыли из нескольких видов кнопок.

В общем мораль

Инпуты, кнопки, области под иконки и любые другие элементы формы должны быть одной высоты, или кратные по высоте, чтобы из них можно было сложить все что угодно. Текст в пределах одного информационного слоя также должен быть одного размера. Продумывать эти вещи нужно в момент работы над самой первой формой в проекте, поскольку потом это может обернуться неоправданной тратой времени на переделку старых макетов.