Stacks изменит все, что вы знали раньше о адаптивном дизайне в Sketch. Аналогично Flex Box для CSS, UIStackView для iOS, and FlexboxLayout для Android - Auto-Layout с его новой функцией Стеков, в очередной раз, изменил правила игры.
Впервые, пользователи программы Sketch получили возможность пользоваться технологией Flexbox непосредственно в Sketch, без использования CSS.
Мы верим, что создание функциональных концепций проектирования доступных дизайнерам это ключ к улучшению экосистемы дизайна. (неточность перевода) Flexbox изменил правила игры, и, хотя это было нескольких (несколько, опечатка) лет назад, чтобы пользоваться им вам необходимо использовать CSS в браузере и это делает его недоступным для многих дизайнеров. Стеки это очень простая и интуитивно понятная версия Flexbox, при этом такая же функциональная. Это позволяет дизайнерам думать и работать посредством категорий столбцов, строк, и сеток, что делает проектирование более системным.
Что такое Stacks
Стек – это специальный тип Группировки, которая определяет последующую разметку для находящихся в ней слоев. 
? Совет от профи: - Использование Стеков ведет к Системности. - Системность ведет к Наглядности. - Использование Стеков ведет к Наглядности.
У стеков есть 3 параметра:
Направление (Direction): определяет горизонтальное или вертикальное расположение дочерних слоев в стеке
Выравнивание (Alignment): Может быть по верхнему краю/по центру/по нижнему краю/растягивание по высоте
Интервал (Spacing): Определяет расстояние между каждым дочерним слоем.
Реши головоломку!
? ? 9 из 10 дизайнеров в первый раз решают ее неправильно.? ? Как много стеков на этой картинке? 
- Малый красный горизонтальный стек, содержит 2 объекта: звезды и число просмотров.
- Синий вертикальный стек среднего размера, содержит 4 объекта: название приложения, автора, категорию, и стек группу 1.
- Самый крупный зеленый горизонтальный стек, содержит 2 объекта: иконку приложения и стек группу 2.
? Несколько интересных фактов о стеках:
Стеки – это замечательный способ определить порядок размещения между сломи одного уровня
Добавление или удаление слоев внутри стека перегруппировывает дочерние слои.
Текстовый слой может сдвигать слои одного уровня, в тех случаях, когда его объем увеличивается
Перетаскивание — это простой способ поменять дочерние слои местами.
Видео с пошаговым разбором программы от Пабло Стенли:
Flex Grip с использованием Stack
☝️ Алан Рой, активный пользователь beta-версии нашей программы, создал Flex Grid (букв. - Гибкая сетка) – систему использующую стеки. Он написал детальные пояснения, в том числе создал 10-минутное видео. Мы настоятельно рекомендуем ознакомиться с этой замечательной инструкцией. Она позволит вам понять, как работать в программе. https://youtu.be/g--AD\_Yp5lk Наша цель в 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
Перевод статьи Anima App
Найстарші коментарі (0)