Адаптивная Flex Grid в Sketch с использованием AutoLayout и Stack Groups

Улучшение систем проектирования для структуры, модульности и масштаба

Такие инструменты, как FlexBox в CSS, UIStackView в iOS и FlexboxLayout в Android, уже давно предоставляют разработчикам необходимые рабочие процессы для обработки множества адаптивных и адаптивных представлений, существующих сегодня.

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

С новой функцией Stacks, которая включена в последний плагин Auto-Layout, у нас теперь есть рабочий процесс, который лучше приспосабливается к выходу пользовательского интерфейса и позволяет нам достичь большей согласованности и ремонтопригодности в наших системах проектирования. (Отказ от ответственности - эта концепция все еще находится на ранней стадии. Не все типы макетов выиграют от этой системы, поэтому смешивайте и подбирайте по своему усмотрению).

Демо

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

Находясь на ранней стадии исследования, в шаблон добавлены следующие функциональные возможности:

  • С рабочего стола на мобильный в несколько кликов.
  • Размеры артбордов можно изменять, а выравнивание / распределение сетки не нарушается
  • Сетка структурирована по:
  • тело
     - заголовок
     - Главный
     - —разделы
     - - - группы строк (имеет слой с размером ячейки)
     - - - - строки
     - - - - - колонны
     - - - - - - модули
     - - - - - - - компоненты (вложенные символы с внутренней логикой)
     - Нижний колонтитул
  • Используйте вложенные символы, определенные комбинацией свойств Sketch Resize, закрепления Autolayout и групп стеков, для создания модульной системы заменяемых компонентов.
  • Макет настраивается в соответствии с шириной монтажной области (максимальная ширина содержимого составляет 1200 пикселей, а в мобильном - встроенные желоба).
  • Разнообразие распределений колонн и легкое сжатие / изменение желобов.
  • и
    растут и уменьшаются независимо от
    .
  • Высота изменяется на
    , толкая
    в монтажной области, сохраняя поля и отступы нетронутыми, как на веб-странице.
  • Высота <строки> может быть скорректирована, чтобы влиять на высоту дочерних столбцов
  • Выравнивание столбцов (верх, середина, низ, растяжение) можно определить на уровне строк.
  • Добавление нового столбца (или удаление одного) из строки автоматически подстраивает ширину столбцов одного и того же размера.
  • Добавление нового дочернего модуля в столбце приведет к вертикальному росту этого столбца (модули содержат любое количество типов содержимого, таких как изображения, текст, списки, таблицы, группы и символы).
  • Выравнивание модулей (слева, по центру, справа, растянуть) можно определить на уровне столбца.
  • компоненты замены символов для замены содержимого или закрепления новых слоев в существующем компоненте.
  • Артборд на рабочем столе был настроен на использование базовой сетки 8pt.

Файл эскиза

Вот. Не стесняйтесь улучшить это любым способом и дайте мне знать.
* ВАЖНО * - файл НЕ будет работать, если у вас не установлена ​​последняя версия Auto Layout с поддержкой стеков (.0.2.0 на момент написания этой статьи).

https://cl.ly/2v2I373P2E1f

Несколько заключительных мыслей

Я надеюсь, что это было полезно для некоторых людей. Я знаю, что буду изучать возможности Autolayout и Stacks глубже. Что касается этой версии, я заметил несколько небольших причуд с математическим округлением, но, надеюсь, со временем они будут улажены. Среди некоторых запросов, которые я предложил разработчикам, я думаю, что они могут быть полезны.

  • Возможность добавления фона в составную группу (родительский ряд столбцов) без влияния на логику стека. В HTML / CSS это было бы просто сделано на уровне или «div», но Sketch пока не позволяет сделать это.
    Существует подход, позволяющий сделать это прямо сейчас, который включает в себя группировку фонового слоя со сложенной группой и закрепление bg в верхнем / левом / 100% ширине и высоте, и хотя фон увеличивается для размещения содержимого, он не уменьшается при содержание удалено. Я считаю, что сокращение уже находится в списке задач команды.
  • Введение точек останова в артборде и замена символов на основе артборда (замена навигации по 4 пунктам на иконку гамбургера, когда артборд <400px или лучше, с использованием подхода запросов контейнера.
  • С указанными точками останова - возможность переключения между горизонтальными и вертикальными группами, расположенными друг над другом, так что столбцы располагаются друг над другом, когда места недостаточно. И для столбцов, чтобы обернуть, если указано.
  • Возможность указать процентную ширину на столбец.
    (Обновление - версия этой идеи была только что реализована в плагине с использованием функции весов)
  • Хотя это не обязательно относится к команде Anima, в Sketch также должна быть предусмотрена поддержка переменных, особенно теперь со свойствами, такими как интервал, минимальная и максимальная высота и другие значения, которые должны поддерживаться согласованными для нескольких слоев. Эти переменные могут также использоваться для отображения на цвета, а также для помощи в процессе передачи обслуживания Sass.

Ну, это все, что я получил! Просто хотел еще раз напомнить команде Анима. Они невероятно талантливы, отзывчивы и привлекательны, поэтому, пожалуйста, обязательно поддержите их тяжелую работу! Присоединяйтесь к их странице в Facebook.

Если у вас есть какие-либо вопросы или (приятно!) Комментарии, пожалуйста, не стесняйтесь размещать сообщения ниже или обращаться в Twitter.