Figma Sites: как сделать сайт и опубликовать его без кода

Что такое Figma Sites

Figma Sites — конструктор веб-сайтов на базе Figma. Главное преимущество сервиса — не нужно долго разбираться в новом интерфейсе или переносить файлы в другой конструктор. Работа идет в той же среде, где создается дизайн: с фреймами, компонентами, стилями и другими привычными инструментами Figma. 

В каком статусе сейчас работает Figma Sites

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

Попробовать интерфейс можно и без оплаты, но для реальной публикации проекта в интернете нужен платный тариф или образовательный доступ (Education), в рамках которого можно опубликовать один сайт.

Зачем Figma запустила Sites

В последнее время дизайнеры все чаще ищут способы опубликовать сайт самостоятельно — без того, чтобы обучаться верстке или привлекать разработчиков. Именно эту потребность закрывает Figma Sites. Сервис позволяет креативным специалистам руководить процессом и воплощать свои идеи в знакомом интерфейсе без лишних сложностей. Это особенно удобно, если нужно быстро выпустить лендинг, страницу-портфолио, промосайт или проектный кейс.

При создании Figma Sites разработчики также учитывали концепты low-code и prompt-to-code. Несмотря на то, что low-code-инструменты и ИИ-генерация кода существенно облегчают работу дизайнера, они не избавляют от необходимости понимать основы веб-разметки. Без этого сложно исправлять ошибки и добиваться корректного отображения сайта. Figma Sites упрощает этот путь: он позволяет собрать и опубликовать простой сайт прямо в Figma, почти не погружаясь в код.

Чем отличается от обычных макетов в Figma

Обычный макет в Figma — это прежде всего дизайн-файл. Его нельзя сразу опубликовать в интернете. Для этого нужно экспортировать фреймы или переходить в режим разработки Dev Mode и работать с кодом. 

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

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

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

Кому подойдет Figma Sites

1. Новичкам, которые уже знакомы с интерфейсом Figma. Платформа позволяет разобраться, как работает реальная веб-страница, дает возможность собрать простое портфолио или учебный проект.
2. Практикующим дизайнерам как быстрый способ протестировать идею, собрать несложный лендинг и показать его заказчику уже в опубликованном виде. Особенно это удобно в проектах, где важна скорость запуска и не требуется сложная логика. 
3. Фрилансерам, небольшим командам и стартапам — для запуска рекламы, блогов, лендингов, портфолио и шоукейсов. Инструмент пригодится всем, кому важно быстро запускать страницы внутри одной экосистемы.

Что можно сделать в Figma Sites

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

В будущих версиях Figma Sites обещают добавить многоразовые интерактивные элементы, например слайдеры, и установить дополнительные функции для тех, кому все-таки нужна работа с кодом.

Как создать сайт в Figma Sites: пошагово

Для создания сайта в Figma Sites легко воспользоваться примерами, готовыми блоками или полноценными шаблонами. А еще макет можно перенести из черновика или файла в Figma и редактировать его в Sites.

Подготовка макета

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

Дизайн лендинга с помощью шаблона в Figma Sites

В Figma Sites встроен ИИ-инструмент Figma Make, который построит визуал или часть кода по текстовому описанию. Попробуйте также перейти на предварительный просмотр сайта, чтобы проверить переходы, анимацию и логику шаблона.

Переход от дизайна к сайту

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

Если все готово, нажмите на кнопку «Опубликовать» в верхнем левом углу. Публикация доступна только с платной подпиской. 

Как опубликовать сайт в Figma Sites

Публикацию сайта и правки тоже можно сделать через Figma Sites. Дизайнер контролирует весь процесс в экосистеме Figma.

Публикация и доступ

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

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

Обновление и редактирование сайта

Измените деталь, кнопку или экран на рабочем пространстве внутри Figma Sites, а затем снова нажмите «Опубликовать». Также можно открыть историю изменений и публиковать предыдущие правки. При переходе к предыдущим версиям изменится сам визуал и его код.

Для отмены публикации через общие настройки в левом верхнем углу выберите функцию «Отменить публикацию» (Unpublish).

Figma Sites и альтернативы

Главное отличие Figma Sites от других конструкторов — тесная интеграция с самой Figma. Это удобно, когда сайт собирает дизайнер и ему важно остаться в привычной среде, не перенося макеты в другой сервис.

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

FAQ