Инструкции

Как начать

• Нажмите кнопку подключения и авторизуйтесь через Figma OAuth.
• Скопируйте ссылку на Figma-файл или конкретный frame.
• Вставьте ссылку на главной странице и запустите загрузку макета.
• После загрузки выберите frame в боковой панели рабочей области.

Рабочая область

• Во вкладке «Превью» отображается сгенерированная HTML-страница.
• Переключатели устройств позволяют проверить отображение в desktop, tablet и mobile-режимах.
• Во вкладке «Код» доступны сгенерированные html и css файлы.
• Кнопка экспорта собирает HTML, CSS и локализованные изображения в ZIP-архив.

Рекомендации к макету

Для более стабильной генерации желательно использовать Auto Layout, понятные названия слоев, аккуратную вложенность, единые текстовые стили и корректно настроенные изображения. Чем ближе макет к логической структуре веб-страницы, тем точнее итоговый код.

Как называть слои для семантики

FrameForge анализирует не только типы узлов Figma, но и названия слоев. Если в имени есть понятные смысловые маркеры, сервис точнее выбирает HTML-теги, роли элементов и адаптивные паттерны.

• Кнопки: используйте слова button, btn, cta или имена вроде primary-button. Такие элементы могут быть преобразованы в button.
• Ссылки: называйте текстовые элементы и группы как link, nav link, menu item, footer link. Для них генератор может выбрать тег a.
• Навигация: для группы ссылок используйте nav items, nav links, main nav или footer nav. Это помогает распознать навигационный блок.
• Шапка: называйте верхний блок страницы header, nav или menu. Если внутри шапки есть логотип и группа навигации, генератор сможет подготовить адаптивное меню для узких экранов.
• Подвал: используйте footer, footer bottom или footer header. Такие блоки получают отдельные правила адаптивности.
• Hero-блок: называйте первый крупный экран hero, banner или hero section. Это помогает определить главный раздел страницы.
• Секции: для крупных смысловых областей используйте section, main, call to action, cta, testimonial или quote.
• Карточки: называйте повторяющиеся блоки card, panel или content. Если карточки стоят в ряд и имеют визуальную оболочку, они могут быть распознаны как карточная сетка.
• Списки: используйте list, items, articles, item или article. Это помогает отличить список и отдельные элементы списка.
• Медиа и иконки: называйте маленькие SVG/векторные элементы как icon, arrow или bullet. Картинки и векторные узлы могут быть преобразованы в img.
• Текст: для служебного мелкого текста подходят caption и label. Крупные текстовые элементы автоматически могут стать h1 или h2 по размеру шрифта.