Figma или Tilda: сайт, CMS и проверка заявки — это три отдельных решения, которые принимаются по очереди. Figma Sites собирает сайт из фреймов Design и публикует его на figma.site или своём домене; Tilda собирает страницу из блоков и хранит заявки в разделе «Заявки». Ниже — учебный лендинг мастерской «Тихий свет» с тремя услугами и одним изменением цены.
Figma Design и Figma Sites: где проходит граница
Figma Design — это редактор макетов. Figma Sites — отдельный тип файла, который публикуется как работающий сайт. В справке Figma сказано, что Sites вышел в open beta на Config 2025, а доступ к функции открыт на планах Starter, Professional, Education (не K-12), Organization и Enterprise при наличии edit access к файлу. Фрейм из Design можно вставить в Sites, и он превращается в адаптивный макет, но сам Design-прототип опубликованным сайтом не становится.
Практический порядок для нашего лендинга:
- Открыть новый файл Sites.
- Вставить фрейм первого экрана «Вернём свет вашему прибору» с кнопкой «Записаться».
- Добавить три карточки услуг: S01 «Диагностика», 900 ₽; S02 «Чистка», 1400 ₽; S03 «Настройка», 1800 ₽.
- Проверить ширины приёмки 1440 и 390 px.
- Опубликовать и только потом подключать домен.
По данным продукта, CMS в Sites помогает обновлять текст и визуал, не меняя layout. Это ключевое отличие от правки самого макета: контент живёт в коллекции.
Отдельно про CMS. В справке Figma описаны три части: CMS collection — набор полей и элементов по теме, CMS page — шаблон страницы для одного элемента, CMS list — повторяющийся блок с несколькими элементами коллекции. Для карточек услуг это ровно то, что нужно: коллекция Services с полями code, title, price и тремя заполненными строками.
Три услуги, одно изменение цены и решения A/B
Учебный лендинг фиксирует три услуги и одно контентное изменение: цена S02 «Чистка» меняется с 1400 на 1500 ₽, цены S01 и S03 остаются 900 и 1800 ₽. Это единственная правка, которую мы отслеживаем в обоих маршрутах.
| Этап | Маршрут Figma Sites | Маршрут Tilda |
|---|---|---|
| Дизайн | Файл Sites; фрейм Design переносится в Sites | Страница из блоков; при необходимости Figma to Tilda переносит дизайн в Zero Block |
| Карточки | CMS-коллекция Services: code, title, price; строки S01/S02/S03; CMS list с тремя карточками | Три карточки на одной странице; цена S02 правится в блоке |
| Обновление | Изменить S02 в коллекции, затем опубликовать обновление | Изменить текст цены S02 и переопубликовать страницу |
| Заявка | Документированный embed внешних форм; в учебном маршруте — согласованный внешний обработчик с полями name/phone/date | Блок формы с теми же полями; заявка видна в разделе «Заявки» |
| Домен | Сначала публикация на figma.site, затем точные DNS из настроек своего домена | Подключение и DNS выполняются по своей панели |
Два заполненных решения по одному лендингу.
Решение A. Команда уже работает с библиотекой Figma, внешний обработчик заявки разрешён, права публикации и домена подтверждены для её аккаунта. Выбор — Figma Sites с Services CMS и внешним embed, потому что это удовлетворяет указанному процессу.
Решение B. Владелец требует хранить заявку в штатном разделе выбранного конструктора и не согласовал внешний обработчик; у команды есть поддерживаемый Tilda-процесс. Выбор — маршрут Tilda с «Заявками».
Это условный выбор по подтверждённому рецепту. Утверждать, что Sites не имеет встроенных форм, оснований нет: справка описывает embeds как элементы для взаимодействия с внешним контентом, включая формы, и не исключает других вариантов.
Embed в Sites как выбранный маршрут
В справке Figma сказано: embeds — это элементы сайта, которые позволяют взаимодействовать с внешним контентом, включая формы, видео на других сайтах и карты. У каждого embed есть редактируемые свойства в правой панели. Два практических ограничения оттуда же: embeds отображаются только в превью или на опубликованном сайте, а сторонний сайт может запретить показ своего содержимого в iframe по соображениям безопасности.
Для учебного лендинга внешний обработчик должен разрешать iframe. Форму можно проверить в превью и на опубликованном сайте. Финальную приёмку контента и записи заявки проведите на опубликованном адресе; на канвасе embed не отрисуется.
Порядок действий для маршрута A:
- Создать CMS-коллекцию Services с полями code, title, price.
- Заполнить три строки: S01/900, S02/1400, S03/1800.
- Добавить CMS list с тремя карточками на страницу.
- Вставить embed внешнего обработчика с полями name, phone, date.
- Опубликовать сайт на figma.site.
- Подключить свой домен через DNS-записи из настроек.
- Изменить цену S02 на 1500 ₽ в коллекции и опубликовать обновление.
Шаг 7 важен отдельно: в справке Figma указано, что изменения на канвасе появляются на опубликованном сайте только после публикации. Удалённая со канваса страница остаётся на сайте до публикации обновления.
Права планов, entitlement аккаунта и цена
Здесь нужно развести три разные вещи.
Первое — права планов, перечисленные в справке. Публикация сайта: Professional, Education (не K-12), Organization, Enterprise плюс edit access к файлу. Управление своим доменом: Professional, Organization, Enterprise плюс edit access. Вставка блоков, embeds и библиотек: Starter, Professional, Education (не K-12), Organization, Enterprise плюс edit access. CMS: Starter, Professional, Education (не K-12), Organization, Enterprise плюс edit access.
Второе — фактический entitlement конкретного аккаунта. Список планов в справке описывает, кому функция доступна по документации. Что реально включено в вашей учётной записи, видно в её настройках, и это проверяется до начала работ.
Третье — текущая цена и число мест. Этих значений мы не приводим: в сохранённых материалах их нет. Лимиты беты 2025 года (бесплатные домены до конца 2025, до 10 доменов на Professional) в справке помечены как действовавшие тогда и подлежащие изменению после 2025 года, поэтому переносить их в текущее сравнение нельзя.
Для Tilda текущий pricing относит custom domain к плану Personal и выше. Free для собственного домена в этом маршруте не выбирается. Цены в сравнении не являются обещанием доступности оплаты.
Если публикация, домен или место в конкретном аккаунте не подтверждены, маршрут не готов к оплате и выпуску независимо от качества дизайна.
Официальный Figma to Tilda и обработка формы
Перенос дизайна из Figma в Tilda — официальная функция. В справке Tilda описан плагин Figma to Tilda: он переносит макеты и слои из Figma в Zero Block в один клик. Требования к макету: ширина фрейма 1200 px, крупный фрейм разбивается на несколько отдельных, кнопку нужно собрать в группу с именем button, поддерживается не более шести уровней вложенных групп. Есть и устаревший способ через API с токеном Figma.
Ключевой момент: плагин переносит дизайн. Работающую форму он не создаёт. После импорта форму нужно добавить и настроить отдельно.
В справке Tilda по формам сказано: блок берётся из категории «Форма», поля настраиваются, страница публикуется. Отправленные данные хранятся в разделе «Заявки». По умолчанию заявки хранятся месяц, срок меняется в настройках сайта. Доставка на email, в Google Таблицы или CRM — отдельная интеграция из списка сервисов приёма данных, и её результат проверяется самостоятельно. Сервисы приёма данных работают при активной подписке.
Порядок для маршрута B:
- Импортировать макет через плагин Figma to Tilda в Zero Block.
- Добавить блок формы с полями name, phone, date.
- Опубликовать страницу.
- Подключить нужный сервис приёма данных, если требуется доставка за пределы «Заявок».
- Изменить цену S02 в блоке и переопубликовать страницу.
Две проверки опубликованного контента и записи заявки
Проверка первая — контент. После изменения и публикации S02 на том же опубликованном адресе должны быть видны цены 900 / 1500 / 1800 ₽. На ширине 390 px три карточки не обрезаны, поля формы доступны. Проверка идёт на опубликованном адресе.
Проверка вторая — запись заявки. Отправляем учебную запись: name=DEMO-05, phone=+7 000 000-00-00, date=2026-11-12. Ровно одна запись с этими значениями должна появиться в журнале выбранного обработчика или в разделе «Заявки». Данные вымышлены, форма в рамках подготовки материала не отправлялась.
Что не заменяет проверку: клик по кнопке, сообщение «успех» без полученной записи, сам импорт из Figma. Все три вещи происходят до того, как заявка реально дошла до получателя.
Чек-лист приёмки:
- цены на опубликованном адресе совпадают с коллекцией или блоком;
- карточки не обрезаны на 390 px;
- поля name, phone, date доступны;
- тестовая запись найдена ровно один раз;
- домен подключён по DNS из настроек своей панели.
Частые вопросы
Figma или Tilda — что выбрать для лендинга с формой?
Зависит от организационного условия. Если команда работает в Figma, внешний обработчик согласован и права публикации подтверждены — маршрут Figma Sites с CMS и embed. Если заявка должна храниться в штатном разделе конструктора — маршрут Tilda с «Заявками».
Можно ли перенести макет из Figma в Tilda?
Да, это официальная функция. Плагин Figma to Tilda переносит слои в Zero Block. Фрейм должен быть шириной 1200 px, кнопка собрана в группу с именем button, поддерживается до шести уровней вложенности. Работающая форма после импорта настраивается отдельно.
Как обновить цену одной услуги на опубликованном сайте?
В маршруте Sites цена живёт в CMS-коллекции Services: правится строка S02, затем публикуется обновление. В маршруте Tilda цена правится в тексте блока, после чего страница переопубликовывается. До публикации изменение на сайте не появится.
Почему форма не видна в редакторе Figma Sites?
Embeds отображаются только в превью или на опубликованном сайте. На канвасе их не видно. Второе ограничение: сторонний сайт может запретить показ в iframe, тогда embed не заработает.
Как проверить, что заявка действительно дошла?
Отправить тестовую запись с уникальными значениями и найти её в журнале обработчика или в «Заявках». Сообщение «успех» на экране и клик по кнопке результатом не являются. Доставка в email или CRM проверяется отдельно от записи в штатном разделе.