Фреймы, в которых есть логика
HTML to frame: каждая страница и экран становятся фреймом Figma
Фреймы верхнего уровня, названные по странице и экрану, вложенные фреймы по структуре DOM и Auto Layout, который проверяется перед применением.
- Ширина фрейма измеряется по реальному дизайну
- Вложенные фреймы повторяют структуру страницы
- Фреймы Desktop, Tablet и Mobile за один импорт (Pro)
Скоро в Figma Community
HTML to frame описывает именно тот результат импорта, который нужен дизайнерам: не одну картинку, а фрейм Figma на каждую страницу и экран с иерархией вложенных фреймов, которая выглядит логично, когда открываешь панель слоёв. Именно так HTML to Frames, плагин для Figma от EUREKA!, структурирует каждый импорт.
Каждый захваченный экран становится одним фреймом верхнего уровня с предсказуемым именем, например example.com/pricing — Desktop (1920). Протокол и www отбрасываются, а длина имени не превышает 60 символов, поэтому многостраничный импорт легко просматривать. Внутри контейнеры страницы становятся фреймами, и эти фреймы следуют DOM. Фрейм шапки содержит фрейм навигации, а тот — фреймы ссылок, почти как в исходной разметке.
Ширина фрейма не угадывается. Плагин измеряет реальную ширину дизайна страницы во время импорта. Дизайны на всю ширину (full-bleed) получают фрейм 1920 с центрированным контентом, сайты с фиксированным контейнером — ширину этого контейнера, например 1200, 1280 или 1440, а «резиновые» сайты — 1440. При многостраничном импорте одна и та же ширина используется для всех страниц сайта, поэтому фреймы выстраиваются ровно.
Где позволяет раскладка, фреймы становятся Auto Layout-фреймами. Плагин определяет направление, gap, padding, выравнивание и перенос по измеренной браузером геометрии, применяет план и проверяет каждый дочерний слой с допуском 2 px. Фреймы, где это не выдерживается, сохраняют абсолютные позиции с constraints, так что ничего не сдвигается неожиданно.
Подробности о движке — в статье Auto Layout: как это работает. О конвертации в целом — на странице HTML to Figma, а о многих страницах сразу — на странице Website to Figma.
Как страница превращается во фреймы
- 01
Измерение ширины сайта
Плагин определяет, какой у дизайна макет — на всю ширину, с фиксированным контейнером или «резиновый», — и подбирает ширину фрейма Desktop.
- 02
Сборка фреймов с точностью до пикселя
Каждый контейнер становится фреймом в измеренной позиции, повторяя иерархию DOM.
- 03
Auto Layout изнутри наружу
Начиная с самых глубоких фреймов, определяются и применяются стеки, переносы, gap, padding и выравнивание.
- 04
Проверка или откат
Каждый дочерний слой проверяется с допуском 2 px; не прошедшие проверку фреймы пробуют более простой план или сохраняют абсолютные позиции с constraints.
Детали на уровне фреймов, которые экономят время на доработку
Измеренная ширина сайта
Фреймы Desktop получают реальную ширину дизайна: 1920 для full-bleed, ширину контейнера для сайтов с контейнером, 1440 для «резиновых».
Иерархия по DOM
Вложенные фреймы следуют структуре страницы, поэтому секции, карточки и кнопки легко найти в панели слоёв.
Auto Layout-фреймы
Горизонтальные и вертикальные стеки, переносящиеся ряды, gap и padding — с проверкой каждого дочернего слоя.
Адаптивный замысел
Центрированный контент остаётся по центру, одинаковые карточки растягиваются (Fill), а пространство между логотипом и меню становится элементом Fill.
Responsive set
Фреймы Desktop, Tablet 768 и Mobile 390 одной страницы захватываются параллельно и считаются одним импортом (Pro).
Переимпорт фрейма
Каждый фрейм хранит URL источника и ширину, поэтому его можно обновить одним кликом.
Имена фреймов и ширина сайта
Когда вы импортируете десять страниц в трёх экранах, имена фреймов важны. HTML to Frames использует единый шаблон:
domain/path?query — Screen (width)
Например, shop.example.com/products?sort=new — Mobile (390). Без протокола и без www, а длина имени ограничена 60 символами, чтобы оно оставалось читаемым на холсте.
Как выбирается ширина Desktop
Экран Desktop называется Site width (ширина сайта), потому что она измеряется, а не угадывается:
| Тип сайта | Ширина фрейма Desktop |
|---|---|
| Дизайн на всю ширину (full-bleed) | 1920, контент по центру |
| Сайт с фиксированным контейнером | Ширина контейнера, например 1200, 1280 или 1440 |
| «Резиновая» раскладка | 1440 |
В многостраничном импорте у одного сайта одна ширина, поэтому все фреймы Desktop выстраиваются в ряд. Остальные экраны имеют фиксированную ширину: Laptop 1280, Tablet 768 и Mobile 390. На Pro можно также задать Custom width, если нужна конкретная контрольная точка.
Каждый фрейм также хранит URL источника и ширину — именно это позволяет позже переимпортировать его одним кликом.
Единообразные имена помогают и за пределами Figma. Когда вы делитесь ссылкой на фрейм или экспортируете его, имя сразу говорит разработчику, какую страницу и контрольную точку он видит.
Вложенные фреймы и Auto Layout с проверкой
Внутри каждого фрейма верхнего уровня иерархия повторяет DOM. Панель слоёв выглядит знакомо для любого, кто знает разметку, а у Auto Layout появляются настоящие контейнеры для работы.
Движок работает в фиксированном порядке:
- Построить страницу с точностью до пикселя на абсолютных позициях.
- Обойти фреймы изнутри наружу и по измеренной геометрии определить вертикальные или горизонтальные стеки, переносящиеся ряды, gap, padding и выравнивание.
- Перенести адаптивный смысл: центрированный контент становится Center, блоки с max-width остаются по центру, одинаковые карточки и элементы с flex-grow становятся Fill, а промежуток между логотипом и меню — элементом Fill.
- Применить план и проверить положение каждого дочернего слоя с допуском 2 px.
- Если не выдерживает — попробовать более простой план; иначе сохранить абсолютные позиции.
Фреймы, оставшиеся с абсолютными позициями, получают constraints — Stretch, Scale, Center, Min или Max, — поэтому корректно ведут себя при изменении размера. Экран результатов показывает, почему каждый из них остался абсолютным.
В наших тестах на реальных сайтах Auto Layout определялся примерно для 86–97 процентов фреймов. Важна не цифра, а гарантия за ней: дизайн никогда не ломается. Подробнее о том, как CSS превращается во фреймы, — в статье CSS flexbox и grid в Auto Layout.
Одна страница, несколько экранов: Responsive set
Один фрейм показывает одну контрольную точку. Реальной дизайн-работе обычно нужно минимум три. С опцией Responsive set HTML to Frames захватывает Desktop, Tablet и Mobile одной страницы в один клик.
Несколько практических деталей:
- Экраны одной страницы захватываются параллельно, а не по очереди.
- Одна страница со всеми экранами считается одним импортом, а не тремя.
- Pro и Team допускают до четырёх экранов на импорт; тариф Free захватывает один экран на импорт.
- Каждый экран — отдельный фрейм верхнего уровня с названием экрана и шириной в имени, так что их легко различить с первого взгляда.
Поскольку каждый экран захватывается в своей реальной ширине, вы получаете настоящую мобильную раскладку сайта, а не сжатый десктопный фрейм. Навигация, сворачивающаяся в кнопку меню, сетки, которые перестраиваются с четырёх колонок в одну, и уменьшающаяся типографика — всё выглядит так, как сайт отрисовывает это в данной ширине. Поэтому набор становится надёжной отправной точкой для ревью адаптивного дизайна.
Сочетайте Responsive set с Multiple-импортом, чтобы захватить несколько страниц в разных контрольных точках, а лимиты смотрите на странице цен.
Частые вопросы
Это значит, что каждая веб-страница и экран становятся фреймом Figma с вложенными фреймами, повторяющими DOM-структуру страницы. HTML to Frames создаёт один фрейм верхнего уровня на каждую страницу и экран и переводит внутренние фреймы в Auto Layout везде, где результат можно проверить.
Фреймы верхнего уровня следуют шаблону domain/path?query — Screen (width), например example.com/pricing — Desktop (1920). Протокол и www удаляются, а длина имён ограничена 60 символами, поэтому большие многостраничные импорты легко просматривать на холсте и в панели слоёв.
Ширина Desktop измеряется по реальному дизайну. Дизайны на всю ширину получают 1920 с контентом по центру, сайты с фиксированным контейнером — ширину контейнера, например 1200 или 1440, а «резиновые» сайты — 1440. В многостраничном импорте у одного сайта сохраняется одна ширина.
Не обязательно. Auto Layout применяется только там, где каждый дочерний слой остаётся в пределах 2 px от исходной позиции. Иначе пробуется более простой план, а если и он не подходит, фрейм сохраняет абсолютные позиции с constraints. Экран результатов объясняет, почему каждый фрейм остался абсолютным.
Free захватывает один экран на импорт. Pro и Team — до четырёх экранов на импорт, включая Responsive set из Desktop, Tablet и Mobile в один клик. Все экраны одной страницы считаются одним импортом и захватываются параллельно, а не по очереди.
Да. Каждый импортированный фрейм хранит URL источника и ширину, поэтому, когда живая страница меняется, его можно переимпортировать одним кликом. Так дизайн-файл идёт в ногу с продакшеном — без нового импорта с нуля и повторного переименования фреймов.
По теме
Хватит перерисовывать веб вручную.
Вставьте ссылку и за секунды получите настоящие редактируемые адаптивные слои Figma. Начать можно бесплатно — 10 импортов каждый месяц.
Без банковской карты. Pro покупается прямо в Figma.
Скоро в Figma Community