Эта статья — перевод оригинальной статьи «Introducing Figma Make: A new way to test, edit, and prompt designs»

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Сегодня мы представляем Figma Make — новую функцию «prompt‑to‑code», которая поможет вам быстро исследовать, итерировать и дорабатывать - будь то создание прототипов высокой точности или углубление в детали проектирования и кода.

Дизайн — это искусство решения проблем. Но решение проблем не бывает линейным — где оно начинается, где останавливается и как развивается, зависит от того, на каком этапе процесса вы находитесь и куда, по вашему мнению, хотите попасть. В компании Figma мы постоянно ищем способы упростить переход от идеи к работающему продукту. Но так много отличных идей часто остаются нереализованными из‑за нехватки времени, инструментов или знаний. Сегодня мы запускаем Figma Make, новый инструмент prompt‑to‑code, с помощью которого дизайнеры и продуктовые команды могут исследовать возможности, независимо от того, на каком этапе они находятся — тестируют ли они направления дизайна, редактируют код или делают пробный вариант концепции.

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

Начните с дизайна, а не с нуля

Мы считаем, что генеративный ИИ изменит то, кто и как может разрабатывать дизайн, и что сам дизайн станет только важнее в эпоху ИИ. Это потому, что процесс проектирования редко бывает 0–1. Вдохновение дизайнера может начаться где угодно, а не только в точке «0» — ранний эскиз, полностью готовый прототип — и более того, «1» редко бывает конечной точкой.

С Figma Make вам не придется начинать с нуля. Вы можете придать модели дизайн, скопировав существующие кадры из Figma Design с сохранением их структуры и метаданных. Затем, с помощью простых подсказок на естественном языке, Figma Make может преобразовать эти проекты в интерактивный опыт, который вы сможете использовать и который сохранит первоначальный замысел вашего проекта.

От статичного к интерактивному за считанные минуты

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

Интерактивное прототипирование: Превращайте статичные проекты в полностью интерактивные прототипы. Добавляйте анимацию, интерактивные кнопки и обратную связь в реальном времени без сложного кода.
Динамические данные: Тестируйте функции на реальных данных, загружайте файлы, визуализируйте информацию в динамическом режиме и оценивайте дизайн так, как он работает на самом деле.
Отзывчивая адаптация: Трансформация дизайна под разные форм-факторы. Создайте настольную версию мобильного приложения, чтобы протестировать ее на разных платформах.

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

Многопользовательское исследование в режиме реального времени

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

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

Наводи и делай промпт

Figma Make представляет интуитивно понятный подход к редактированию, который соответствует естественной манере общения дизайнеров. Вы можете просто указать на элемент и описать желаемое изменение: «Пусть эта кнопка запускает анимацию» или «Пусть этот элемент реагирует на прокрутку». Такая точность устраняет традиционный разрыв между дизайнерским замыслом и функциональной реализацией. Структурированный подход также сохраняет систему дизайна и иерархию компонентов при добавлении интерактивного поведения, что позволяет поддерживать верность дизайна на протяжении всего процесса.

Бесшовный рабочий процесс от холста до кода

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

Расширение возможностей дизайна

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

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

Представляем Figma Make: новый способ тестирования, редактирования и подсказки дизайна