Если вы создаете дизайн интерфейсов, возможно, вы часто имеете дело с повторяющимися элементами, например, строками таблицы или сеткой элементов. В то время, как 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]