Улучшение юзабилити плагина в Figma.
Создание плагина Figma: часть 6 из 6
** Код этого раздела находится здесь. **
Хорошо, мы проделали большую работу, но наш плагин по-прежнему выглядит как 🔥 hot trash ™ и ему не хватает реактивности.
🖼 Дизайн
К счастью для нас, у нас есть дизайн, который мы хотим создать:
Глядя на окончательный дизайн, мы видим, что есть несколько вещей, которые нам нужно будет делать каждый раз, когда выбор изменяется:
- Измените цвета элементов.
- Измените текстовые значения.
♻️ Изменение значений текста
Итак, мы собираемся начать с написания некоторых функций в ui.html, которые предотвратят частое повторение этого. Внутри <script/> напишите следующее:
Он принимает два параметра: id, чтобы найти нужный элемент html, и text, которым мы хотим его заменить. Таким образом, мы можем использовать его для замены текстового содержимого следующим образом:
Красиво и чисто.
♻️ Изменение цвета элементов
Теперь мы можем сделать то же самое для изменения цвета элемента, но с некоторыми отличиями.
Во-первых, поскольку мы хотим изменить более одного элемента за раз, мы будем использовать classes, а не ids.
Во-вторых, поскольку мы изменяем элементы p и div, нам нужно проверить, что это за элемент, прежде чем менять цвет:
Мы получаем список всех элементов с определенным именем класса и просматриваем этот список, проверяя тип каждого элемента. Если это div, мы используем background-color: вместо color:, чтобы предотвратить неправильное изменение.
Обратите внимание, как мы используем цикл for для перебора elements? Это потому, что getElementsByClassName() не возвращает array, а вместо этого возвращает «похожий на массив» список, в котором нет таких методов массива, как .map().
Используйте такую функцию changeColor(), чтобы легко изменить цвет сразу нескольких элементов:
Если все пойдет хорошо, мы должны увидеть что-то подобное:
💯 Обновление результатов
С оценками сложно, потому что, когда мы обновляем их, нам нужно изменить и их цвет, и их текстовое содержимое, и мы должны делать это одновременно в двух местах. Мы собираемся написать несколько классов CSS для обработки цвета различных оценок. Мы можем просто написать их внутри <style/> вот так:
Затем с помощью специальной функции мы можем обрабатывать изменение их className и текстового содержимого одновременно:
Прежде чем мы его протестируем, перейдите к code.js и измените вызов figma.showUI() так, чтобы он порождал окно большего размера:
figma.showUI(__html__, { width: 340, height: 405 })
И теперь мы должны это увидеть при тестировании плагина:
Это практически все, что нам было нужно 🎉.
Да, это по-прежнему похоже на 🔥 горячий мусор ™ ️. Если вы хотите стилизовать пользовательский интерфейс самостоятельно, вы можете сделать это здесь. Если вы хотите просто скопировать мои html и css, вы можете найти их здесь. В своей версии я добавил еще несколько изменяющихся элементов, таких как цветные блоки с шестнадцатеричными значениями:
Я не собираюсь тратить время на то, чтобы заставить его выглядеть красиво, но я хочу пройти некоторые дополнительные улучшения, которые я сделал.
Если хотите, можете спокойно здесь остановиться. Код для последнего плагина здесь.
🌯 Связка с Webpack
Если вы скопировали HTML и CSS из ui.html на этом этапе, вы увидите, что у нас все в одном файле из 200+ строк. Весь наш CSS находится в <style/>, весь наш JS находится в <script/>, и все наши SVG встроены в HTML. Это затрудняет чтение, и если бы наш плагин был немного сложнее, это было бы настоящей проблемой.
Облом заключается в том, что если мы захотим разделить вещи на отдельные файлы, это не будет просто работать ™. Что нам нужно сделать, так это использовать нечто, называемое сборщиком пакетов. Все, что для этого нужно, - это взять все наши отдельные файлы, code.js, ui.html, ui.css, и объединить их в один JS-файл и один HTML-файл, которые Figma может читать. Таким образом, мы можем разделить наш код так, как захотим в процессе разработки.
В документации Figma есть пошаговое руководство для этого, поэтому, если вы хотите разделить вещи, я рекомендую следовать ему.
💎 Сглаживание грубых краев
Было несколько случаев, когда плагин не очень понравился.
- Без выбора плагин будет пустым.
- Если пользователь выбирает меньше двух слоев, плагин не отвечает. Это не имеет большого значения, но я думаю, что это немного не работает, поэтому я хотел справиться с этим, выполнив проверку контраста с белым в данном случае.
- Если в выбранных слоях нет заливок, плагин выдает ошибку. Я хочу поймать эту ошибку и представить более полезное сообщение.
Чтобы плагин не был пустым, когда пользователь запускает его, я решил присвоить нашим глобальным переменным некоторые значения по умолчанию, а затем вызвать calculateAndSendContrast() при запуске плагина:
Таким образом, плагин запускается с белым фоном и черным фоном.
Чтобы обрабатывать только один выбранный слой, я извлек фильтрацию, которую мы выполняем для выбранных слоев, в его собственную функцию и добавил событие уведомления, если оно ничего не возвращает:
И затем, когда выбор изменяется, я только проверяю, есть ли на самом деле какие-либо заливки в выделении:
Если есть только одна заливка, я сравниваю с предыдущим значением backgroundColor, которое изначально было белым.
Думаю, на этом все. 🎉
Как всегда, код этого плагина здесь разделен на шаги, поэтому ему легче следовать. Если вы заметили какие-либо проблемы, создайте вопрос по репо или еще лучше сделайте PR 😎
🙏 Кредиты:
- 🙌 Большая часть кода для проверки цветового контраста пришла из блестящего репо для Contratio.com.
- 👊 Таня Херст сделала классную иллюстрацию зебры. Вы можете посмотреть ее дриблинг здесь.
- 😍 Команда Figma и их блестящий инструмент и их блестящие документы. Многие объяснения были украдены с их сайта документации.
- ❤️ Все, кто пользуется плагином Figma. Очень помог поиск прошлых проблем.
