Как я починил огромный баг (фичу) переменных Figma с помощью AI

Я — Арсен, UX/UI / Продуктовый дизайнер. В основном я делаю мобильные интерфейсы и всегда открыт к общению, если у вас есть классный проект, вакансия или просто хотите написать «привет». Чуть больше обо мне тут, в моём тг-канале (там же и мои контакты).

А это история про то, как я не выдержал кривой процесс копирования переменных в фигме и починил его самописным плагином (в написании которого мне помогли AI)

Если вам когда-нибудь приходилось копировать переменные из одного файла в другой, то вы тоже наверняка сталкивались с тем, что Фигма НЕ сохраняет связи между переменными! То есть, если скопировать semantic/brand/primary и base/brand/500 (первый наследует значение второго) — фигма удалит их связь! И оставит связь с другой переменной, оставшейся в изначальном файле. Это ужаснейший флоу. И к сожалению, это фича, а не баг, и они его не планируют чинить.

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

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

Содержание

• Что я делал

• Как я делал

  • Сетап

  • Первая попытка

  • Вторая попытка

  • Дизайн

  • Проблемы

  • Результат

• Терминология

• Послесловие

Что я делал

Так вот, статья эта про работу переменных и их перенос из одного фигма-файла в другой файл БЕЗ потери связей между ссылающимися друг на друга переменными. Признаюсь, это довольно узкая сфера, многие дизайнеры до сих пор даже не работают с переменными (продолжают работать со стилями), не говоря уже о их переносе между файлами. Стили фигма умеет переносить более-менее адекватно, но вот с переменными проблема.

Зачем переносить переменные?

Существуют юзкейсы, когда есть один файл для проекта A, в котором хранится UI Kit для бренда A. К вам приходит бренд Б и для него нужно сделать то же, добавить те же переменные. Вы можете просто продублировать файл, тогда связи сохраняться и всё будет хорошо. Но иногда дублирование это не опция (например, в случае когда уже есть определенный файл бренда B, в котором нужно работать, не создавать новый), – тогда вам приходится копировать переменные. 

Это довольно частый сценарий работы над различными проектами на фрилансе и в студиях (держать один Kit-шаблон и таскать его везде целиком или по частям).

Как переносить переменные?

Вы скажете: хорошо, вот я же могу скопировать переменные из одного файла и просто вставить в другой. Зачем мне какие-то плагины?

Не всё так просто! Скопировать-то – вы скопируете, но фигма изуродует все ваши связи – а точнее он НЕ сохранит логические связи между скопированными переменными, а сохранит её с переменными в файле, из которого вы скопировали. 

Звучит запутанно, поэтому вот иллюстрация:

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

Эта проблема меня огорчала довольно долго, но не сказать, что была прямо супер горящей, но увидев аналогичные запросы в Чате по дизайн системам, я подумал, что надо что-то делать.

Для начала погуглил есть ли уже плагины для этого. Беглый анализ не дал ничего толкового, поэтому я решил что “можно же на AI  написать плагин за полчаса” (спойлер, немного ошибся где-то в 7 раз)

С чего ты взял, что AI справится? (необязательная глава)

Я была ai-диссидентом до ноября 2023 года. Я не знаю почему, но мне не хотелось вникать или использовать его плотно в работе. Максимум, что ему доверял – это гуглёж. Но в один момент решил дать шанс и тех пор я переложил много рутинной работы на нейронки, например первичный ресерч, анализ конкурентов, мета-ресерч (исследование на основе исследований) и тд. Важно, кстати, что слепо верить результатам нейронки нельзя, нужно перепроверять, потому что до сих пор очень много галлюцинаций (выдумывания фактов) и инфы из очень ненадёжных источников.

К моменту, когда я решил писать плагин на figma, я уже знал успешные случаи генерации кода приложений на ai (не истории из интернета, а реальный опыт моих знакомых) и понимал, что это НЕ волшебная пилюля, ai может написать вам самый трешовый код, который даже джуновый джун не напишет. Нейронки сейчас – это как очень мудрый сенсей, вобравший в себя все знания мира (до сентября 2024 года, хех), но страдающий СДВГ и диссоциативными расстройствами в критической форме: периодически путающийся в мыслях, переключающийся на что-то другое и так далее (я спросил у ai,  корректно ли такое сравнение, и он ответил, что более удачное – это сравнить поведение AI с аутистическим расстройством… )

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

