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

Пару раз в прошлом, когда я столкнулся с нагруженными макетами в проекте, где приходилось быстро итерировать (например, редизайн страницы About в профилях Facebook), я пропускал Sketch и сразу же переходил на HTML/CSS. Тут тоже есть свои ограничения, которые замедляют процесс, как, например, переключение контекста между HTML, CSS и браузером.
Так как я опять столкнулся с разработкой табличного макета в Sketch, пришлось выравнивать каждую индивидуальную ячейку в таблице бесчисленное количество раз, я начал искать способы объединить природу WYSIWYG в Sketch с ресурсами прототипирования в HTML и CSS.

Адаптивные макеты в Sketch

Оказывается, долго искать не пришлось. Есть модная библиотека CSS Layout, являющаяся частью проекта Facebook React Native — в основе лежит CSS FlexBox, реализованный в JavaScript. Мне понадобилось пару ночей, чтобы создать базовый экспериментальный плагин для Sketch:

Слой, названный @stylesheet и горячая клавиша для плагина

Это уже довольно серьезно ускоряет повторяющиеся операции, вроде изменения отступов, которые раньше были очень утомительными. Затем мне нужно было реализовать работу с текстом. Это вызвало определенные трудности, я решил их довольно неудобным методом, но все работает, как и ожидалось, с текстовыми слоями c фиксированными и автоматическими размерами, разными высотами строк и размерами текстов.

Реорганизация и ресайз всего вручную отнимет массу времени и сил

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

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

Становятся очевидными некоторые другие преимущества не использования символов в данном примере:

Вы можете менять порядок слоев, просто передвигая их в панели слоевРабота с множеством размеров экранов существенно упрощаетсяВ отличие от символов, вы можете опустить некоторые элементы, в то время как макет подстроится автоматически.Макет не привязан к визуальным элементам — группы могут представлять один и тот же макет, но выглядеть совершенно по-другому.

Шаг вперед — Прототипы

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

Резонно будет найти способ представлять таблицу стилей визуально внутри Sketch. Чтобы реализовать это, я использовал кое-что, что мы обычно используем, когда нужно «расписать» дизайн для инженеров — прямоугольники и линии, представляющие отступы, границы, ширины и другие размеры:

Адаптивные макеты в Sketch с помощью плагина Sketch Flex Layout

Если бы мне пришлось расписать спецификации макета из предыдущего примера, выглядело бы это, скорее всего так

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

Адаптивные макеты в Sketch

Я добавил опцию @size, которая содержит шину и высоту

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

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

Адаптивные макеты в Sketch - результат
Поверх предыдущего ячеечного прототипа, теперь у нас есть табличный прототип с отступами и шириной, и прототип секции хедера, с нижним отступом, отличающимся от остальных.

Теперь это совсем не попытка заменить символы в Sketch, а способ дополнить их динамическим движком для макетов, который делает большинство трудоемких работ более простыми. Символы сами по себе отличный инструмент, и могут даже дополнять прототипы — вы можете превратить слой @padding в символ и пользоваться им в различных прототипах.

Что дальше?

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

Перевод статьи medium.com автора Matej Hrescak.

[dt_button size="big" style="default" animation="none" color_mode="default" icon="" icon_align="left" color="" link="https://github.com/hrescak/Sketch-Flex-Layout/archive/master.zip" target_blank="true"]Скачать плагин Sketch Flex Layout[/dt_button]