Как сделать сайт в Фигме в 2026: Figma Sites, плагины и вайбкодинг

Классическая Figma это редактор дизайна: в ней вы рисуете макет, а не готовую страницу с хостингом и рабочими ссылками. Чтобы макет стал живым сайтом, нужен отдельный шаг публикации. В 2026 году у самой Figma для этого появился встроенный инструмент Figma Sites, а помимо него макет можно перевести в код плагинами или скормить нейросети. Ниже три рабочих способа, их цена и честные ограничения.

Что Figma умеет, а что нет

В Figma вы собираете внешний вид: экраны, кнопки, шрифты, картинки. Но макет это картинка со слоями, а не сайт. У сайта есть адрес в интернете, он открывается по ссылке, работает на телефоне и его видят поисковики. Поэтому «сделать сайт в Фигме» всегда означает второй шаг: публикацию или перевод дизайна в код.

Дальше вопрос только в том, каким инструментом сделать этот шаг. Выбор зависит от того, нужен ли вам сайт быстро и без кода, или полноценный проект, который вы будете хостить и дорабатывать сами.

Способ 1: Figma Sites, публикация прямо из Figma

Figma Sites это встроенный инструмент публикации: вы собираете страницу в знакомом холсте и выкладываете её в интернет, не выходя из Figma. Его показали в открытой бете на конференции Config 2025, и на 2026 год он всё ещё остаётся в статусе беты, то есть функции ещё дорабатывают.

1. Создайте в проекте файл типа Site (Figma Sites), а не обычный дизайн-файл.
2. Соберите страницу из блоков: перенесите готовые секции макета или нарисуйте новые прямо здесь.
3. Настройте адаптив, чтобы страница нормально смотрелась на телефоне и на компьютере.
4. Нажмите Publish и получите ссылку на сайт.

Ограничения важны. Чтобы редактировать и публиковать сайт, нужно место с ролью Full seat. Бесплатно сайт выходит на служебном поддомене Figma. Публикация на свой домен доступна только на платных тарифах: на плане Professional это около 18 долларов в месяц при годовой оплате, с возможностью подключить до 10 доменов. Figma это зарубежный сервис, и оплата валютного тарифа из России возможна не любой картой, это стоит учитывать заранее.

По теме: Как сделать кликабельный сайт в 2026: ссылки, кнопки, телефон

Способ 2: плагины, которые переводят дизайн в код

Если вам нужен обычный сайт на HTML или React, который вы хостите где угодно, дизайн из Figma можно выгрузить в код специальными плагинами. Так вы не привязаны к экосистеме Figma и получаете исходники.

• Anima: самый популярный плагин конвертации, более 1,5 млн установок и партнёр запуска Dev Mode; экспорт в HTML/CSS, React, Vue, Tailwind.
• Builder.io Visual Copilot: силён в разборе компонентов и выдаёт код под несколько фреймворков.
• Locofy: по отзывам даёт самый «человеческий» код, удобный разработчику для доработки.

Честное предупреждение: ни один такой инструмент не отдаёт готовый production-код без правок. Экспорт экономит время на вёрстке, но код почти всегда нужно чистить, а без хотя бы базового понимания HTML это сложно. Если кода вы касаться не хотите вовсе, посмотрите наш разбор конструкторов сайтов против вайбкодинга: там способы вообще без исходников.

Способ 3: вайбкодинг по макету, отдать дизайн нейросети

Третий путь набирает силу в 2026 году: вы отдаёте макет искусственному интеллекту, и он собирает работающий сайт по картинке и вашему текстовому описанию. У самой Figma для этого есть Figma Make, ИИ-инструмент, который стал доступен всем пользователям (публикация файлов Figma Make пока в бете). Как устроен такой подход в принципе, мы подробно показывали в статье про создание сайта через вайбкодинг.

Скормить дизайн можно и внешним ИИ: Claude, Codex или сервисам вроде Lovable. Вы прикладываете скриншот или экспорт макета и просите повторить вёрстку. Про то, как ИИ читает дизайн и превращает его в интерфейс, есть отдельный материал про дизайн через Claude. А на Config 2026 (24 июня 2026) Figma анонсировала Code Layers, ранний доступ к которым открылся с июля 2026: это шаг к тому, чтобы код и дизайн жили в одном файле.

Не пытайтесь довести макет до идеала в Figma перед публикацией. Быстрее собрать черновой сайт любым из способов, открыть его на телефоне и уже по живой странице править то, что реально мешает.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Какой способ выбрать

• Нужен лендинг быстро и вы уже работаете в Figma: пробуйте Figma Sites, но помните про Full seat и платный тариф для своего домена.
• Нужны исходники и вы (или знакомый разработчик) готовы дорабатывать код: плагины Anima, Locofy или Builder.io.
• Кода касаться не хотите и важна скорость: вайбкодинг по макету через Figma Make или внешний ИИ.
• Нужен сайт целиком без валютной оплаты и с российским хостингом: проще сразу собрать его в конструкторе или вайбкодингом, минуя Figma.

Если вы только выбираете, с чего вообще начать свой первый сайт, а Figma для вас пока лишний шаг, посмотрите базовый разбор как сделать сайт самому с нуля: там способы попроще, без дизайн-редактора.

Частые вопросы

Можно ли сделать сайт в Фигме бесплатно?

Частично. Figma Sites публикует сайт на бесплатном поддомене Figma, но для своего домена нужен платный тариф. Плагины экспорта в код часто дают бесплатный лимит, а дальше просят подписку. Полностью бесплатно получится, если выгрузить код и захостить его самому на бесплатном хостинге.

Нужно ли уметь программировать?

Для Figma Sites и вайбкодинга по макету программировать не нужно, вы работаете визуально и текстом. Для плагинов экспорта в код базовое понимание вёрстки пригодится: код после экспорта обычно требует правок.

Работает ли Figma из России?

Сам редактор открывается в браузере, но оплата платных тарифов зарубежного сервиса из России возможна не любой картой. Для сайта «под ключ» без валютной оплаты многие выбирают вайбкодинг или российские конструкторы.

Что лучше: Figma Sites или конструктор?

Figma Sites удобен, если вы уже рисуете дизайн в Figma и хотите публиковать оттуда же. Конструктор (или вайбкодинг) выигрывает, когда нужен рабочий сайт быстро, с российским доменом и без привязки к дизайн-редактору.