Коротко
Автолейаут (auto layout) — свойство фрейма, которое выстраивает вложенные слои в столбик, в ряд или с переносом, держит между ними интервал и отступы и подстраивает размер фрейма под содержимое. В Morfa он включается клавишей ⇧A и выключается ⌥⇧A.
Направление, интервал, выравнивание и отступы задают в разделе «Автолейаут» вкладки «Дизайн», а размер каждого слоя — «Фикс.», «Обтянуть» или «Заполнить». В коде автолейаут становится flexbox. Сетки автолейаута (Grid) пока нет.
Что такое автолейаут и как его включить
Автолейаут — свойство фрейма. Пока оно включено, вложенные слои стоят в столбик, в ряд или переносятся на новые строки, между ними держится один интервал, а фрейм может расти и сжиматься вместе с содержимым. Удлинили надпись на кнопке — кнопка стала шире; добавили карточку в список — список вырос.
Включить автолейаут можно клавишей ⇧A или кнопкой «+» в разделе «Автолейаут». Если выделен фрейм, редактор сам подберёт направление, интервал, отступы и выравнивание по тому, как стоят слои. Если выделено несколько отдельных слоёв, ⇧A обернёт их в новый фрейм с автолейаутом в том порядке, в каком они стоят на экране. Клавиша ⌥⇧A убирает автолейаут и оставляет слои на своих местах.
Чаще всего автолейаут работает внутри компонентов: кнопок, тегов, карточек, у которых меняются текст и число элементов.
Направление, интервал, выравнивание и отступы
Основные настройки собраны в разделе «Автолейаут» вкладки «Дизайн», редкие — в окне «Настройки автолейаута» (кнопка с ползунками).
Направление
«Вертикально», «Горизонтально» или «С переносом». При переносе слои уходят на новую строку, когда кончается ширина фрейма, а расстояние между строками задаёт «Интервал между строками».
Интервал
«Интервал между слоями» — число или «Авто». «Авто» распределяет слои по всей длине фрейма: первый прижат к началу, последний к концу.
Выравнивание
Сетка из девяти точек ставит слои к краю или по центру по обеим осям. В горизонтальном автолейауте есть «Выравнивание по базовой линии» для текста разного размера.
Отступы
Два поля, по горизонтали и по вертикали, или четыре — по одному на сторону: кнопка «Отступ для каждой стороны».
Настройки автолейаута
«Порядок наложения» («Первый сверху» или «Последний сверху»), «Обводки в автолейауте» («Учитывать в размерах» или «Не учитывать») и при переносе — «Строки при переносе».
Переменные
Интервал и отступы можно привязать к числовым переменным: отступы всех карточек меняются правкой одного значения.
Размеры слоёв: «Фикс.», «Обтянуть» и «Заполнить»
Размер задают отдельно по ширине и по высоте в разделе «Позиция». От выбора зависит, что будет со слоем и с фреймом, когда содержимое изменится.
| Размер | Что происходит | Кому доступен | Пример |
|---|---|---|---|
| Фикс. | Слой держит заданную ширину или высоту | Любому слою | Иконка 24×24, аватар |
| Обтянуть | Слой подстраивается под содержимое («Обтянуть содержимое») | Фреймам с автолейаутом и тексту | Кнопка, тег, подпись |
| Заполнить | Слой делит свободное место по главной оси и растягивается по второй («Заполнить контейнер») | Слоям в потоке автолейаута | Поле ввода, кнопки, которые делят ряд поровну |
«Мин. и макс. размеры» ограничивают слой, который обтягивает или заполняет: кнопка не сожмётся уже 120 px, колонка текста не растянется шире 640 px.
Как собрать карточку с автолейаутом
Порядок на примере карточки с заголовком, описанием и двумя кнопками, которые делят ряд поровну.
Нарисуйте фрейм
Инструментом «Фрейм» (F) нарисуйте фрейм шириной 360 px и положите в него заголовок, описание и две кнопки.
Включите автолейаут
Выделите фрейм и нажмите ⇧A. Выберите «Вертикально», интервал 20 и отступы 24.
Соберите ряд кнопок
Выделите обе кнопки и нажмите ⇧A: они окажутся в новом фрейме с автолейаутом. Направление — «Горизонтально», интервал 8.
Растяните кнопки
Каждой кнопке задайте ширину «Заполнить», и они поделят ряд поровну. Ряду кнопок тоже поставьте «Заполнить», чтобы он занял всю ширину карточки.
Освободите высоту
Высоту карточки выставьте «Обтянуть»: длинное описание сделает карточку выше, а кнопки останутся внизу.
Абсолютное положение и ограничения
Не каждый слой должен стоять в общем ряду. Кнопка «Абсолютное положение» рядом с полями X и Y в разделе «Позиция» выводит слой из потока: он остаётся на своём месте, не занимает места в ряду и не сдвигает соседей. Так ставят бейдж в угол карточки, крестик закрытия или значок статуса поверх аватара.
Такому слою задают «Ограничения»: например, «Справа» и «Сверху», и бейдж останется в правом верхнем углу, даже когда карточка станет шире или выше. Те же ограничения работают для слоёв в обычных фреймах без автолейаута.
Во что превращается автолейаут в коде
Во вкладке «Код» и в проекте «Экспорт в React…» автолейаут становится flexbox, и каждая настройка панели переходит в свою строку CSS.
| В панели | В CSS |
|---|---|
| «Вертикально» | flex-direction: column |
| «С переносом» | flex-wrap: wrap |
| «Интервал между слоями» | gap |
| Интервал «Авто» | justify-content: space-between |
| Отступы | padding |
| «Заполнить» | flex: 1 по главной оси, растяжение по второй |
| «Фикс.» | width или height и flex-shrink: 0 |
| «Мин. и макс. размеры» | min-width, max-width, min-height, max-height |
| «Абсолютное положение» | position: absolute и отступы по ограничениям |
.root {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px;
width: 360px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.avatar {
flex-shrink: 0;
}
.button {
flex: 1;
}
Если интервал или отступ привязан к переменной, в CSS будет ссылка на токен, а не число. Что ещё видит разработчик, описано на странице дизайн в код.
Клавиши для автолейаута
Клавиши работают и на русской раскладке. На Windows и Linux вместо ⌘ нажимается Ctrl, вместо ⌥ — Alt.
- ⇧A
- Добавить автолейаут или обернуть выделение в новый фрейм с ним
- ⌥⇧A
- Убрать автолейаут
- ⇧↵
- Выделить родителя: от слоя к фрейму с автолейаутом
- ↵
- Выделить дочерние слои
- ⌥⌘G
- Обернуть во фрейм
Остальные сочетания собраны в списке горячих клавиш.
Чего нет и что меняется при переносе из Figma
Сетки автолейаута (Grid) из Figma в Morfa нет. Сложные раскладки собирают из вложенных автолейаутов: ряд из колонок или колонку из рядов.
При переносе из Figma автолейаут переносится с направлением, отступами, выравниванием и переносом строк. Фрейм с сеткой автолейаута становится фиксированным расположением, а скос слоёв не переносится: такие места перечислены в отчёте импорта.