Потому, чтобы увеличить шансы на успех, я сразу решил писать максимально подробную задачу, описывая всю логику, все do и dont, что плагин должен делать, и чего не должен.

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

Что должен делать плагин?

Основные крупные задачи плагина, состоят их трёх этапов:

1. Искать алиас-переменные, в которых есть ссылка на другие переменные, не доехавшие до этого файла — либо оставшиеся в другом файле, либо тупо пропавшие без вести,

2. Создавать копии таких пропавших переменных в этом файле,

3. Перевязывать алиас-переменную, меняя ссылку с внешней переменной-спутника (базовой/мастер-переменной) на локальную, которую создал на предыдущем этапе.

Эти этапы можно и нужно декомпозировать на более мелкие задачи. Например, в первом пункте нужно было придумать, в каких границах изменять переменные и как реализовать выбор этих переменных. 

Решил ограничивать локализацию переменных границами коллекции, и для этого уже прописал в задаче логику подгруза коллекций и в какой момент их обновлять (можно было бы заморочится еще больше и давать выбор конкретных переменных, но это бы потребовало ещё более подробного задания для AI и ещё большего времени на дебаг).

Для того, чтобы не было недопонимания, несколько вводных:

1. Это НЕ пошаговое руководство, не оценивайте эту статью так. Это рассказ о моём опыте написания плагина. Тут есть советы и выводы, к которым я пришел, но также тут есть слишком подробные описания конкретно моего кейса и моих проблем, с которыми я столкнулся.

2. Я не писал «функциональный» код, а именно алгоритмы, без которых плагин не может работать.

3. Я писал «не функциональный» код, то есть код, отвечающий за внешний вид. А конкретнее, подправлял CSS и HTML за ai. Но мог бы этого не делать и обойтись без украшательств, последовав совету моей двери ^[2].

4. У меня есть образование в it и некоторые знания программирования, то есть я не совсем «рисовальщик», который дорвался до ai. Но знания далеки от уровня настоящего программиста (на уровне написания дипломной работы — HTML, PHP, JS, SQL).

5. Я знаю, что слово «функциональный» обычно используется в другом контексте :)

1 - Совет моей двери

Как я делал?

Сетап

Для начала сетапнул разработку плагина в фигме, это делается тут, всё очень просто, расписывать не буду

Я решил выбрать плагин с графическим интерфейсом потому что это более удобный и визуально понятный формат для меня (извините консольщики, я всеми фибрами души не люблю текстовые интерфейсы).

На выходе Фигма дала мне файлы, самые важные из которых ui.html и code.js. В них я и работал, их я и таскал с собой из одной нейронки в другую. Как можно догадаться по расширениям файлов – плагины фигмы полностью на вебе (html и javascript)

Перед началом работы с нейронками я советую задать четкое условие вашей коммуникации, а именно:

• Разговаривай со мной только по-русски и не при каких обстоятельствах не переходи на другой язык

• Код и все комментарии внутри кода пиши только по-английски.

• Не нарушай эти правила пока я в явном виде не потребую нарушить их

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

Первая попытка

Так как у меня не было вовсе опыта писания кода на ai, я начал с первого попавшегося – с Perplexity. Это сервис, в первую очередь нацеленный на гуглёжку с источниками, под капотом несколько моделей, GPT 4, GPT 3.5, Claude, Deepseek.

Начал с модели GPT 4.0, потом переключался на Deepseek R1, и Claude 3.7 (в общем, переключался между всеми доступными тогда моделями, сейчас доступно значительно больше).

Во всех случаях результат был, кое-что плагин мог, но основную задачу не выполнял. Модели с большим трудом понимали, что я от них хочу. К примеру, где-то на этом пути нейронки захлебывались в задаче поиска алиасов, они вместо того, чтобы искать информацию о связи переменных между собой, упорно пытались брать информацию о привязке переменной к нодам (объектам на холсте) через boundVariables, что к задаче вообще никак не относятся.

В конечном итоге, Perplexity (и все её модели) уткнулись в стену непонимания – код позволял получить значения мастер-переменных, создавал их копии локально, даже создавал нужную коллекцию, дублируя директорию из изначального файла, но не записывал значения... 

Тут можно понять, что слепое копирование кода никак не помогло бы решению проблемы, потому что AI не понимал, что делает что-то не так. Забегая вперёд, в более приспособленных для кода моделях проблема сохранялась.

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

