Привет, Хабр! Меня зовут Султан, я продуктовый дизайнер в PIX Robotics, где работаю над продуктом PIX Процессы.

Недавно, листая ТГ-канал друга, я наткнулся на интересный виджет в Figma. В голове сразу промелькнула мысль: «Вау, а как это вообще сделать? Это же крутая штука, и она точно нужна моей команде!» — и меня затянуло в воронку изучения темы.

Создание виджетов в Figma — задача нетривиальная, особенно если ты не разработчик. Я попробовал несколько способов решить её, и сегодня поделюсь своим опытом. А также пошагово расскажу, как создал свой виджет на 800 строк кода за несколько дней. Конечно, без ИИ не обошлось.

Figma: виджеты против плагинов

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

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

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

Да, плагины популярнее и проще в использовании, но, если освоить создание виджетов, это может стать мощным козырем.

Как создать виджет, если ты не разработчик?

Вариант 1: Писать код вручную

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

Установил VS Code, открыл документацию Figma Widget API и… через 6 часов получил простенький виджет с инпутами и заголовками.

Что я понял:
Это возможно, если есть база в коде.

НО:

• Но даже с опытом разработки процесс очень медленный (80 строк кода = полдня работы).

• Для дизайнера без бэкграунда в программировании — слишком сложно.

Вывод: если нет времени разбираться в TypeScript, лучше искать альтернативы.

Вариант 2: VS Code + бесплатная нейросеть

У меня уже был скачен VS Code, так что я решил установить расширение с нейронкой к ней. Но, честно скажу, я никогда не подключал нейронки. Так что некоторое время ушло на поиск нужно инфы в интернете. В итоге подключил Mistral (бесплатная модель, работает в РФ без VPN) через расширение Cline.

Что я сделал:

1. Установил расширение в VS Code.

2. Получил API-ключ.

3. Начал генерировать код по промптам.

Плюсы:

• Не нужно писать код с нуля — нейросеть помогает.

• Бесплатно.

Минусы:

• Не всегда точные ответы.

• Нужно постоянно корректировать промпты.

• Только одна модель на выбор.

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

Вывод: вариант для экономных, но не самый удобный.

Вариант 3: Cursor AI — IDE со встроенным ИИ

Я продолжил свои поиски. В итоге, пообщавшись с другими ребятами, они порекомендовали мне Cursor AI — редактор кода с интегрированным ИИ. В отличие от того обходного пути, тут AI встроен в саму IDE, что делает его очень удобным и интуитивно понятным.

Почему он мне зашел:

• Встроенные модели (включая GPT-4).

• 150 бесплатных промптов в месяц.

• Удобный интерфейс, похожий на VS Code.

Мне очень понравился Cursor AI, я купил подписку, зная, что это будет мой основной инструмент. И знаете что? Об этом решении я не жалею ни дня! Потому что:

• Создал 800+ строк кода (вручную правил только 10!).

• Завершил проект за 7-10 дней (вместо потенциальных двух месяцев).

И в итоге у меня готовый рабочий виджет для описания и статуса задач, посмотреть можно здесь.

Вывод: если нужно быстро и качественно — Cursor AI идеален.

Создаем виджет в Figma: пошаговая инструкция

Теперь — к практике. Как же создать виджет? Начнем с основ:

Шаг 1. Для этого нам нужно кликнуть по main menu → Widgets → Development → New widget.

Шаг 2. По клику на “New widget” появляется всплывающее окно, в котором нужно дать название виджету (желательно на английском) и выбрать поддерживаемый виджетом файл: будет только для дизайн-файлов (Figma design) или для файлов и Фигджема (Figma design + FigJam).

Шаг 3. После того как мы это сделали и нажали кнопку “Next”, нам предлагается выбрать один из вариантов шаблонов: Default — пустой, отлично подходит, если вы собираетесь писать с нуля. Simple — пример самого простого виджета. * iFrame — шаблон виджетов, поддерживающий работу плагинов BI и возможность открытия дополнительных окон.

Шаг 4. Как только мы нажимаем кнопку “Save as”, открывается проводник для сохранения рабочей директории. У меня уже заранее на рабочем столе была создана папка Widget, и я решил сохранить там.

После сохранения у нас появляется уведомление, что виджет создан!

Шаг 6. Но если мы захотим перенести виджет в рабочую зону в Figma, то получим ошибку, хотя по идее виджет уже создан.

Шаг 7. Чтобы решить эту проблему, нам нужно в Cursor AI/VS Code открыть рабочую директорию нашего проекта. (Я буду показывать в Cursor AI).

Шаг 8. После нам нужно открыть терминал (горячая клавиша: “Ctrl + J” или кнопка, которую я выделил на скрине красным квадратом) и в нем ввести 3 команды: 1. npm (проверка, что менеджер пакетов работает) 2. npm i (устанавливаем зависимости и устанавливаем пакеты) 3. npm run watch (запуск сборщика) (Фото 8)

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

Мы добавили виджет на холст, увидели, что он запускается. Осталось дело за малым: начать генерировать код с помощью нейронки.

Генерируем код с помощью Cursor AI

Шаг 1. Давайте поменяем цвет и добавим текст. Для этого нам нужно вернуться в Cursor AI и написать промт: "Сделай, пожалуйста, виджет с Автолейаутом, назови его Container, поменяй его цвет на белый и напиши в нём текст 'Вайбкодинг, ребята, творит чудеса'. После того, как нейронка предложила мне версию кода, я принял изменения (рис. 1).

Шаг 2. Если вы возвращаетесь в Figma и видите, что виджет не изменился, выберите виджет, нажмите ПКМ → Widget → Re-render widget. Виджет покажет самую актуальную версию. (рис. 2 и рис. 3)

Вывод: AI — новый must-have для дизайнеров

• Cursor AI — мой топ-выбор (удобство + качество кода).

• Бесплатные альтернативы (Mistral + VS Code) подойдут для простых задач.

• Ручное кодирование — вариант для тех, кто хочет полного контроля.

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

А вы используете Cursor AI и другие нейронки в работе? Делитесь своим опытом в комментариях, делали ли свои виджеты и что лучше всего работает.