Если коротко описать Figma в 2026 году, получится «холст, на котором живёт всё». На конференции Config 2026 компания заявила, что код, движение, шейдеры, генеративные плагины и Weave-инструменты теперь работают прямо на холсте. Для тех, кто делает сайты на заказ, это значит одно: граница между макетом, анимацией, графикой и прототипом на коде становится всё тоньше. Ниже разбираем, что из новинок реально пригодится в проектах, а что пока лучше не закладывать в договор с клиентом.
Сразу оговорка: многие функции вышли в открытую бету, а часть — ещё в закрытой. Статусы мы указываем по документации Figma на конец сентября 2026 года. Меняются они быстро, так что перед внедрением в рабочий процесс стоит на всякий случай сверяться с Help Center — за пару месяцев бета может либо стать общедоступной, либо, наоборот, заметно измениться.
1. Главный герой года: агент Figma
Самое заметное изменение года — Figma Agent. Судя по обзорам с Config, агент фигурировал почти в каждом анонсе: он превращает текстовое описание в шейдер, собирает стартовую анимацию и пишет плагин под конкретную задачу студии. Для дизайнера, который собирает интерфейс интернет-магазина, здесь важны четыре вещи.
Skills (навыки). Это переиспользуемые инструкции для агента, в которые можно упаковать рабочие процессы, конвенции и предпочтения команды и запускать их по требованию. Для студии, которая делает десятки однотипных проектов, это реальная возможность зафиксировать собственные правила раз и навсегда: «карточка товара строится только из компонентов библиотеки», «отступы только по сетке 8 px», «проверять контраст текста на акцентных кнопках». В Community уже есть каталог из полусотни готовых навыков для разных этапов дизайн-процесса — от исследований до хэнд-оффа. Свой навык можно создать, просто попросив агента собрать его из контекста файла, а вызывается он потом через слэш-команду.
Коннекторы и вложения. Агент подключается к внешним инструментам через MCP, чтобы подтягивать контекст и записывать результаты обратно. Ему можно прикрепить файлы Figma, изображения, текст, код, PDF и таблицы — то есть на практике вы прикладываете ТЗ клиента в PDF, выгрузку каталога в таблице и подборку референсов, а агент собирает первый вариант, опираясь именно на эти материалы, а не на общие представления о том, как должен выглядеть интернет-магазин. Он ещё умеет искать в интернете и подтягивать содержимое страниц по ссылке — то есть работает с реальными данными, а не додумывает наполнение от себя.
Прозрачность чатов. Небольшое на первый взгляд изменение с довольно большим эффектом на командную работу. С 23 июня новые диалоги с агентом в Figma Design по умолчанию видны коллегам по организации или команде с полным местом и правом редактирования файла — более ранние переписки при этом остаются приватными. Это значит, что арт-директор может увидеть, какие направления пробует дизайнер, и не тратить время на пересказ хода мыслей на созвоне. Приватность, если нужно, включается отдельно.
Ограничения. Пока агент в бете, он бесплатен и кредиты ИИ не списываются. После выхода в общий доступ заработает система кредитов, и для сметы это существенно — то, что сегодня бесплатный эксперимент, завтра будет иметь конкретную стоимость. Администраторы уже сейчас могут задавать индивидуальные лимиты кредитов на пользователя и принимать запросы на их повышение — есть смысл заранее решить внутри студии, кому такой лимит нужен побольше.
2. Новые инструменты на холсте
Figma Motion: анимация без выхода из файла
Для нас это, пожалуй, самая практичная новинка года. В Figma Design появилась полноценная временная шкала с ключевыми кадрами и готовыми пресетами. Движение можно строить с нуля, накладывать на готовые макеты или попросить агента сделать стартовую заготовку. Раньше для микроанимаций приходилось либо идти в сторонний редактор, либо описывать поведение словами прямо в техзадании — с понятными потерями при передаче разработчику.
Что здесь важно именно для веб-разработки. Motion встраивается прямо в дизайн-систему: компонент можно анимировать один раз, и движение распространится на все экраны и файлы точно так же, как заливки или типографика — анимация кнопки «В корзину» или раскрытия меню превращается в неотъемлемую часть компонента, а не в отдельный артефакт, который легко потерять. Есть переменные времени и easing, которые помогают держать единый «характер» движения по всему сайту. В Dev Mode виден весь таймлайн целиком: значения времени, кривые и ключевые кадры доступны без интерпретации на глаз, код можно скопировать сразу в CSS, JSON или React, а анимированный фрейм — передать кодинг-агенту через MCP. Из форматов экспорта уже поддерживаются MP4, GIF, WebM и анимированный SVG, Lottie обещают позже — но для веб-графики уже сейчас этого достаточно: лёгкий анимированный SVG для героя лендинга, WebM для фонового видео, GIF для рассылок.
Статус на момент написания — открытая бета на всех тарифах, но публикация анимированных компонентов, генерация агентом и экспорт видео в высоком разрешении требуют полного места на платном тарифе.
Шейдеры: «фирменная фактура» без WebGL-разработчика
Можно описать нужный эффект словами или дать референс-картинку — и агент создаст шейдерную заливку или эффект. Параметры при этом выводятся как обычные контролы прямо на холсте, эффекты складываются со стандартными и конвертируются в код. Градиентные «дышащие» фоны, зернистость, стекло, волны — всё то, что раньше требовало отдельного разработчика, теперь дизайнер настраивает сам. Технически это нативные WebGPU-шейдеры; экспорт в PNG работает для статичного фрейма, а MP4 доступен через Motion. Для разработчиков доступен сырой код на JS/WGSL, хотя в Dev Mode сами шейдеры пока не отображаются.
Отдельное предупреждение для боевых проектов: то, что красиво выглядит на холсте, на слабом Android-смартфоне интернет-магазина может ощутимо тормозить. Шейдеры для продакшена стоит обязательно согласовывать с фронтендом заранее. Более безопасный путь — экспортировать статичное или видеорешение, а «живой» шейдер оставлять для промо-страниц, где просадка производительности менее критична.
Генеративные плагины
Чтобы создать такой плагин, достаточно описать поведение, контролы и параметры — без локальной среды разработки и знания Plugin API. Сама Figma в качестве примеров называет сортировку слоёв по критерию, единые отступы для выделения и массовую замену текста или цветов по всему файлу. Для e-commerce это особенно удобно: массово подставить названия и цены в сотню карточек, проверить, что у всех бейджей одинаковые отступы, переименовать слои под соглашение разработчиков — всё это теперь занимает пару фраз, а не отдельную задачу для разработчика плагинов.
Ограничение на старте — такой плагин доступен всем, у кого есть доступ к файлу, а публикацию в Community и внутри организации обещают в ближайшие месяцы. Классические плагины при этом никуда не деваются и продолжают работать как раньше.
Weave: генерация изображений в рабочем процессе
Weave — отдельный узловой холст для генеративных процессов, а Weave-инструменты уже встроены прямо в Figma Design. Они закрывают типовые задачи с изображениями: замена фона, добавление логотипа на товар, смена соотношения сторон — всё это запускается через простой интерфейс, без необходимости составлять сложные промпты. Доступны на тарифах Professional и выше с полным местом.
Для интернет-магазина это по-настоящему интересно: каталог с однотипными фонами, адаптация одного баннера сразу под десять размеров, подготовка ретушированных сцен без студийной съёмки. Осенние обновления углубили эту связку ещё сильнее — узел Figma в Weave позволяет подключить уже готовые дизайны к процессам Weave, чтобы создавать варианты кампаний и локализованные материалы, а изменения оригинала синхронизируются со связанными ассетами автоматически. Через MCP-сервер Weave-инструменты можно запускать даже из ChatGPT, Claude или Cursor, не переключаясь в саму Figma.
Про AI-картинки в коммерческих проектах стоит держать в голове два момента: проверять условия использования конкретных моделей и заранее договариваться с клиентом о правах на результат. Отдельно про кредиты — Weave-инструменты внутри Figma Design пока их не расходуют, но сам Weave как отдельный продукт тратит ежемесячный лимит кредитов своего тарифа.
Code layers и 3D: то, что ещё впереди
Слои с кодом позволяют превратить дизайн-слой в интерактивный код, дублировать варианты рядом и при необходимости возвращаться обратно в дизайн-слои. Можно подключить локальную кодовую базу или репозиторий GitHub, чтобы прототипировать сразу на реальных компонентах, а не на их имитации. Функция пока в закрытой бете, но если она доживёт до общего доступа в заявленном виде — это будет по-настоящему мощный инструмент для интерактивных прототипов корзины, фильтров и калькуляторов. В списке ожидания ещё и нативные 3D-трансформации с экспортом для разработки. Пока это повод записаться в лист ожидания, но точно не повод закладывать функцию в план текущего проекта.
3. Интерфейс и эргономика: мелочи, которые экономят часы
Крупные анонсы заметнее, но повседневная работа ускоряется в основном за счёт небольших изменений — и здесь их больше всего касается вёрстки.
Auto layout стал ближе к CSS. Авто-интервалы получили два новых режима — «Around» и «Evenly» — рядом с прежним поведением, которое теперь называется «Between». Все три повторяют знакомые схемы распределения из CSS. Это довольно заметно меняет правила игры для витрин и сеток: равномерное распределение карточек и элементов навигации теперь описывается тем же словарём, что и во flexbox. Отдельно добавили вертикальный wrap в auto layout — для адаптивных многоколоночных раскладок, ведущих себя ровно как в flexbox. Раньше аккуратная адаптивная сетка карточек требовала обходных приёмов и танцев с бубном; теперь макет ведёт себя как код, и при передаче в разработку возникает заметно меньше вопросов «а как это вообще должно перестраиваться на мобильном».
Умный перенос текста. У текста появились режимы Balance (равномерное распределение по строкам) и Pretty (без одинокого слова, повисшего на последней строке). Задать их можно для слоя, стиля целиком или отдельного абзаца. Для заголовков лендингов и названий товаров это ощутимый выигрыш — меньше ручного подбора переносов и меньше кривых «висячих» слов в узких карточках каталога. Режимы, кстати, работают точно так же и в Sites, Slides и Buzz.
Векторный редактор. Ластик и «заливка по регионам» позволяют стирать части контуров и перекрашивать несколько областей простым перетаскиванием. Переключение на ластик выполняется клавишей Shift+E прямо в режиме редактирования вектора или в Draw. Для иконок, иллюстраций и веб-графики это заметно приближает Figma к привычным векторным редакторам — меньше поводов уходить в сторонние программы ради мелкой правки контура.
Управление для команд. Администраторы теперь могут рекомендовать организации конкретные ресурсы — навыки, шаблоны, библиотеки, Make-киты — и такие ресурсы помечаются отдельной галочкой. Для студий с несколькими проектными командами это удобный способ держать «правильные» библиотеки постоянно на виду, а не полагаться на то, что все и так помнят актуальную версию. На тарифах Organization и Enterprise к тому же доступна централизованная авторизация MCP через провайдера идентификации, например Okta — сотрудникам больше не нужно авторизоваться отдельно в каждом инструменте. Это особенно актуально, если вы подключаете Claude или других ИИ-агентов к рабочим файлам заказчиков и следите за безопасностью данных.
4. Что это даёт интернет-магазинам и приложениям
Соберём новинки в конкретные рабочие сценарии.
Для каталога и карточки товара вертикальный wrap вместе с новыми режимами интервалов делают адаптивную сетку по-настоящему предсказуемой, а Balance и Pretty приводят в порядок названия товаров без ручной правки. Генеративный плагин массово подставляет данные в карточки, экономя часы монотонной работы. Микроанимации интерфейса — кнопки, добавление в корзину, счётчики, раскрытие фильтров — теперь оформляются как анимированные компоненты в Motion и передаются разработчику уже готовым CSS, а не описанием на словах. Агент умеет проверять контраст и, по заявлениям Figma, помогает с доступностью в целом — для магазинов это часть той же работы над конверсией и соответствием требованиям закона. Weave-инструменты дают вариативность фонов и сцен, хотя качество и права на такие материалы всё равно стоит проверять вручную. А на этапе хэнд-оффа MCP-сервер и Dev Mode передают весь контекст кодинг-агентам — если ваши разработчики уже работают с ИИ-ассистентами, макет превращается в полноценный вход для реализации, а не просто в картинку для «перерисовки руками».
5. Корпоративные сайты и лендинги: Figma Sites и CMS
Если задача — лендинг или небольшой корпоративный сайт, стоит присмотреться к Figma Sites. Инструмент позволяет собирать страницы из компонентов со встроенным auto layout, добавлять готовые интерактивные пресеты вроде бегущей строки, кастомного курсора и hover-эффектов, а при необходимости и редактировать код напрямую. CMS вышла в публичную бету ещё в ноябре 2025 года: контент теперь можно менять без правки дизайна, а списки и целые страницы привязываются к коллекциям, которые создаются с нуля, из стартовых наборов или импортом из CSV. В корпоративном сайте это, как правило, блог, кейсы, команда и вакансии.
Что стоит учитывать. Опубликованный сайт получает случайный поддомен figma.site, а свой домен подключается уже позже. Публикации подвержены обычным ограничениям беты. В одном из обзоров зимы 2025–2026 отмечалось, что корзины и оформления заказа в Sites пока нет, многоязычность ограничена, а расширенные возможности CMS остаются в бете — это оценка сторонней студии, и часть ограничений к моменту чтения могла уже измениться, поэтому перед выбором стоит свериться с актуальной документацией. Но в целом для интернет-магазина полноценной заменой платформе это точно не выглядит. А вот для лендингов, промо-страниц и визиток инструмент вполне применим — особенно как быстрый способ показать клиенту «живой» результат вместо статичного макета на созвоне.
6. Веб-графика: от иллюстрации до движения
Для тех, кто делает баннеры, иконки и иллюстрации для сайтов, 2026 год принёс сразу несколько улучшений: ластик и заливку по областям в векторном режиме, шейдерные заливки как новый «материал» для фонов и акцентов, анимацию с экспортом в MP4, WebM, GIF и анимированный SVG, Weave-инструменты для замены фона и смены соотношения сторон, а также заметно больше разнообразия форматов внутри одного файла — без обязательных переходов между программами.
Практический совет по производительности: для веб-графики всегда сравнивайте вес готового результата. Анимированный SVG обычно легче GIF, WebM легче MP4 при похожем качестве, а любой шейдер в боевом проекте стоит обязательно проверять на слабых устройствах перед сдачей клиенту.
7. Что стоит оценить критически
Не все новинки одинаково зрелые, и это в целом нормально для рынка, который сейчас движется настолько быстро. Прежде чем что-то из перечисленного обещать клиенту, стоит держать в голове несколько вещей.
Большая часть перечисленного всё ещё в бете — Motion, агент, шейдеры и генеративные плагины в открытой, code layers в закрытой, Sites тоже в бете, — а значит поведение и условия использования вполне могут поменяться без предупреждения. Бесплатный период на ИИ-функции рано или поздно закончится, и бюджет на кредиты стоит закладывать заранее, а не когда счёт неожиданно придёт по проекту. Всё, что сгенерировано инструментом, всё равно нуждается в человеческой проверке — авторские права, соответствие бренду клиента, доступность для разных групп пользователей. Красота на холсте, как уже говорилось, не равна скорости на телефоне покупателя, и это стоит проверять на реальных устройствах, а не полагаться на просмотр в самой Figma. И отдельный момент про роли в команде: часть отрасли сейчас переживает не самые простые времена, и авторы обзоров прямо пишут о волне сокращений на рынке дизайна. Но автоматизация рутины не отменяет экспертизу в исследованиях, архитектуре информации и работе над конверсией — она, скорее, делает эту экспертизу ещё ценнее на фоне того, что типовые задачи теперь может закрыть и джуниор с агентом под рукой.
Выводы
Главное, что принёс 2026 год, — заметное сокращение расстояния между дизайном и работающим продуктом. Auto layout заговорил на языке CSS, анимация экспортируется прямо в код, ии-агенты понимают контекст проекта и правила конкретной студии, а графика и движение теперь создаются в том же файле, что и сам интерфейс — без постоянных перебросов между программами.
Что стоит внедрять в первую очередь, если вы делаете сайты на заказ. Прямо сейчас — обновить библиотеки под новые режимы auto layout и Balance/Pretty: мелочи, которые дают быстрый и заметный эффект уже на следующем проекте. В ближайшие недели — попробовать Motion на одном реальном проекте: анимированные компоненты кнопок и меню с экспортом сразу в CSS. Как пилот — собрать два-три навыка агента под правила именно вашей студии и посмотреть, сколько реального времени они экономят на типовых задачах. С оговорками — присмотреться к Figma Sites для лендингов и промо-страниц, но не для магазинов с корзиной, а шейдеры и Weave использовать с обязательной проверкой производительности и прав на контент. И в листе ожидания пока оставить code layers и 3D-трансформации — следить за развитием стоит, но обещать их клиентам в текущих проектах точно рано.
Хороший инструмент не заменяет выстроенный процесс. Но в 2026 году Figma заметно сократила число мест, где этот процесс раньше «ломался» на стыке дизайна и разработки.
