Если вы создаете дизайн интерфейсов, возможно, вы часто имеете дело с повторяющимися элементами, например, строками таблицы или сеткой элементов. В то время, как 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. Чтобы реализовать это, я использовал кое-что, что мы обычно используем, когда нужно «расписать» дизайн для инженеров – прямоугольники и линии, представляющие отступы, границы, ширины и другие размеры:
Если бы мне пришлось расписать спецификации макета из предыдущего примера, выглядело бы это, скорее всего так
Превращение этого в прототип требует просто назвать слои соответствующим образом и добавить парочки стилей, которые сложно представить визуально (эти слои можно потом спрятать, чтобы они не отвлекали).
Я добавил опцию @size, которая содержит шину и высоту
Теперь давайте попробуем это в действии с табличкой из верхнего примера. Свойства прототипа переводятся в индивидуальные стили и присоединяются к таблице стилей.
Все работает, как и ожидалось, мы можем теперь редактировать макет из таблицы визуально, без необходимости прыгать между дизайном и редактированием текстового слоя. Таблица стилей теперь только представляет группы, и если нам нужно, мы можем превратить все это в прототип тоже – я обычно держу ее под рукой для меньших проектов, которым не обязательно нужен прототип. Вот пример макета, построенного полностью на прототипах.
Поверх предыдущего ячеечного прототипа, теперь у нас есть табличный прототип с отступами и шириной, и прототип секции хедера, с нижним отступом, отличающимся от остальных.
Теперь это совсем не попытка заменить символы в Sketch, а способ дополнить их динамическим движком для макетов, который делает большинство трудоемких работ более простыми. Символы сами по себе отличный инструмент, и могут даже дополнять прототипы – вы можете превратить слой @padding в символ и пользоваться им в различных прототипах.
Что дальше?
Этот плагин все еще находится в работе, он еще довольно медленный, и есть парочка багов. Но, все равно его полезно опробовать, так как он уже способен решить некоторые проблемы с дизайном. Скачайте плагин для своих проектов и отпишите в комментариях, что вы думаете о нем.
Перевод статьи medium.com автора Matej Hrescak.
Топ коментарі (0)