На каждом таком этапе затупа я заглядывал в api Фигмы и описывал нейронке, что же она всё‑таки делает не так (в силу моих возможностей и понимания, программист из меня не лучший). Я не мог предложить рабочее решение, но я мог хотя бы указывать на нерабочие — это быстрее и эффективнее, чем бездумно кормить нейронку кодами ошибок. Так что просто отключить мозги в процессе «кодинга» всё таки не выйдет, нейронки не такие умные, чтобы заменить вас (технически, они вообще не умные — они «всего лишь языковая модель», как любит говорить Gemini, когда не хочет отвечать).

Вторая попытка

“Наевшись мух”, я собрал свои пожитки (ui.html и code.js) и переехал в пригодную для кодинга нейронку, а именно в Gemini. Лучший способ работать с ним – это через Google AI Studio, там есть более конкретный выбор моделей и тонкая настройка.

На тот момент последняя доступная модель была Gemini 2.0. Из всех вариантов выбрал подходящую для кодинга Gemini 2.0 Flash Thinking Experimental 01–21.

Я скормил Гемини мои файлы, а также добавил подробное описание плагина, со всевозможной дополнительной информацией о том, что он должен делать и чего он делать не должен, какие шаги он должен выполнять. На этом этапе я еще более подробно расписал всё это, так что получилась простыня на 900+ слов

Важно в такой инструкции подсветить детально вот эти моменты:

• Что плагин должен делать
  Хорошо бы показать на примере. Например, тут я описал конкретные переменные, их взаимосвязь, а потом всё, что с ними должно происходить

• Что плагин не должен делать

• Что плагин уже делает
  Это в случае, если вы принесли нейронке какой-то код, а не генерируете его в ней с нуля, а такие ситуации частые, об этом попозже

• Можно упомянуть и описать корнер-кейсы (всевозможные сценарии использования, не только самый “правильный”). Правда, их можно дать нейронке чуть позже, на этапе полировки, когда уже успешный сценарий будет работать

Если что: на момент написания плагина я путался в терминологии (какую из переменных можно называть алиас: 1. обе сразу, 2. ту, которая ссылка, или 3. ту, на которую ссылка). Но, на удивление эти моменты не запутали нейронку. Но на всякий случай, предупреждаю, что в тексте на скринах и в выпадашке ниже есть терминологические ошибки.

Кому интересно это описание лежит вот тут в спойлере:

Инструкция, которую я дал Gemini

Привет, я пытался создать плагин для figma который будет брать переменные (variables) и если они ссылаются на внешние переменные‑алиасы (находящиеся в другом файле) — создавать их копии локально (с учетом директории, то есть если нужно то и создавать коллекции соответствующие), а потом заменять внешнюю переменную‑алиас внутри значения переменной с алиасом, на новосозданную копию этой переменной‑алиас.

Я давал примеры и инструкции другой LLM и она мне создала код для плагина для фигма. Теперь у меня есть код для code.js и для ui.html, но плагин не работает в полной мере

А вот вся логика плагина с примерами:

Пример, абстракция, для ясности:

есть файл Donor, в нем есть 2 коллекции: первая Core, где лежат переменные по типу 40x с числовым значением 160. Помимо этого есть вторая коллекция, которая называется semantics. И в этой коллекции находится одна переменная size с числовым значением‑алиасом, которое наследуется из переменной 40x, которая в другой коллекции (то есть 40x это alias для этой переменной size). Помимо этого есть и другая переменная «size 2» которая так же имеет переменную‑alias в качестве значения (она называется 80x subling и имеет значение 320), но в этом случае alias находится в той же директории (в той же коллекции и в той же папке).

Также есть второй файл Target, в котором есть только одна коллекция (она может быть названа Semantic то есть так же как в первом файле, а может быть названа по‑другому, надо учесть все варианты) в этой одной коллекции скопированная из первого файла переменная size, size 2 и 40x subling

Из‑за особенностей figma первые две переменные при копировании в Target ссылаются на внешние alias. То есть переменная size содержит ссылку на внешнюю переменную 40x, а size 2 ссылается не на локальную копию 80x subling, которая была скопирована в Target вместе с size 2, но на 80x subling из файла Donor (то есть не важно переменная‑алиас лежала рядом с переменной, содержащей её, в файле Donor или в другой коллекции, figma не копирует эту переменную в Target файл, не сохраняет связь с скопированной переменной, а вставляет ссылку на нее во внешнем файле).

