Однострочники в консоли Figma

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

Конечно, если нужна сложная автоматизация дизайна, DevTools’ом не обойтись — надо написать плагин и даже, возможно, опубликовать его Figma Community. Но действительно ли сложна необходимая автоматизация?

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

Готовимся кодить в Figma

Чтобы кодить в приложении Figma, нужно:

1. Run empty plugin.
2. Открыть Dev Tools.

Ага, звучит как что-то на гиковском. Пару минут, и все прояснится, обещаю.

Run an Empty Plugin

Магия: хоп, у вас вдруг полно фантастических возможностей.

Для начала, создайте пустой плагин — прямо в текущем проекте, не в отдельном файле.

Нажмите Plugins → Development → New plugin… и примите предложенные опции.

Теперь запустие его. Да-да, прямо в текущем проекте.

Right-click → Plugins → Development → console-coding

Откройте Dev Tools

Просто нажмите в меню Plugins → Development → Show/Hide console и ваш экран Figma полностью изменится. Повторите, чтоб все это скрыть.

Проверьте, готовы ли вы

Вы готовы писать код в консоли Figma. Проверим.

Введите в консоли figma.currentPage. Нажмите Enter. Не обращайте внимание на то, что там прыгает на экране, просто сделайте.

Откройте выпадайку.

Поздравляем! Теперь у вас есть доступ к в вашему Figma-проекту (и всему подкапотному) через консоль. Теперь научимся делать это регулярно и правильно.

Простые упражнения для разминки

С этого момента нажимайте Enter после ; (или вместо — так тоже работает).

Несколько простых упражнений, чтоб привыкнуть кодить в Figma-консоли.

Простейшая арифметика

Оберните в скобки простую арифметику:

console.log(3*2.5 + 19/4 - 32);        

И сразу же получите ответ.

Как упростить использование объекта figma.currentPage

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

p = figma.currentPage;         

Вы увидите содержимое p, как только выполнится команда.

Как посчитать количество страниц в документе или фреймов верхнего уровня

Посчитать количество страниц в документе:

figma.root.children.length;        

Посчитать количество фреймов верхнего уровня:

figma.currentPage.children.length;
// or
p.children.length;        

И сразу увидите результат сразу

Узнайте немного о себе

Вы — текущий пользователь, так что спросите о текущем пользователе:

figma.currentUser;        

Не стесняйтесь раскрыть выпадающий список

Кто тут ещё?

Задайте почти идентичный вопрос:

figma.activeUsers;

Обычно вы одни, но мало ли что?

Как создать новую страницу или клонировать существующую

Каждый раз, когда вы выполняете эту команду, появляется новая страница.

figma.createPage(); 

Если так не работает, попробуйте клонировать существующую — это работает всегда:

tmpl = figma.currentPage;
tmpl.clone();
tmpl.clone();
tmpl.clone();
...

А теперь к по-настоящему полезным фрагментам кода 😵💫

Пора использовать консоль Figma, чтобы получить более интересные результаты.

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

Каждая из них потребует немного внимания. Надеемся, вы сегодня достаточно сосредоточены.

Быстро меняем цвет фона канвы

Чтобы один раз изменить цвет фона канвы, нужно использовать довольно сложную строку:

figma.currentPage.backgrounds = [figma.util.solidPaint("#FF0000")];  

Слишком много странных символов? Не обращайте внимания, главное, что это работает, правда же?

Естественно, вместо #FF0000 можно использовать любой цвет в формате RGB (не забывайте скобки!).

Не так очевидно, но можно упростить эту строку и переиспользовать её с любым цветом. Просто запустите эту строку ровно один раз

function bg(value) {figma.currentPage.backgrounds = [figma.util.solidPaint(value)];}        

А дальше используйте эту новую функцию столько раз, сколько нужно:

bg("#D79921");
bg("#979736"); 

Да, вы только что создали свою первую функцию — поздравляем!

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

Напишите один раз:

function bgd() { bg("#000000"); }        

…и используйте столько раз, сколько нужно:

bgd();        

Напишите один раз:…

function bgl() {bg("#ffffff"); }        

…и используйте столько раз, сколько нужно:

bgl();

Вместо bgd или bgl, можно придумать и свои названия команд. Напоминаем, скобки обязательны.

Переключаемся между несколькими цветами фона

Если вы используете только два цвета фона, это можно сделать так:

class b { static c = 0; static l = "#D79921"; static d = "#979736"; static g() { if (this.c == 0) { bg(this.l); } else { bg(this.d); }; this.c = !this.c; } };   

Выбрайте какие угодно цвета.

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

b.g();        

Проделайте это сколько угодно раз.

Между прочим, мы только что встретились с объектно-ориентированным программированием. Видите ключевое слово class? Новый значок, новая ачивка, новый уровень. Это без шуток круто.

Создайте 100+ фреймов одной строчкой

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

Это основная цель написания функций: сделать так, чтобы было проще повторять одно и то же действие больше, чем дважды.

function fc(number, space_x, space_y) { const frame = figma.currentPage.selection.find(node => node.type === "FRAME"); f = new Array(); for (i = 0; i < number; i++) { f[i] = frame.clone(); f[i].x = frame.x + (i+1)  space_x; f[i].y = frame.y + (i+1)  space_y; figma.currentPage.appendChild(f[i]); } }        

Затем создайте фрейм, который хотите скопировать. Настолько сложный, насколько захотите. Если уже создали — отлично! Больше ничего не надо делать.

Выберите этот фрейм

И запустите:

fc(100, 7, 3);

Поиграйте с параметрами функции fc() — сколько нужно создать фреймов; space_x и space_y — расстояние между их верхними левыми углами.

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

Ужде готовы сами кодить в Figma?

Вот два ресурса, которые вам точно понадобятся:

Plugin Guide • API Reference

Это расные ссылки, честное слово.