Плагин будет интересен продуктовым дизайнерам: попробуйте его для компонентов и компонент-сетов вашей дизайн-системы, он поможет красиво и логично оформлять их и делать матрицы возможных вариантов. Он называется Component Grid Builder. В конце — подробней про его применение.
Но сначала я хотел бы рассказать про процесс, как я его написал. Кто в последнее время не говорил про вайб-кодинг? Слово года!
Вайб-кодинг
Это мой первый плагин для Фигма, и я не написал бы его без помощи Клода. Да, временами было нелегко: написать подобный плагин исключительно вайб-кодингом и запросами в чат не получится (по крайней мере, сейчас), и в какой-то момент мне пришлось вникать в код и помогать Клоду исправлять ошибки.
Всё началось примерно так:
— Чувак, у меня есть идея! Давай напишем плагин? Вот минимальные требования к тому, что он должен делать: …
В ответ я получил три файла кода и отличную инструкцию, как скормить это Фигме, чтоб всё заработало. Первые итерации происходили довольно просто. Я просил что-то изменить, Клод переписывал код, я копировал и заменял файлы. Если возникала ошибка, я копировал её и показывал Клоду, он снова переписывал, я копировал…
Но в какой-то момент я столкнулся с тем, что никакие переписывания плагина самим Клодом в ответ на отправленные ему ошибки из консоли не приводили к какому-то прогрессу. Клод хорошо знает JS, но плохо знает Figma API.
Поэтому пришлось взять одну из последних работающих версий и поменять тактику. Я разобрался в предложенном коде и стал делать более точные запросы конкретных функций, параллельно проверяя их доступность в АПИ Фигмы, уже осознанно меняя код и тестируя работоспособность плагина после каждого значимого изменения. Где-то Клод помог мне понять, что происходит в коде, где-то пришлось подсказывать ему, как можно сделать оптимальней и проще, но самое главное: вместе у нас получилось!
Современные большие лингвистические модели — это, правда, очень хороший и работающий инструмент. Он сильно снижает порог входа в какую-либо тему и помогает очень быстро чему-то научиться. Если вы ещё не пробовали — очень рекомендую. Самое крутое: им можно задавать какие угодно глупые вопросы и получать моментальные ответы. Да, они ошибаются, и все их ответы нужно перепроверять, но в некоторых делах проверять гораздо проще и приятней, чем писать самому. Просто помните, что эти модели в самой своей архитектуре устроены так, чтоб генерировать случайные наборы данных, очень похожие на правду ;)
Про плагин
Я уже писал про плагин на Линкедине, вот ссылка, посмотрите видео. Прямо сейчас я готовлю новый релиз, который позволит настраивать положение подписей (мне не всегда нравится, что они торчат слева и сверху).
Как его использовать?
Самое базовое применение — аккуратно подписать варианты компонент-сета, чтобы было проще работать с ним в дальнейшем и быстро понимать, что компонент может и какой вариант нужно править. Да, есть плагины, которые делают что-то похожее, но они либо делают это не очень красиво, либо недостаточно гибкие.
Кроме базовой функции организации компонент-сетов, вы можете взять любой инстанс, предварительно настроить его так, как вам нравится: изменить текст, включить все скрытые слои (Boolean property); и потом, одним нажатием кнопки плагина сделать матрицу возможных вариантов для того, чтобы наглядно увидеть, как инстанс ведёт себя при применении разных сочетаний свойств.
Зачем это нужно? Чтобы в то время, когда вы редактируете компонент, не забыть про скрытые слои, которые влияют на компонент в определённых состояниях. Они должны смотреться согласованно и не ломать инстанс компонента при включении. В моей практике работы с компонентами это частая история. Когда, например, поменял цвет иконки, которая была видна, а про скрытые — забыл.
Кроме того, такие матрицы позволяют отслеживать, насколько любые изменения компонента-родителя ломают поведение его инстансов. Чтобы дизайнеры, которые пользуются вашими компонентами, не ругали вас после обновления библиотеки, и вам не приходилось бы откатывать последние пуши, вы, как минимум, можете визуально просматривать такие матрицы во время редактирования. А ещё можно делать что-то похожее на скриншотное тестирование: в отдельном тестовом файле держать такие матрицы со всеми возможными вариантами, поверх — скриншот с наложением слоя Difference и любые визуальные отличия при обновлении сразу бросаются в глаза.
Ну и ещё одно небесполезное применение — можете делать красивую документацию для разработки. Рядом с макетами страниц и основным флоу положить красивую раскладку разных состояний компонента, чтобы разработчик быстрее вник и точнее реализовал вашу задумку.
Пожалуй, на этом всё. Спасибо за внимание, пользуйтесь плагином, рассказывайте друзьям, количество пользователей и ваши лайки помогают мне поддерживать и развивать плагин!