Изначально я предполагаю что у этих переменных «size» и «size 2» только один mode, но учти ситуацию, если там несколько модов (то есть если значения алиасы есть в нескольких модах, то нужно создавать и моды при копировании и заполнять эти значения, а если у пользователя нет прав на создании модов (если у него free plan, то нужно ему об этом сообщить явно и скопировать только один мод).

Мне нужно чтобы в независимости от того в какой коллекции скопированная мной переменная, и в независимости от того как она называется и как называется ее коллекция — мне нужно чтобы плагин брал все переменные в определенной коллекции (нужно предусмотреть выбор коллекции, и сделать для него графический элемент выпадающего меню в ui.html, после выбора коллекции пользователь нажимает на кнопку Localize и запускает работу плагина) и искал в них все значения которые являются ссылками на алиасы (aliases), находящиеся в другом файле. После чего плагин создает копию той переменной (в моем примере это переменная 40x) в текущем файле (в примере это Target). При этом нужно учесть в какой коллекции находится эта переменная. Если в коллекции с таким же названием как и выбранная коллекция в текущем файле (в примере коллекция Semantic в файле target), то плагин должен создать локальную переменную в этой коллекции. Если переменная из donor находится в коллекции называемой по‑другому, то нужно проверить есть ли локальная коллекция с таким же названием, если нет, то создать её, а потом создать в ней переменную (в примере это переменная 40x).

После создания переменной (которая является alias‑переменной, она же в примере называется 40x) плагин должен заменить значение в переменной с внешним алиасом (в примере это значение в переменной size, равное другой переменной алиасу 40x) на значение соответствующее локализованной (созданной на прошлом этапе локальной переменной(в примере это локальная переменная 40x)).

Значение для переменной, которую локализовывает плагин, нужно брать из значения переменной‑алиаса вставленного в переменную с алиасом. В примере это значение нужно взять из внешней переменной 40x, которая алиас для переменной size.

Также добавь вывод в консоль ошибок на каждом этапе выполнения задачи, чтобы можно было понимать где произошла ошибка

После того как я дал эти инструкции, я получил код для ui.html и для code.js (прикрепляю их в виде файлов для тебя). Но плагин выдает ошибки, вот такие:

[копипаста ошибок из консоли]

Что делает плагин:

1. Он успешно считывает существующие коллекции

2. Успешно узнает переменные алиасы

3. Успешно копирует переменные алиасы, при этом успешно создает коллекцию для них, если это нужно, а если такая переменная уже есть, то не копирует а пытается изменить ее значение

Что плагин не делает, но должен делать:

1. Он некорректно копирует значение для скопированных и создаваемых переменных, то есть он копирует условную переменную 40x, но не может вставить ее значение 160, и в итоге выдает ошибку.

2. Не идет на следующий этап — то есть не связывает переменные, содержащие внешние алиасы с локальными алиасами (не переприсваивает значение этим переменным). В примере это переменные size и size 2, он не заменяет их алиасы на локальные

Не забывай size и size 2 это примеры, плагин должен работать для любых других переменных с любыми значениями (текстовыми, числовыми, цветовыми и boolean)

Пожалуйста, изучи код который я прислал, изучи логи ошибок из консоли приложения figma, изучи вышенаписанную задачу, а также изучи документацию фигма (ссылка) и если возможно историю сообщений в discord-сообществе для комьюнити разработчиков плагинов для figma (вот ссылка)

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

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

После этого приступил к корнер-кейсам. Вот некоторые, которые нужно было учесть:

• Случай, если мастер-переменная лежит рядом, а не в другой коллекции,

• Если мастер-переменная уже существует в целевом файле, то нужно переписать значение переменной (а не пытаться создать такую же переменную),

• Если существую моды, то нужно их также заполнять значения для модов,

• Если у пользователя нет доступа к созданию модов, но он пытается локализовать переменную с несколькими модами, то нужно локализовать только доступный первый мод и сообщить об этом в статусе.

Конечно, я не учёл все-все варианты. Например, пока писал статью, понял, что если есть саблинг-мастера (те, что лежат рядом с алиас-переменными), то название целевой коллекции должно совпадать с названием донорской коллекции (той, из которой скопированы переменные), иначе плагин создаст для локализации новую коллекцию с названием как в доноре. 

В итоге, с помощью Gemini, я получил сырую версию плагина, которая работала на уровне mvp (минимально жизнеспособного продукта) — например, в ней отсутствовала возможность выбора коллекции для локализации, она учитывала только числовые переменные, интерфейс состоял из одной кнопки «Localize», статус системы никак не показывался, а еще не было переключения языка.

Только когда я достиг полностью функционирующего кода – я начал работать над этими доп.функциями и добавил: 

1. Механизм локализации переменных всех типов, 

2. Функционал выбора коллекции, 

3. Показ статуса системы, а именно прогресса локализации (поэтапный вывод логов),

4. Подсчет и показ количества локализованных переменных в реальном времени,

5. Русскоязычную версию интерфейса с переключением и так далее. 

По сути, это старый как мир принцип “от простого к сложному” (итеративное усложнение). Но напоминаю, на случай если вы забыли

И уже после того как все доп.функции были готовы я занялся дизайном

Дизайн

Дизайн набросал в фигме, экспортировал в html+js с помощью плагина Figma to Code (HTML, Tailwind, Flutter, SwiftUI) от Бернардо Феррари (кстати, отличный плагин и абсолютно бесплатный, к тому же недавно обновился, стал ещё отличнее). Потом накормил этим Gemini и попросил натянуть этот дизайн на его ui.html.

Вышло это не идеально, но близко к истине. Тут-то мне пришлось подключиться и править css  и немножко html. Но, повторюсь, мог бы не делать этого, плагин уже работал.

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

Вот текст инструкции для анимации стрелочки при открытии селекта на одном из этапов, для наглядности:

Инструкция-описание анимации селекта

Я делаю плагин для figma который берет все алиасы у переменных и проверяет не ссылаются ли они на внешние переменные (то есть на те которых нет в этом файле) и локализует их, то есть создает локальную копию и перевязывает переменные с внешних алиасов на локальные. Плагин работает отлично,всё супер. Вот его файлы ui.html и code.js/ есть только одна проблема в ui есть селект и в нем стрелочка, этап стрелочка анимируется когда дропдаун открывается (она вращается по часовой стрелке 180 градусов) и когда дропдаун закрывается эта стрелка ДОЛЖНА (но не делает так) закрывается независимо от того как закрылся дропдаун. То есть если я нажал escape или если я выбрал пункт в select или если я нажал за пределы, или если я нажал на лейбл и так далее — если закрыл дропдаун, то должна сработать анимация возврата стрелочки в исходное положение. но сейчас не так. Вот как сейчас: стрелочка возвращается только если кликнуть за пределы селекта и его лейбла, если же кликнуть по селекту, то анимация возврата не срабатывает, если нажать escape тоже, если выбрать вариант в дропдауне — тоже анимация не происходит стрелка не возвращается. А если нажать на лейбл этого селекта то анимация начинает срабатывать и прекращает, то есть происходит конфликт.

Попробуй починить именно эту анимацию остальной файл не трогай.

Проблемы

Пару слов про основные проблемы в кодинге через нейронки:

1. Нужно всё очень подробно разжевывать (описывать ожидаемый функционал селекта будто ребёнку объясняешь ядерную физику),

2. Принять, что код будет перегруженным и явно не в лучших традициях хорошего программирования,

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

Первый и второй пункты были ожидаемыми, но третий оказался неожиданностью. Кто бы мог подумать, что через 300к затраченных токенов Gemini начинает галлюцинировать и игнорировать задачи (например, начинает разговаривать со мной на английском, а иногда даже на Лаосском, если правильно помню)

Благо, чаты в Google Ai Studio бесконечные (единственное ограничение - 1 миллион токенов на чат, но как вы могли догадаться, столько нам не понадобится ).

Результат

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

А вот и сам плагин:
Ссылка на плагин

Честно говоря, это невероятно приятное чувство когда ты не просто что-то сделал и бросил это в воду, а реально пользуешься этим. То есть как минимум для одного человека этот плагин уже стал невероятно полезным. Я надеюсь будет полезен и вам.

А вот видео-демонстрация работы плагина:

Да, да в нём есть маленькие багиги, но они касаются интерфейса (и большинство связано с дропдауном, не смог я его обуздать пока что например, сворачивается не корректно если кликнуть по его названию)

Скоро планирую починить баги, добавить к плагину тестовый файл с наглядной инструкцией и сделать весь плагин open source (опубликовать на гитхабе). Следите за обновлениями. 

Легче всего это делать в тг-канале (я публикую очень редко, daily-спама не будет)

Терминология (пропустить, если вы сеньор-помидор)

Фигма?

В продуктовом дизайне основной инструмент для работы — это Figma, кто‑то использует Pixso, кто‑то умудряется работать в PenPot, но самый популярный инструмент это Figma и… он очень далек от идеала. К примеру, на момент написания этой статьи, Фигма выкатила невероятное обновление переменных, которое позволяет… менять коллекции переменных местами и моды тоже… Ну то есть делать то, что должно было быть с первого дня релиза, но ждали эту функцию годами.

Переменные?

Переменные — это то, что пришло на смену Стилям в Фигме (если говорить про оформление) и приближающее дизайн к разработке. Они упрощают работу многократно в случае если вам внезапно понадобится изменить какой‑то цвет во всём макете. Например, без переменной вам придется изменять этот цвет поочередно во всех местах, а с переменной цвета — только в одном (в переменной). 

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

Вот иллюстрация:

На изображении показаны различия между подходом без использования переменных цвета (то есть с сырыми значениями) и с использованием переменной цвета. Если вам внезапно понадобиться изменить бренд цвет, то во втором случае вы это сделаете один раз, а в первом – потенциально бесконечное количество раз.

Сейчас для эффективности принято переходить на Переменные, потому что их сфера применения шире, чем у стилей и они легче выгружаются в json формат токенов.

Стили?

Стили это старый формат хранения повторяющихся данных для оформления. Отличия от переменных в том, что внутрь стиля можно засунуть несколько слоёв цвета и даже градиенты, плюс они работают и для эффектов. Переменные же могут содержать только одну единицу информации (один цвет, один текст, одно число, одно булево значение). 

Токены?

Токены это буквально переменные в фигме*. Токен (как и фигма-переменная) – это прото-переменная, которая записана в неком условном формате, и из которой потом можно получить форматы для конкретных платформ. 

* – Правильно будет сказать что переменные в фигме это просто другое название токенов. При этом переменные в фигме это не то же, что и переменные в разработке. Из-за такой запутанности часто можно встретить заявления, что Переменные в фигме это не токены, просто потому что человек сравнивает с токеном концепцию переменной в ее каноничном значение, а не в значении «токен, который называют переменной (variable) в программе Figma»

Коллекции переменных?

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

Алиас? это игра что-ли?

Алиас (псевдоним, ссылка) — это переменная, ссылающаяся на другую переменную (которую принято называть базовой переменной, но я ещё называю переменная‑мастер). От английского alias — рус. псевдоним, иногда пишут как «элиас» или даже «эйлиас».

Понятнее будет рассказать на примере компонентов в фигме: представьте, что есть переменная‑инстанс и ее переменная‑мастер. Переменная инстанс копирует значение переменной мастера, то есть является её псевдонимом. Если изменить в мастере, то поменяется и в инстансе. Также как и в переменных инстанс тоже можно сделать чьим‑то мастером и тогда изменения в нем уже будут влиять на его инстансы.

Но в отличие от компонентов переменные‑алиасы можно перецеплять к другим переменным‑мастерам безболезненно. Хотя... в компонентах тоже, можно сказать, есть такое, — я про swap instance.

Довольно аналогий, вот картинка:

На изображении показана переменная-алиас (псевдоним, ссылка), переменная-мастер, на которую та ссылается, и сырой цвет, который привязан к переменной-мастеру.

Послесловие (необязательно)

Примерно в те же дни, как я дописал плагин, возник термин Vibe coding (придумал не я, но забавное совпадение). Я уже хотел назвать свою эту деятельность этим словом, но есть большие отличия.

Строго говоря, vibe coding – это кодинг в котором оператор ИИ не включает мозги, и даже не пытается уточнять задание или направлять нейронку. Всё что он делает, это копипастит коды ошибок без доп. комментов. В моем случае, я как раз изучал код, изучал ошибки и предлагал решения. Если бы я этого всего не делал, то провозился бы с этим плагином не 23 часа, а намного дольше. Поэтому, назвать свою работу вайбкодингом было бы обесценивающим занятием :) пока что ai не на том уровне чтобы улавливать на лету и работать за тебя

А главный вывод этой истории: 
я сделал что-то полезное (для себя и потенциально для других). Сделал бы я это без AI? Скорее всего нет, или же не в ближайшем будущем, потму что пришлось бы вычитывать много форумов и сидеть на stackoverflow 24/7 (как делал раньше, до этих ваших нейронок).

Ai не украл мою работу, но сократил её, убрав долгую и тяжелую часть :)

Прошу простить за много букв. Всем удачи и спасибо за рыбу