Figma добавляет слои кода для интерактивного дизайна

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

Слои кода представляют собой интерактивные элементы, позволяющие пользователям интегрировать код в проекты Figma. Эта функция предлагает полную свободу настройки с помощью встроенного чата на основе искусственного интеллекта и редактора кода. ИИ способен генерировать или улучшать код, основываясь на пользовательских подсказках. Редактор предоставляет пользователям гибкость в написании и редактировании кода с использованием React, TypeScript и Tailwind. Благодаря динамическим свойствам, пользователи могут легко адаптировать поведение слоя, не затрагивая базовый код.

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

Что можно создать с помощью слоев кода?

Дизайнеры могут использовать слои кода для анимации карточек функций. Можно создать эффект подпрыгивания вращения или добавить реакции на взаимодействие с пользователем. Также можно добавить в интерфейс статистику в реальном времени и индикаторы выполнения для динамического отображения данных.

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

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

Каждый слой кода может быть дополнен настраиваемыми свойствами, что обеспечивает его  гибкость и возможность повторного использования. Чат ИИ предложит свойства, соответствующие ожиданиям пользователя, или же пользователи смогут самостоятельно задать необходимые параметры.
Кроме того, существует возможность создавать несколько анимаций для одного и того же слоя кода, сравнивать их между собой и экспериментировать.

Слои кода станут доступны Full seat пользователям с  платной подпиской уже на этой неделе.