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

Сделать сайт в Figma можно тремя путями: опубликовать через Figma Sites на платном плане с Full seat (16 долларов США в месяц при годовой оплате Professional), собрать и опубликовать его в Figma Make (на бесплатном Starter только вместе с публикацией в Figma Community) или выгрузить макет в код плагинами либо отдать нейросети и разместить на своём хостинге. Из России бесплатный аккаунт работает, но Figma официально не продаёт платные тарифы новым клиентам, находящимся в России.

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

В Figma Design вы собираете внешний вид: экраны, кнопки, шрифты, картинки. Обычный макет остаётся картинкой со слоями. Чтобы у страницы появился адрес в интернете и её можно было открыть по ссылке на компьютере или телефоне, нужен шаг публикации или перевода дизайна в код. Опубликованный сайт могут найти поисковики, но сама публикация индексацию не гарантирует.

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

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

С Figma Sites вы собираете страницу на знакомом холсте и выкладываете её в интернет, не выходя из Figma. Инструмент вышел 7 мая 2025 года на Config 2025 в открытой бете.

На октябрь 2026 года Figma Sites остаётся в открытой бете, функции ещё дорабатывают. Для редактирования и публикации требуется место Full seat, а для публикации нужен платный план.

После публикации сайт получает случайный поддомен вида слово-слово-слово.figma.site. Сменить назначенный поддомен пока нельзя, а свой домен подключается после публикации. Перед публикацией подготовьте файл и пройдите шаги:

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

На бесплатном Starter файл Figma Sites создать можно, но опубликовать его нельзя. Новый план Professional можно купить только картой: PayPal, ACH и банковский перевод для такого перехода не принимаются.

Для публикации на свой домен тоже нужен платный план. На Professional можно подключить до 10 доменов.

Бесплатный аккаунт из России работает, а платный тариф на практике оформляют через VPN картой зарубежного банка с международными платежами и повторными списаниями; страна карты не должна конфликтовать с региональными настройками аккаунта. Держите VPN, карту и платёжный адрес в одной стране, не меняйте страны VPN; посредники тоже оплачивают подписку, но им приходится давать доступ к аккаунту.

По теме: Codex и Figma: подключение через официальный MCP в 2026

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

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

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

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

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

При создании сайта через вайбкодинг вы отдаёте макет искусственному интеллекту, и он собирает работающий сайт по картинке и вашему текстовому описанию. У Figma для этого есть Figma Make, который вышел из беты 24 июля 2025 года и доступен всем для пробы. Полные возможности Make доступны с Full seat на платном плане.

В Figma Make бесплатный Starter позволяет опубликовать проект в открытый веб только вместе с публикацией в Figma Community. С Full seat на платном плане можно публиковать без размещения в Community и подключать свой домен; лимит своих доменов общий у Figma Make и Figma Sites. Публикация файлов Make пока остаётся в бете. Индексация опубликованного проекта выключена по умолчанию, её включают в настройках, если страницу должны находить поисковики.

После публикации в Community другие пользователи видят проект и могут его скопировать. При таком копировании (ремиксе) сейчас видна история переписки с ИИ. Учитывайте это до публикации проекта.

Опубликованный проект Make получает случайный адрес вида three-random-words.figma.site. По ссылке можно открыть страницу и поделиться ею.

Передать дизайн можно и внешним ИИ: Claude, Codex или сервисам вроде Lovable. При работе с дизайном через Claude вы прикладываете скриншот или экспорт макета и просите повторить вёрстку.

На Config 2026 (24 июня 2026 года) Figma анонсировала развёртывание Code Layers в закрытой бете с ранним доступом по заявке. Code Layers добавляют работающий код прямо на холст Figma Design.

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

По теме: Claude и Figma: как работать через официальный коннектор в 2026

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

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

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

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

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

Частично. В Figma Sites можно создать файл на Starter, но для публикации нужен платный план с Full seat. Бесплатный путь есть через Figma Make: на Starter проект выходит в открытый веб только вместе с публикацией в Community. Плагины экспорта в код часто дают бесплатный лимит, а дальше просят подписку. Полностью бесплатно получится, если выгрузить код и захостить его самому на бесплатном хостинге.

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

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

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

Сам редактор открывается в браузере, обычные аккаунты из России не заморожены, но новым клиентам, находящимся в России, Figma официально не продаёт платные тарифы. На практике платный Full seat оформляют через VPN зарубежной картой с международными и повторными списаниями; VPN, карта и платёжный адрес должны быть из одной страны, страны VPN не меняйте; при оплате через посредника ему придётся дать доступ к аккаунту. Для сайта «под ключ» без валютной оплаты многие выбирают вайбкодинг или российские конструкторы.

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

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