Auto-Layout: Представляем стеки - Flexbox для Sketch

Stacks меняет все, что вы знали об адаптивном макете в Sketch

Обновление: экспорт адаптивного HTML и CSS из Sketch с помощью Anima ToolKit.
Создание отзывчивых и интерактивных высококачественных прототипов, все внутри эскиза

Как и Flex Box в CSS, UIStackView в iOS и FlexboxLayout в Android, функция Auto-Layout с новой функцией Stacks снова меняет игру.

Впервые пользователи приложения Sketch могут применять технологию Flexbox непосредственно в Sketch без использования CSS.

Мы считаем, что создание мощных концепций дизайна, доступных для дизайнеров, является ключом к развитию экосистемы дизайна.

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

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

Что такое стек?

Стек - это особый тип группы, который определяет расположение дочерних слоев.

Значок группы стека имеет специальный синий цвет и индикатор его направления.Для укладки слоев - выберите их и нажмите кнопку «Стек» на панели «Автоматическая разметка».
Tip Pro Tip:
- Использование стеков приводит к согласованности.
- Согласованность ведет к ясности.
- Использование стеков приводит к ясности.

Стек имеет 3 свойства:

  • Направление: определяет, является ли укладка дочерних слоев горизонтальной или вертикальной.
направление
  • Выравнивание: может быть верх / центр / низ / спред
центровка
  • Интервал: Определяет интервал между каждым дочерним слоем.
Стеки могут быть вложенными!
Вложенные Стеки

Решите эту головоломку!

9 из 10 дизайнеров ошибаются в первый раз!
Сколько стеков на этой картинке:
Прокрутите вниз, чтобы раскрыть ответ

Правильный ответ 3:

Значок стека имеет специальный синий цвет и индикатор его направления.
  1. Маленький красный горизонтальный стек с 2 внутренними предметами: звездами и счетчиком.
  2. Синий вертикальный стек среднего размера с 4 внутренними элементами: именем приложения, автором, категорией и группой стеков 1.
  3. Самый большой зеленый горизонтальный стек с двумя внутренними элементами: иконка приложения и группа стеков 2.

Interesting Некоторые интересные факты о стеках:

  • Стеки - отличный способ определить ограничения макета между родственными слоями.
  • Добавление или удаление слоев внутри стека перестраивает его дочерние слои.
  • Текстовый слой может выдвигать родственные слои при расширении. Скачать
  • Перетаскивание - это простой способ переставить дочерние слои.

Видеоурок прохождение игры Пабло Стэнли

Flex Grid с использованием стека

Lan Алан Рой, плодовитый участник нашей бета-программы, создал систему Flex Grid с использованием Stack.

Он написал подробное объяснение, включая 10-минутное видео. Мы настоятельно рекомендуем прочитать и посмотреть этот великолепный учебник. Это открытие ума.

Наша миссия в Anima - дать дизайнерам возможность владеть своим дизайном. Мы создаем рабочий процесс, который позволяет дизайнерам определять, задавать и разрабатывать все фрагменты, которые охватывают пользовательский интерфейс / опыт, и в конце автоматически генерировать собственный код, который составляет 1: 1 по сравнению с исходным определением. Это позволяет дизайнерам быть независимыми от других сторон команды, таких как инженеры, которые иногда имеют другие приоритеты, чем команда разработчиков.

Получить плагин Anima (Auto-Layout теперь является Anima Layout)

Руководство и документация

Создание отзывчивых и интерактивных высококачественных прототипов, все внутри эскиза

От ваших друзей в приложении Anima

Для обсуждения не стесняйтесь присоединиться к нашей группе Facebook