Ресурсы
Ресурсы по конвертации Figma в код
Практические руководства и открытый бенчмарк для превращения дизайнов из Figma в реальный код — написано для всех, кто оценивает рабочий процесс Figma-в-код, а не только для пользователей MarkupGen.
Figma → HTML
Превращение фрейма Figma в чистый семантический HTML и CSS.
Figma → CSS
Сопоставление значений из Figma с обычными таблицами стилей без фреймворков.
Адаптивная конвертация Figma
Работа с брейкпоинтами, гибкими макетами и фреймами для нескольких устройств.
Семантический HTML
Landmark-элементы, порядок заголовков и настоящие интерактивные элементы вместо «супа» div.
Доступность
Как сделать результат конвертации Figma в код удобным для клавиатуры, программ чтения с экрана и с реальной контрастностью цветов.
Дизайн-токены
Перенос токенов цвета, шрифта и отступов из Figma в продакшен-CSS.
Оценка конвертации Figma в код
Как оценивать сгенерированный ИИ HTML перед публикацией.
Бенчмарк конвертации Figma в код
Открытая, воспроизводимая методология для измерения качества конвертации Figma в код у разных инструментов.
Результаты пока не опубликованы — набор данных для бенчмарка сейчас готовится. На странице выше описана полная методология.
Фреймворки Figma → Code
Все форматы вывода, которые поддерживает MarkupGen, помимо обычного CSS — React, Vue и остальные CSS-фреймворки.
MarkupGen в сравнении с другими инструментами
Чем MarkupGen отличается от других инструментов конвертации Figma в код и передачи дизайна.
Этот раздел ссылается на страницы сайта, которые действительно полезны по конкретной теме — это не полный индекс сайта. Полный список статей смотрите в блоге.