Fluid для Sketch - создание адаптивного дизайна

Совместный проект от Matt Curtis и Cat Noone

Fluid для Sketch – это плагин для Sketch, который предоставляет средства для создания более параметризированного, адаптивного дизайна. Он основан на ограничениях Auto Layout.

Скачать демо-исходник Sketch

Fluid для Sketch

Установка

ПРИМЕЧАНИЕ: На данный момент установка через Sketch Toolbox не работает, и нужно устанавливать плагин вручную.

  1. Скачайте архив .zip и извлеките содержимое.
  2. Дважды кликните на Fluid.sketchplugin.
  3. Вот и все!!!

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

Обновление

Перезапустите Sketch после установки обновленного .sketchplugin.

Возможности

  • Pin, Offset, Center и Size относительно родительской группы, родительского артборда или предыдущего родственного слоя.
  • Использование простых математических выражений в качестве значений **, например, 50% – 10
  • Просмотр ваших артбордов в разных размерах (мобильный, планшет, десктоп), используя Preview Mode (режим предпросмотра) **
  • Ограничения хранятся прямо в слое, так что не переживайте по поводу названий слоев.

Использование Fluid для Sketch

Прежде всего, мы советуем скачать пример документа Sketch. Есть несколько примеров, и просмотр используемых ограничений, эксперименты с различными опциями (такими как изменении ограничений, изменение размера артбордов или нажатие Update Layout) проясняет принцип работы плагина.

Есть 4 главных действия: Показать/Спрятать панель инструментов, Обновить Макет, Редактировать Ограничения и Превью. Все возможности, предоставляемые плагином, доступны через Plugins > Fluid for Sketch.

Показать/Спрятать Toolbar (⌃ + ⇧ + T)

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

Fluid для Sketch - тулбар

Настройка ограничений (⌃ + ⇧ + C)

Fluid для Sketch - настройка ограничений

Эта опция показывает всплывающее окно инспектора ограничений. Здесь вы можете редактировать все ограничения для выделенного слоя.

Рядом с каждым разделом (Align, Fixed Size и Pinning) есть кнопка с выпадающим списком. Нажав на нее, вы откроете меню, в котором можно выбрать связь:

Fluid для Sketch - выравнивание

Обновление лайаута (⌃ + ⇧ + L)

Эта опция подстраивает слои в текущем артборде, чтобы они отражали ваши ограничения.

Предпросмотр (⌃ + ⇧ + P)

Fluid для Sketch - предпросмотр

Открывает окно, которое позволяет просматривать выделенный артборд в разных форматах (мобильный, планшет, десктоп).

Дополнительные подробности

Режим превью

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

Ширина и высота

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

Группы

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

Символы

Стоит отметить, что те ограничения, которые вы настраиваете на самом символе не распространятся на другие сущности этого символа, любые ограничения, которые вы устанавливаете для подслоев, распространятся.

Текст

Если вы устанавливаете ширину текстового слоя, но не его высоту, плагин установит высоту текстового слоя пропорционально новой ширине.

Пропорции (Aspect Ratio)

Чтобы достичь пропорций, проще всего использовать замок aspect ratio в инспекторе слоев Sketch, и установить ограничения на замену ширины или высоты.

Математические значения

Все значения во Fluid поддерживают математические выражения, такие как 20 * 2 or 50 / 2 + 10 и т.д. Это становится еще более удобным при добавлении процентов.

Проценты соотносятся к размеру оси, на которой они находятся. Вот как все считается:

  • Использование 100% в качестве фиксированной высоты равно 100% ширине связанного слоя
  • Использование 100% в качестве фиксированной высоты равно 100% высоте связанного слоя
  • Использование 100% в нижнем или верхнем пиннинге равно 100% высоте связанного слоя
  • Использование 100% в правом или левом пиннинге равно 100% ширине связанного слоя

Еще одно небольшое применение – распределение отступов между родственными слоями, например:

  • Родственная группа или артборд:
    • Layer B (top pinning = 100% + 20, relativity = Previous Sibling (Layer A))
    • o Layer A

Если у вас есть комментарии или вопросы, вы заметили какие-то баги или хотите поделиться впечатлениями о плагине Fluid для Sketch, пишите в комментарии.

Скачать плагин Fluid для Sketch

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5