Stacks изменит все, что вы знали раньше о адаптивном дизайне в Sketch.

Auto-Layout: Представляем Stacks — адаптивный дизайн в Sketch, фото 1

Аналогично Flex Box для CSS, UIStackView для iOS, and FlexboxLayout для Android — Auto-Layout с его новой функцией Стеков, в очередной раз, изменил правила игры.

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

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

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

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

Что такое Stacks

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

Auto-Layout: Представляем Stacks
Каждая Стек группа обозначена иконкой синего цвета и индикатором ее направления.

Auto-Layout: Представляем Stacks — адаптивный дизайн в Sketch
Чтобы перейти к стек слоям — выделите их и нажмите кнопку Стеки на панели Auto-Layout.

💡 Совет от профи:

— Использование Стеков ведет к Системности.

— Системность ведет к Наглядности.

— Использование Стеков ведет к Наглядности.

У стеков есть 3 параметра:

  • Направление (Direction): определяет горизонтальное или вертикальное расположение дочерних слоев в стеке

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 2

  • Выравнивание (Alignment): Может быть по верхнему краю/по центру/по нижнему краю/растягивание по высоте

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 3

  • Интервал (Spacing): Определяет расстояние между каждым дочерним слоем.

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 4

Стеки могут состоять из нескольких вложений!Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 6

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

🔍 🔎 9 из 10 дизайнеров в первый раз решают ее неправильно.🔍 🔎

Как много стеков на этой картинке?

Anima Viewer App
Правильный ответ ниже
Правильный ответ — 3.
Anima Viewer App - 2
Иконка каждого стека обозначена синим цветом и индикатором ее направления.

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

👊 Несколько интересных фактов о стеках:

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

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 7

  • Текстовый слой может сдвигать слои одного уровня, в тех случаях, когда его объем увеличивается

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 8

  • Перетаскивание — это простой способ поменять дочерние слои местами.

Auto-Layout: Представляем Stacks — Flexbox для Sketch, фото номер 9

Видео с пошаговым разбором программы от Пабло Стенли:

Flex Grip с использованием Stack

☝️ Алан Рой, активный пользователь beta-версии нашей программы, создал Flex Grid (букв. — Гибкая сетка) — систему использующую стеки.

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

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

Скачать плагин для Auto-Layout: https://animaapp.github.io/Auto-Layout/

Руководство пользователя и инструкции: https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html

О ваших друзей в Anima App 👋

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