обсудить проект
проекты
услуги
о студии
ДИЗАЙНЕРАМ
Вам не нужно иметь четкий план.
Мы разработаем концепцию с нуля!
Обсудить проект
ALAuto Layout
Illustrator guide Скачать ZIP ↗

Auto Layout · Designer 0.3

Figma‑логика внутри Illustrator.

Пошаговая инструкция: от установки до адаптивной карточки с фиксированной шириной текста, вложенными layout и absolute‑элементами.

Начать установку ↓Собрать карточку
08 этапов10/10 тестовWin + Mac установка
HUG
gap 16 · padding 24
FRAME / FLOW / FILL

01 · установка

Распакуйте архив. Запустите один файл. Откройте панель.

  1. Закройте IllustratorРасширение надёжнее обновляется при полностью закрытом приложении.
  2. Распакуйте ZIPПапку можно поместить в любое место — персональный путь не требуется.
  3. Запустите установщикСкрипт сам найдёт системную папку CEP текущего пользователя.
  4. Откройте панельIllustrator → Окно → Расширения → Auto Layout.

02 · первый layout

Выделите объекты и задайте геометрию контейнера.

  1. Выделите элементыТекст, фигуры, группы и вложенные Auto Layout можно смешивать.
  2. Выберите направлениеHorizontal — кнопки и строки. Vertical — карточки, меню и стеки.
  3. Настройте Gap и PaddingGap работает между объектами, padding — от содержимого до точной границы.
  4. Нажмите «Создать»Появится обычная группа Illustrator с управляемым frame.

03 · размеры

Каждая ось настраивается независимо.

01

Hug contents

Контейнер вычисляет размер по дочерним объектам, gap и padding. Для кнопок и динамических карточек.

content → frame
02

Fixed

Контейнер сохраняет точную ширину или высоту. Даёт пространство для Fill и Space between.

frame → constraint
03

Fill container

Дочерний элемент занимает остаток. Несколько Fill‑элементов делят свободное место поровну.

free space → child
04

Area text

Fixed и Fill фиксируют именно текстовый frame. При Fixed width + Hug height высота следует за строками.

textPath ≠ glyphs

04 · элементы

Добавляйте, извлекайте и меняйте порядок без пересборки.

  1. Добавить выделенноеВыделите внешний объект и активный контейнер → «Добавить выделенное».
  2. ИзвлечьВыберите прямой дочерний элемент — он выйдет из группы.
  3. ПорядокПеремещайте на шаг, в начало или конец; Reverse разворачивает весь flow.
  4. ДублироватьКопия наследует Hug, Fixed, Fill или Absolute.

05 · wrap и absolute

Сложные композиции остаются управляемыми.

WRAP

Автоматический перенос

Зафиксируйте главную ось. Элементы перейдут в новую строку или колонку, когда закончилось место.

  • отдельный cross gap
  • распределение строк
  • padding сохраняется
ABSOLUTE

Свободное наложение

Badge или декор сохраняет координаты, но перестаёт влиять на размер и последовательность flow.

  • бейджи и счётчики
  • иконки поверх карточки
  • возврат обратно в поток
APPEARANCE

Настоящий фон frame

Заливка, opacity и stroke принадлежат точной границе контейнера и сохраняются внутри AI.

  • HEX‑цвета
  • opacity 0–100%
  • stroke в pt

06 · практический пример

Соберите карточку из трёх вложенных layout.

  1. Текстовый stackVertical · W 272 Fixed · H Hug · gap 8.
  2. КнопкаHorizontal · Hug / Hug · padding 11 × 15 · заливка.
  3. Outer cardVertical · W 320 Fixed · H Hug · gap 16 · padding 24.
  4. ОформлениеБелая заливка · stroke #D8D4CA / 1 pt.
  5. BadgeДобавить выделенное → Position: Absolute.

07 · рабочий цикл

Граница и текст должны оставаться предсказуемыми.

Загрузите настройки, включите автообновление, проверьте area‑text и сохраните AI. При передаче обычной группы используйте «Открепить».

Скачать Auto Layout 0.3.0 BETA ↗