Figma всегда поощряла сотрудничество между разработчиками и дизайнерами. Он стремится к бесконечной сокровищнице плагинов, созданных сообществом. Нужны 3D элементы? Для этого есть плагин. Нужны абстрактные SVG? Для этого есть плагин, Тоже.
Тем не менее, часть дизайна Figma всегда была относительно статичной — всегда работала с неподвижными прямоугольниками, связанными друг с другом посредством предопределенных пользовательских взаимодействий. Но что, если я скажу вам, что ваши проекты могут внезапно ожить — что они могут быть анимированными, интерактивными и даже с состоянием? Тогда что будет отделять концепцию от реализации?
Figma объявлено в июне что он предлагает виджеты на основе JavaScript. Теперь дизайнеры могут просматривать и внедрять логические компоненты прямо в Figma!
Скажи привет API виджетов! Вы хотите знать, что это такое и как его использовать? Это именно то, что мы собираемся сделать вместе в этом посте.
Виджеты Figma открывают массу возможностей
Представьте, что вы круглосуточно работаете со своим партнером над разработкой приложения для большого ресторана. Вы оба уже работаете над одной и той же доской Figma; вы оба используете один и тот же документ с изменениями, происходящими на лету.
Наверняка вы уже знаете, что совместная работа включает в себя нечто большее, чем просто процесс проектирования:
- управление проектом,
- проведение опросов для сбора голосов,
- импорт и визуализация фиктивных данных,
- и, возможно, даже поиграть в многопользовательскую игру, чтобы остыть после многих часов работы.
Нам просто требуется, чтобы один человек управлял всем и рассылал ссылки другим членам группы. Но о, это не очень эффективно, не так ли?
Ну, вот где виджеты вступают в игру. Мы можем делать все это — да, все — даже не выходя из Figma.
Вот лишь несколько способов использования виджетов в Figma:
Список идет снова и снова. Как видите, уже существует множество виджетов, которые вы можете свободно использовать в своих документах. На самом деле, вы можете добавлять виджеты прямо на свою доску из меню виджетов (Shift+I).
Но мы здесь не для того, чтобы научиться использовать виджеты, потому что это просто. Давайте сделаем то, что у нас получается лучше всего: мы создадим собственный виджет Figma! Этот будет вдохновлен Сайт дизайнерских цитат Криса Койера. Мы возьмем API, загрузим его в виджет, а затем отобразим случайные цитаты прямо в Figma.
Вот что нам нужно
Я не люблю быть вестником плохих новостей, но для того, чтобы разрабатывать виджеты, вы должны быть на Windows или Mac. Пользователи Linux, извините, но вам не повезло. (Вы могли бы еще использовать виртуальную машину если хочешь продолжить)
Мы собираемся загрузить рабочий стол Figma заявление. Самый простой способ начать работу — создать шаблон виджета прямо из приложения.
Давайте создадим новую доску, открыв меню виджетов (Shift+ I), перейдя на Развитие вкладку и создание нового элемента.
После этого Figma предложит вам назвать новый виджет и решить, подходит ли он больше для дизайнерские доски или доски FigJam слишком. Для целей настоящей статьи достаточно первого варианта.
И настройка на этом не заканчивается; Figma также даст вам возможность начать с готового виджета счетчика или альтернативы с поддержкой iFrame, которая также дает вам доступ к API-интерфейсам Canvas и Fetch (а также ко всем другим API-интерфейсам браузера). Мы выберем простой вариант «Пустой», но со временем изменим его сами, чтобы использовать Fetch API.
Затем вам будет предложено сохранить новый проект виджета в специальный каталог в вашей системе. Как только это будет сделано, запустите свой терминал и направьте его в эту папку. Пока не запускайте никаких команд — мы сделаем это позже и целенаправленно получим ошибку с целью узнать больше об API виджетов.
Дизайн виджета
Мы берем дизайн прямо из Сайт дизайнерских цитат Криса Койера. Итак, давайте отправимся туда и углубимся, запустив DevTools.
Два ключевых сочетания клавиш, которые я использую здесь, это Ctrl+Shift+C (или Cmd+Shift+C), чтобы переключить инструмент «Выбрать элемент», и Shift+Click чтобы изменить формат цвета на HEX-код. Мы делаем это, чтобы узнать о цветах, шрифтах, толщине и размерах шрифтов, используемых на веб-сайте Криса. Вся эта информация имеет решающее значение для создания очень похожего виджета в Figma, что будет нашим следующим шагом! Вы можете захватить разработанный компонент и используйте его в своем собственном холсте.
Я не буду вдаваться в подробности, поскольку основная тема этой статьи — создание виджетов путем написания кода. Но я не могу не подчеркнуть, насколько важно хорошо заботиться о своем стиль виджетов… CSS-Tricks уже имеет множество учебные пособия по Figma, ориентированные на дизайн; вы не пожалеете, добавив их в свой список для чтения.
Создание макета для нашего виджета
С дизайном покончено, пришло время убрать наши программистские пальцы и начать создавать шестеренки нашего виджета.
Очень интересно, как Figma переводит свои строительные блоки дизайна в React-подобные компоненты. Например, элементы кадра с функцией автоматической компоновки представлены в виде <AutoLayout /> компонент в коде. В дополнение к этому мы будем использовать еще два компонента: <Text /> и <SVG />.
Взгляните на мою доску Figma.… Я именно прошу вас сосредоточиться на дереве объектов. Это то, что нам нужно, чтобы иметь возможность перевести дизайн нашего виджета в код JSX.
Как видите, наш виджет с котировками требует импорта трех компонентов. Это приличное количество компонентов, учитывая, что полный API содержит только восемь узлов на основе слоев. Но, как вы скоро увидите, этих модулей более чем достаточно для создания всех видов макетов.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;И с этим у нас есть все, что нам нужно, чтобы продолжить и построить скелет нашего виджета, как в React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Этот код очень запутан, если не сказать больше. Прямо сейчас мы не можем отличить слои дизайна друг от друга. К счастью, мы можем легко решить эту проблему с помощью name имущество.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;И, конечно же, мы по-прежнему не видим SVG-файлы с кавычками, так что давайте поработаем над этим. <SVG/> компонент принимает srcсвойство, которое принимает исходный код для элемента SVG. Об этом особо нечего сказать, поэтому давайте не будем усложнять и сразу вернемся к коду:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Я думаю, мы все можем согласиться, что теперь все намного яснее! Когда мы даем имена вещам, их назначение внезапно становится намного более очевидным для читателей нашего кода.
Предварительный просмотр нашего виджета в режиме реального времени
Figma предлагает отличные возможности для разработчиков при создании виджетов, включая (но не ограничиваясь) горячая перезагрузка. С помощью этой функции мы можем кодировать и просматривать изменения в нашем виджете в режиме реального времени.
Начните с открытия меню виджетов (Shift+I), переключившись на вкладку разработки и щелкнув или перетащив новый виджет на доску. Не можете найти свой виджет? Не волнуйтесь, просто нажмите на меню из трех точек и импортируйте виджет manifest.json файл. Да, это все, что нужно, чтобы вернуть его к существованию!
Подождите, вы получили сообщение об ошибке внизу экрана?
Если да, то давайте исследовать. Нажмите на "Открыть консоль» и прочитайте, что он должен сказать. Если Открыть консоль Кнопка исчезла, есть альтернативный способ открыть консоль отладки. Нажмите на логотип Figma, перейдите в категорию виджетов и откройте меню разработки.
Эта ошибка, вероятно, связана с тем, что мы еще не скомпилировали наш TypeScript в JavaScript. Мы можем сделать это в командной строке, запустив npm install и npm run watch. (или же yarn и yarn watch ). На этот раз без ошибок!
Еще одно препятствие, с которым вы можете столкнуться, заключается в том, что виджет не перерисовывается при каждом изменении кода. Мы можем легко заставить наш виджет обновиться, используя следующую команду контекстного меню: Виджеты → Перерендерить виджет.
Стилизация виджета
В нынешнем виде, внешность наших виджетов все еще довольно далеко от нашей конечной цели.
Так как же нам стилизовать компоненты Figma из кода? Может быть, с помощью CSS, как в проекте React? Отрицательный. С виджетами Figma, Найти укладка происходит через набор хорошо документированный реквизит. К счастью для нас, эти предметы названы почти одинаково своим аналогам в Figma.
Мы начнем с настройки двух <AutoLayout /> составные части. Как вы можете видеть на инфографике выше, названия пропсов довольно хорошо описывают их назначение. Это позволяет нам легко перейти прямо к коду и начать вносить некоторые изменения. Я не буду показывать весь код снова, поэтому, пожалуйста, полагайтесь на названия компонентов, чтобы указать, где находятся фрагменты.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Мы только что добились большого прогресса! Давайте сохраним и вернемся к Figma, чтобы посмотреть, как выглядит наш виджет. Помните, как Figma автоматически перезагружает виджеты при новых изменениях?
Но это еще не совсем так. Мы также должны добавить цвет фона к корневому компоненту:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Опять же, взгляните на свою доску Figma и обратите внимание, как изменения могут почти сразу же отражаться обратно в виджет.
Давайте двигаться по этому руководству и стилизовать <Text> компоненты.
Посмотрев на Документация по API виджетов, снова видно, что имена свойств почти идентичны их аналогам в приложении Figma, как видно из инфографики выше. Мы также будем использовать значения из последнего раздела, где мы просматривали веб-сайт Криса.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Добавление состояния в виджет
В настоящее время наш виджет отображает одну и ту же котировку, но мы хотим случайным образом извлечь данные из всего пула котировок. Мы должны добавить состояние в наш виджет, который всем разработчикам React известен как переменная, изменение которой запускает повторный рендеринг нашего компонента.
В Figma состояние создается с помощью useSyncedState крюк; это довольно много React's useState, но требует от программиста указания уникального ключа. Это требование связано с тем, что Figma должна синхронизировать состояние нашего виджета через Найти клиенты, которые могут просматривать одну и ту же макетную плату, но с разных компьютеров.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Это все изменения, которые нам нужны на данный момент. В следующем разделе мы разберемся, как получать данные из Интернета. Спойлер: все не так просто, как кажется.
Получение данных из сети
Вспомните, когда Figma дала нам возможность начать с виджета с поддержкой iFrame. Хотя мы не выбрали этот вариант, мы все же должны реализовать некоторые его функции. Позвольте мне объяснить, почему мы не можем просто позвонить fetch() внутри нашего кода виджета.
Когда вы используете виджет, вы запускаете на своем компьютере код JavaScript, написанный кем-то другим. Хотя все виджеты тщательно проверяются сотрудниками Figma, это все еще огромная дыра в безопасности, поскольку мы все знаем, насколько ущерб может быть создан даже одной строкой JavaScript.
В результате Figma не может просто eval() любой код виджета, написанный анонимными программистами. Короче говоря, команда решила, что лучшим решением будет запуск стороннего кода в тщательно охраняемой среде песочницы. И, как вы могли догадаться, API браузера в такой среде недоступны.
Но не волнуйтесь, Figma решает эту вторую проблему. <iframe>с. Любой HTML-код, который мы записываем в файл, предпочтительно называется ui.html, будет иметь доступ ко всем API браузера. Вам может быть интересно, как мы можем вызвать этот код из виджета, но мы рассмотрим это позже. Прямо сейчас давайте вернемся к коду:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Это общий шаблон для виджета-в-iframe коммуникация. Давайте используем его для получения данных с сервера:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>Мы опускаем обработку ошибок, чтобы все было просто и по делу. Давайте вернемся к коду виджета и посмотрим, как мы получаем доступ к функциям, определенным в <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Как видите, сначала мы сообщаем Figma о доступе к нашему скрытому <iframe> и вызвать событие с именем "networkRequest". Мы обрабатываем это событие в ui.html файл, проверив event.data.pluginMessage.type === 'networkRequest', а затем отправлять данные обратно в виджет.
Но пока ничего не происходит… Мы до сих пор не позвонили в fetchData() функция. Если мы вызываем ее непосредственно в функции компонента, в консоли возникает следующая ошибка:
Cannot use showUI during widget rendering.Figma говорит нам не звонить showUI прямо в теле функции... Итак, куда его поместить? Ответом на этот вопрос является один новый хук и одна новая функция: useEffect и waitForTask. Возможно, вы уже знакомы с useEffect если вы разработчик React, но мы собираемся использовать его здесь для получения данных с сервера при монтировании компонента виджета.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Но это приведет к еще одной «ошибке», когда наш виджет будет постоянно перерисовываться с новой цитатой. Это происходит потому, что useEffect, по определению, срабатывает снова всякий раз, когда изменяется состояние виджета, даже когда мы вызываем fetchData, И хотя есть техника только позвонить useEffect в React он не работает с реализацией Figma. Из документов Figma:
Из-за того, как работают виджеты,
useEffectдолжен обрабатывать вызовы несколько раз с одним и тем же состоянием.
К счастью, есть простой обходной путь, которым мы можем воспользоваться и вызвать useEffect только один раз, когда компонент впервые монтируется, и это путем проверки того, пусты ли значения состояния:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Вы можете столкнуться со страшным «доступ к памяти выходит за пределы” ошибка. Это довольно часто можно увидеть в разработке плагинов и виджетов. Просто перезапустите Figma, и его больше не будет.
Вы могли заметить, что иногда текст цитаты содержит странные символы.
Эти Символы Юникод и мы должны правильно отформатировать их в коде:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>И, Вуаля, наш виджет получал новую цитату дизайна каждый раз, когда он добавлялся на доску дизайна.
Добавление меню свойств в наш виджет
Хотя наш виджет извлекает новую цитату при создании экземпляра, было бы гораздо практичнее, если бы мы могли повторить этот процесс, но не удаляя его. Этот раздел будет коротким, так как решение довольно замечательное. С меню свойств, мы можем добавить интерактивности нашему виджету одним вызовом usePropertyMenu крюк.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}С помощью одного простого хука мы можем создать кнопку, которая появляется рядом с нашим виджетом, когда он выбран. Это была последняя часть, которую нам нужно было добавить, чтобы завершить этот проект.
Публикация нашего виджета в открытом доступе
Нет особого смысла в создании виджета, если, ну, никто использования Это. И пока Figma предоставляет организациям возможность запуска частная виджеты для внутреннего использования гораздо чаще выпускаются эти маленькие программы для всего мира.
У Figma есть деликатный процесс проверки виджетов, который может занять от 5 до 10 рабочих дней. И хотя дизайн виджета цитат, который мы создали вместе, уже в библиотеке виджетов, я все равно продемонстрирую, как он туда попал. Пожалуйста, не пытайтесь повторно опубликовать этот виджет снова, так как это приведет только к удалению. Но если вы внесли в него существенные изменения, поделитесь своим собственным виджетом с сообществом!
Начните работу, щелкнув меню виджетов (Shift+I) и переключиться на Развитие tab для просмотра нашего виджета. Нажмите на меню из трех точек и нажмите Опубликовать.
Figma предложит вам ввести некоторые сведения о вашем виджете, такие как заголовок, описание и некоторые теги. Нам также понадобится изображение значка 128×128 и изображение баннера 1920×960.
После импорта всех этих ресурсов нам все еще нужен скриншот нашего виджета. Закройте модальное окно публикации (не волнуйтесь, вы не потеряете свои данные) и щелкните правой кнопкой мыши виджет, чтобы открыть интересное контекстное меню. Найди Копировать/Вставить каккатегория и выберите Копировать как PNG.
Сделав это, вернемся к модальному модулю публикации и вставим скриншот виджета:
Прокрутите вниз и, наконец, опубликуйте свое модальное окно. Празднуйте! 🎉
Figma свяжется с вами через пару дней и сообщит о статусе проверки вашего модального окна. В случае отказа вам будет предоставлена возможность внести изменения и отправить повторно.
Заключение
Мы только что создали виджет Figma с нуля! Здесь не охвачено много вещей, например события щелчка, формы вводаи намного больше. Вы можете ознакомиться с полным исходным кодом виджета в это GitHub репо.
Тем, кто стремится поднять свои навыки работы с Figma на более высокий уровень, я предлагаю изучить сообщество виджетов и использовать то, что привлекает ваше внимание, в качестве вдохновения. Продолжайте создавать больше виджетов, продолжайте оттачивать свои навыки React, и, прежде чем вы даже это поймете, вы научите меня, как делать все это.
Другие ресурсы
Мне пришлось обратиться к большому количеству документации, пока я делал этот виджет. Я подумал, что поделюсь тем, что я нашел, чтобы помочь больше всего.
