Как продуктовый дизайнер создавал Figma-виджет для дизайн-ревью с помощью ChatGPT: шишки, успехи и промты

Привет! Меня зовут Софья, я продуктовый дизайнер в Альфа-Банке: проектирую разделы Доставки и Чаты, немножко сую нос в дизайн-систему и не в своё дело — как раз об этом я и хочу рассказать в своей статье.

Все дизайнеры регулярно проводят дизайн-ревью и про важность этого процесса уже многие высказались и я здесь не буду вставлять свои пять копеек. В Альфа-Банке дизайн-ревью сборок — обязательная часть процесса разработки продуктов. Без дизайн-ревью ни одну фичу не пускают в прод. И у каждого дизайнера — свой подход к тому, как донести до разработчиков свои замечания, но, как правило, это занимает немало времени и нервов. Меня перед началом каждого ревью охватывала лёгкая паника: мои каракули на скриншотах выглядели так себе, а их подготовка требовала слишком много времени и усилий.

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

Моя интерпретация шаблона для дизайн-ревью оказалась весьма монструозной, поэтому для первой версии виджета было решено оставить только разработку таблицы. Немного подправив структуру в слоях, я выгрузила макет в HTML (при помощи плагина Figma to Code) и приступила к работе над кодом с ChatGPT.

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

Перед началом работы настоятельно рекомендую посмотреть видео Creating Figma Widgets: Introduction. Там показаны все первые шаги, включая создание проекта и возможности Figma API для виджетов.

Прекрасная новость в том, что после создания папки проекта работать нужно всего с одним файлом — code.tsx, проверяя работоспособность виджета прямо в Figma, запустив нехитрую команду в терминале. Я использовала VS Code, где терминал можно открыть прямо в программе, что очень удобно. Остальное — в видео, к просмотру обязательно.

Лайфхак: создайте два виджета — Default и Simple. Первый — для работы над вашей версией, второй — эталонный, чтобы показать ChatGPT контекст и структуру.

И первая набитая шишка: наивная, я думала, что ChatGPT знает, что такое Figma и как писать для неё виджеты. Оказалось, что он фантазирует на полную катушку, и хотя коды выглядели серьёзно, работать в Figma они не собирались.

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

Вторая набитая шишка: сразу после этого я выдала ему всю логику своего виджета, прикрепив изображения и HTML для отображения UI и потребовала полный код. Первая часть этого хода хорошая — опять-таки для контекста. Но с нашим другом важно сохранять итеративность, иначе таким же нубам в разработке, как я, найти, что не так в коде — миссия невыполнима. А сам ChatGPT будет предлагать исправления, которые, скорее всего, ни к чему работающему не приведут.

К этому этапу вот что мы скормили ChatGPT:

• работающий код и логику простого виджета, который предложила нам сама Figma;

• логику работы нашего виджета;

• HTML для отображения UI нашего виджета.

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

Важно указать, если в виджете нужно взаимодействие со «встроенным» меню. Ибо ChatGPT сначала придумал мне такую красивую кнопку внутри виджета для добавления строк, но оказалось, что нужная нам функциональность называется Property Menu. Запоминайте, записывайте, передавайте друзьям и родным — это стоило мне долгого времени поисков.

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

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

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

Ему нужно ещё больше контекста, сложного контекста.

И тут на помощь нам спешат открытые библиотеки виджетов на Github. Благодаря паре примеров, где была похожая функциональность с кнопками и датой, я научила ChatGPT справляться с поставленной задачей. Он оказался способным учеником — скорость освоения на высшем уровне. Мне бы так!

Спойлер этапа 5: заморать ручки, вероятно, придётся уже здесь. Мой виджет отображался, но настраивать корректное поведение его размеров и размеров внутренних элементов пришлось самой, чтобы разобрать ту кучку, что он навалил.

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

ChatGPT любит сбрасывать корректное отображение элементов (ибо он так видит). Поэтому наводить красоту рекомендую в самом конце.

Когда мы убедились, что всё работает, — идём наводить красоту. Тут можно прогнать элементы через ChatGPT или подправить вручную, если хватает знаний. Но готовьтесь, в любом случае, лезть ручками в код — здесь вам пригодится минимальное понимание, как в эту разноцветную уличную магию можно вносить правки. Даже при наличии HTML, ChatGPT не всегда делает всё точь-в-точь, как задумано — он ведь тоже разработчик!

Добавлю здесь ещё про одну набитую шишку: не просите оптимизировать часть со стилями, если вы в этом не разбираетесь. ChatGPT может увлечься и всё испортить. А ваш код всё равно никто не увидит и не закидает комментариями к каждой строке (надеюсь, ни один разработчик не прочитает эту статью).

Ваш виджет, как сын маминой подруги — красивый и работает? Пора выводить его в свет.

Всё просто: есть кнопка для публикации, которая открывает нехитрую форму. Проведите фотосессию вашему виджету, расхвалите его в описании, подберите иконку и не забудьте установить двухфакторную аутентификацию в своём профиле (требование Figma для публикации). Теперь вы — счастливый обладатель виджета, где ни строчки кода не писали сами.

Ну, и подглядывайте в мои промты, которые дали удачные результаты.

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

Говорят, ChatGPT превращает хорошего разработчика в очень хорошего разработчика, а плохого разработчика в разработчика ещё хуже. Что касается дизайнеров — судите сами.

Сейчас виджет опубликован только внутри организации, в которой я работаю. Стоит ли его публиковать в Community? Пишите в комментариях!

Спасибо всем причастным котяткам за поддержку!

У меня всё.