Привет, всем! Меня зовут Нурсултан, я продуктовый дизайнер в PIX Robotics, где я работаю над продуктом PIX Процессы. Сегодня хочу поделиться историей, которая, возможно, откликнется у многих. Недавно, просматривая канал друга, я наткнулся на интересный виджет в Figma. В голове сразу промелькнула мысль: "Вау, а как это вообще сделать? Это же крутая штука, и она точно нужна моей команде!" Эти мысли по-настоящему зажгли меня. Я начал активно изучать интернет, искать информацию, просматривать видео и советы. В порыве энтузиазма даже установил VS Code и подумал: "Ну всё, сейчас сам начну писать!" Но спустя полтора часа эйфория улетучилась, и я снял розовые очки. Стало ясно, что для этого нужно изучить слишком много, а на это просто не было времени. Конечно, мне было лень углубляться в тонкости программирования, и я задумался: почему бы не использовать AI? На тот момент в моей голове возникло еще несколько вариантов:

• Просить помощи у разработчиков. Это вариант, безусловно, рабочий, но он требовал времени и усилий от коллег, а процесс мог затянуться.
• Подключить плагин для VS Code со встроенной нейронкой. Это было удобно: вместо кода я писал промты. Но, честно говоря, эффективность меня не совсем устраивала. Поэтому я продолжил поиски. В итоге, пообщавшись с другими ребятами и порекомендовав мне Cursor AI, я решил его попробовать и даже купил подписку, зная, что это будет мой основной инструмент. И знаете что? Об этом решении я не жалею ни дня!

Создаем виджет: пошаговая инструкция Итак, перейдем к главному. Как же создать виджет? Начнем с основ:

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

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

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

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

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

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

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

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

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

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

Заключение Надеюсь, этот мини-гайд был для вас полезен и показал, как можно создавать интерактивные виджеты в Figma, даже не погружаясь в глубины кода. Использование r AI, открывает новые горизонты для продуктовых дизайнеров. А вы используете AI в своей работе? Какие инструменты помогают вам в повседневных задачах?