UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Fluid для Sketch - создание адаптивного дизайна
Редакція
Редакція

Опубліковано • Оновлено

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

Топ коментарі (0)