Adobe xd как установить плагин
Обновлено: 04.07.2024
Хотя уже в 2015 году мы переключили внимание на Avocode, как на отдельное приложение, нам все еще нужно было создавать плагины для инструментов дизайна, чтобы помочь дизайнерам легко синхронизировать проекты с нашей платформой. И поскольку инструменты дизайна постоянно меняются, нашим плагинам приходилось не отставать.
В этой статье я хотел бы поделиться с вами нашим опытом создания плагинов.
Что вам следует знать перед тем, как мы начнем:
Adobe Photoshop и Adobe Illustrator также имеют возможности добавления надстроек, но давайте рассмотрим их в другой раз, поскольку дизайнеры веб-приложений и продуктов используют их все реже и реже.
Привет, мир дизайна
Давайте посмотрим на экосистемы Sketch, Adobe XD и Figma и попробуем создать очень простой плагин для каждой платформы. Наш плагин просто распечатает несколько артбордов и страниц дизайна, назовем его My Design Stats.
Перед тем как приступить к работе, убедитесь, что в вашей системе установлена последняя версия Node.js. Еще один момент, приведенные ниже команды написаны и протестированы на macOS. Они будут аналогично работать в Linux, и с небольшими изменениями в Windows.
Плагин Sketch
Отличным инструментом для Bootstrap плагина Sketch (а также его распространения) является Sketch Plugin Manager, также известный как skpm. Мы можем использовать его для создания структуры каталогов, а также копирования множества скучных файлов, необходимых для основных случаев использования. Давайте воспользуемся шаблоном с предварительно настроенным Prettier.
В настоящее время структура каталогов, созданная skpm, выглядит следующим образом:
Мы попробуем разобраться в текущем дизайне и подсчитать количество страниц и артбордов. Для этого мы изменим my–command.js.
Мы можем запустить npm run watch в Терминале. Тогда код, который мы изменяем, автоматически перестроится, и последняя версия будет доступна в Sketch.
Чтобы упростить эту часть, давайте просто изменим описание и имя команды, добавим ей иконку и ярлык. Все это мы делаем в manifest.json.
Также необходимо указать skpm, чтобы он добавил иконку в окончательный пакет плагина. Для этого нужно добавить “assets“: [ “./icon.png” ] в часть “skpm” в package.json. Чтобы увидеть изменения, которые мы внесли в манифест, нужно перезапустить Sketch или отключить и включить наш плагин в меню Plugins → Manage Plugins…
Вуаля! Весь упомянутый здесь код также доступен в репозитории Github.
Знаете ли вы, что файл .sketch – это просто ZIP-архив с кучей JSON и растровых изображений внутри? Это довольно хорошо расписано. Но для проверки внутренней части файла Sketch вам не всегда нужен Sketch.app, вам поможет инструмент командной строки sketchtool 🙂
И еще: обратите внимание на Assistants, они помогают дизайнерам стать более организованными!
Плагин XD
Процесс создания плагина для XD начинается немного иначе. Мы должны зарегистрироваться в console.adobe.io, где мы создаем проект, добавляем плагин XD и загружаем сгенерированную структуру папок. Выглядит это так:
Нам нужно создать каталог разработки в
/Library/Application Support/Adobe/Adobe XD и переместить в него нашу загруженную папку (пакет). После этого мы обновляем страницу плагинов XD с помощью сочетания клавиш CMD + SHIFT + R, после этого мы должны увидеть наш плагин.
По умолчанию он генерирует фиолетовый прямоугольник с помощью модуля scenegraph. Давайте изменим его, чтобы он делал то же самое, что и наш плагин Sketch. В XD нет страниц, поэтому он будет считать только артборды.
Команда XD предлагает библиотеку набора плагинов, которую вы можете импортировать и использовать их диалоговые окна. Если вы создаете крупное приложение с более сложным интерфейсом, вы можете использовать React или Vue.
Кроме того, мы должны в манифесте присвоить плагину имя.
Все находится в репозитории Github. Перед загрузкой в Adobe Console убедитесь, что ваш плагин правильно упакован. Вы должны упаковать его в ZIP-архив и переименовать в XDX, иначе XD не воспримет его как «комплект плагинов». После этого команде Adobe потребуется до 10 дней, чтобы одобрить вашу работу и внести ее в список плагинов XD 🤷🏻♂️
Однако, scenegraph – это гораздо больше, чем просто подсчет артбордов или слоев – вы можете делать практически все, что пользователи могут делать в XD вручную. Помимо scenegraph, вы можете использовать API-интерфейсы UXP нижнего уровня для связи с ОС, файловой системой или Интернетом; вы можете использовать облачный модуль для обмена прототипами и проектными спецификациями; и вы можете использовать Cloud Content API для поиска файлов XD в облаке.
Плагин Figma
Откройте Figma, перейдите в меню Plugins → Manage Plugins и выберите Create new plugin. Вы выбираете шаблон, присваиваете ему имя, и Figma создаст для вас все основные файлы. Кроме того, они сразу же предпочитают Typescript.
Открыв дизайн, мы можем увидеть его в меню Plugins → Development. По умолчанию он формирует 5 прямоугольников, поэтому давайте изменим его. Перед этим обязательно установите Typescript, Figma typings и соберите плагин.
Для правильной работы нам нужно заново собрать код, запустив npm run build. После этого мы можем использовать сочетание клавиш CMD + OPTION + P для запуска последнего плагина.
Чтобы добавить функциональность аналогичную той, что была у нас раньше в Sketch, нам нужно добавить скрипт watch и установить библиотеку nodemon, которая будет следить за всеми изменениями в нашем коде.
Наш package.json теперь выглядит так:
Теперь мы можем просто запустить npm run watch, и наш код будет автоматически перекомпилироваться после каждого изменения.
В Figma также есть страницы, как в Sketch, а артборды называются фреймами. Мы посчитаем и страницы, и фреймы. Figma внедряет глобальный объект figma, в котором мы будем искать root узел документа. Этот узел содержит древовидную структуру со страницами и их дочерними элементами. Однако будьте осторожны, страницы могут также содержать слои, не связанные с фреймами, поэтому нам нужно отфильтровать их.
Довольно просто, код находится на Github. Если нужно, вы также можете использовать React или вызвать общий Figma API где угодно.
Дополнительные ресурсы для разработчиков плагинов
Ниже представлены ссылки на полезные в разработке плагинов ресурсы:
Для Sketch
Для Adobe XD
Для Figma
И если вам действительно нужны плагины для Adobe Photoshop или Illustrator, посмотрите на Common Extensibility Platform, которая в какой-то момент будет заменена на Unified Extensibility Platform, о которой мы упоминали ранее 😉
Привет Avocode
Мы всегда заботились об инклюзивном процессе проектирования – об интеграции с основными инструментами дизайна, оптимизации для всех операционных систем, поддержке сообщества разработчиков ПО с открытым исходным кодом, и привлечении всех заинтересованных сторон к процессу проектирования.
Последним доказательством этой приверженности стал наш новый инструмент для копирайтеров и UX копирайтеров под названием Avocode Write. Он позволяет в браузере редактировать текст проектов Sketch, XD и Figma. А поскольку мы говорим о плагинах, он взаимодействует с нашими плагинами Sketch и Adobe XD, чтобы дизайнеры могли возвращать текстовые изменения обратно в инструмент дизайна, если им нужно отрегулировать длину текстового поля или доработать макет. Аналогичный плагин скоро будет доступен для Figma.
Итак, как мы добавили новую функциональность Avocode Write в наши плагины?
В отличие от многих популярных плагинов для инструментов дизайна, Avocode хочет, чтобы собственные плагины были очень легкими. Поэтому мы берем на себя большую часть тяжелой работы приложения Avocode и нашего Open Design API. Наши текущие плагины устанавливают связь с приложением Avocode. Avocode Write предоставляет нам нужный функционал:
- возможность обновления текстовых слоев в пакетном режиме
- поддержка действий отмены и повтора
- синхронизация обновленного дизайна с Avocode (чтобы источник правды оставался доступным для остальной команды)
Давайте рассмотрим каждый инструмент дизайна отдельно.
Sketch
Связь между Sketch и Avocode осуществляется через файлы JSON с расширением .avo, содержащим «синхронизирующие» данные. Плагины Sketch сохраняют этот файл sync.avo во временный каталог и запрашивают у ОС открыть файл в приложении Avocode. Затем приложение обрабатывает этот «открытый запрос» и действует соответствующим образом.
Связь между Avocode и плагином осуществляется путем открытия URL схемы протокола Sketch. Приложение Avocode просто запрашивает у ОС открытие URL-адреса, и позаботится обо всем остальном.
После того, как плагин Avocode Write получает сигнал об обновлении текстовых слоев в файле, он анализирует слой и переопределяет идентификаторы, а также заменяет текст и переопределяет содержимое в DOM-подобном представлении слоев дизайна Sketch. Тот самый, который мы использовали для подсчета страниц и артбордов раньше.
Мы объединяем все изменения в один элемент истории:
И мы снова синхронизируем обновленные дизайны с Avocode через файл .avo. Прежде чем продолжить, мы фактически минимизируем ваш файл Sketch, чтобы загружать только артборды, которые изменились с прошлого раза. Вы можете создавать версии файлов Sketch в Avocode, и мы автоматически определяем версии и минимизируем изменения за вас. Во время поиска различий в дизайне мы вычисляем контрольные суммы частей JSON в файле Sketch и выясняем, какие из них были затронуты. Мы также просматриваем все символы, используемые в измененных артбордах, и находим все артборды, в которых используются измененные символы. Таким образом, мы всегда можем регенерировать целые файлы Sketch в нашем Open Design API. Здорово, правда?
Adobe XD
Figma
Выберите Плагины > Разработка > Создать плагин . Откроется консоль разработчика Adobe I/O.
Дополнительные сведения о том, как создавать, тестировать и отправлять плагины, см. в документации разработчика Adobe XD.
Чтобы увидеть, какие плагины доступны для установки, выберите Плагины > Изучить плагины или щелкните значок Плагины на панели инструментов. Затем щелкните значок Изучить плагины (+), чтобы запустить панель плагинов.
A. Плагины B. Просмотр плагинов
На панели плагинов перейдите на вкладку Обзор и воспользуйтесь полем поиска, чтобы найти список доступных для установки плагинов.
Для установки плагинов воспользуйтесь любым из следующих параметров:
- На панели плагинов выберите вкладку Обзор, затем выберите плагин и щелкните Установить .
- Если вы получили пакет плагинов с расширением файлов .xdx, вы можете установить его двойным щелчком по нему.
Чтобы просмотреть и изменить свойства установленного плагина из XD, нажмите значок Плагины на панели инструментов. В ыберите установленный плагин для отображения модального окна с действиями и свойствами плагина.
На панели плагинов выберите многоточие (. ) рядом с установленными плагинами, затем щелкните Удалить.
Узнайте, как добавить больше возможностей в Adobe XD. Найдите последние бесплатные плагины и автоматизируйте повторяющиеся операции или части рабочих процессов дизайнера, которые утомительны, сложны или монотонны.
Adobe XD содержит плагины и интеграции приложений от Adobe и сторонних разработчиков, которые улучшают технологический процесс проектирования за счет автоматизации сложных и повторяющихся задач и обеспечения глубокой интеграции с внешними инструментами и сервисами. Например, если надо использовать Google Maps, вы можете выполнить установку с помощью стороннего плагина, чтобы добавить это приложение в рабочую среду XD. Ознакомьтесь с этой статьей в сообществе Adobe, чтобы подробнее узнать об использовании Google Maps в проектах XD.
XD также поддерживает внешние интеграции, такие как Jira и расширения внутри приложений, обеспечивая дизайнеров и участников проекта полным набором решений.
Чтобы просмотреть список доступных для XD плагинов, перейдите на страницу ресурсов Adobe XD.
Для создания, просмотра плагинов и управления ими необходимо иметь XD версии 13.0. Разработка и управление плагинами поддерживаются на платформах Windows и MacOS.
Воспользуйтесь любым из следующих параметров для просмотра и установки плагинов:
- На главном экране выберите Надстройки > Плагины , чтобы открыть панель плагинов.
- Нажмите значок Плагины на панели инструментов и выберите Изучить плагины или нажмите значок +, чтобы открыть панель плагинов.
Поиск. В Adobe XD можно выполнять поиск и установку плагинов и интеграций приложений от Adobe и сторонних разработчиков, которые улучшают рабочий процесс за счет автоматизации и глубокой интеграции с внешними инструментами и сервисами.
Например, используйте плагин Adobe Asset Link для просмотра, поиска и загрузки ресурсов в AEM в рамках XD.
Обзор. Ищите и фильтруйте плагины по таким параметрам, как категория, самые недавние, самые рекомендованные и самые популярные. Вы можете оценить плагин только после его установки.
Управление. Просматривайте список всех плагинов, которые установлены в вашей системе. Сортируйте плагины по таким параметрам, как имя или последнее обновление. Нажмите значок с многоточием (. ) на плагине, чтобы отключить или удалить его.
На сегодняшний день Adobe XD предлагает плагины, которые обеспечивают управление процессом, автоматизацию, публикацию, утилиты доступности и более тесное сотрудничество между дизайнерами, разработчиками и заинтересованными сторонами, с которыми они работают. Все эти аспекты очень важны для дизайнеров, так как до сих пор им приходилось тратить очень много времени на импорт, сохранение, экспорт и загрузку материалов между несколькими разными платформами.
Чтобы улучшить ваш рабочий процесс, мы подобрали самые лучшие плагины для Adobe XD.
Что на самом деле делает Adobe XD?
Adobe XD – это мощный инструмент проектирования, который позволяет дизайнерам разрабатывать, анимировать, создавать прототипы и делиться своими проектами в одном приложении. Он получил широкое распространение благодаря своей непревзойденной производительности как на Mac, так и на Windows. Он также является частью Creative Cloud, это означает, что Adobe XD действительно хорошо взаимодействует с другими продуктами Adobe, такими как Photoshop, Illustrator и After Effects, и даже может открывать файлы из программного обеспечения конкурента Sketch, сохраняя при этом оригинальные элементы.
Итак, давайте приступим к обзору лучших плагинов Adobe XD.
01. UI Faces
Поиск фотографий людей для ваших проектов может занять у вас много времени. UI Faces объединяет фотографии (аватары пользователей) и помечает их атрибутами, связанными с возрастом, полом, эмоциями и цветом волос, чтобы поиск нужного изображения происходил как можно быстрее и проще. Этот плагин Adobe XD позволяет дизайнерам выбирать параметры этих атрибутов и заполнять любую выбранную фигуру одним щелчком мыши.
02. Colour Ranger
Color Ranger позволяет дизайнерам легко улучшать цвета в дизайне. Больше не нужно редактировать каждый элемент в Photoshop, независимо от настройки яркости, насыщенности, оттенка, глубины цвета или непрозрачности отдельных элементов или целых монтажных областей. Color Ranger также позволяет сохранять пресеты и управлять ими, а это значит, что создание тем или редактирование наборов пользовательского интерфейса можно выполнить всего одним щелчком мыши.
03. Stark
Основной целью для дизайнеров и компаний является обеспечение доступности дизайна для всех. Stark предоставляет возможность проверять контраст и моделировать формы дизайна для дальтонизма прямо в Adobe XD, таким образом он помогает проектировать и создавать доступные, этичные и инклюзивные продукты. Прошли те времена, когда нужно было запускать отдельное приложение для симуляции и предварительного просмотра визуализации для дальтоников, а также уходило очень много времени на копирование и вставку шестнадцатеричных кодов для проверки контрастности и читабельности шрифта.
04. Rename It
Мы тратим очень много времени на организацию и переименование слоев и артбордов. Rename позволяет очень легко и быстро переименовать все слои последовательно, в порядке возрастания или убывания, а также изменять регистр имени слоя. Также, с помощью простых сочетаний клавиш можно находить и заменять слова или символы.
05. Change Case
Change Case – это действительно простой, но мощный плагин, который позволяет пользователям изменять капитализацию текста в XD. Кажется, что функции данного плагина так не значительны, но в действительности он экономит очень много времени.
06. Google Sheets
Ввод и разметка шрифта должно быть одна из самых сложных задач для дизайнеров. Это приводит к тому, что либо одни и те же элементы копируются и вставляются по нескольку раз, либо во всем проекте используется lorem ipsum. К сожалению, lorem ipsum плохо тестирует свои продукты перед выпуском и это часто приводит к тому, что пользователи отвлекаются и обращают внимание на ошибки. Плагин Google Sheets позволяет импортировать фактическую копию в документ Adobe XD из документа Google Sheets. Даже если содержание в документе Google Sheets изменяется, вы все равно можете обновить копию в своем документе .
07. Trello
Trello – это продуктивная платформа, которая позволяет пользователям и целым командам организовывать продуктивную совместную работу. С помощью плагина Trello дизайнеры могут без труда отправлять свои работы XD, что позволяет им обмениваться арт бордами с командой, не покидая Adobe XD.
08. Angle
Время от времени дизайнеру необходимо делиться своей работой в виде презентации. Ухудшение качества в статических экранах сильно подводит дизайнеров. Все знакомы с этим рабочим процессом: откройте макет в Photoshop и экспортируйте туда дизайн. Angle позволяет делать то же самое, не выходя из Adobe XD. Благодаря этому плагину требуется гораздо меньше времени, чтобы добавить что-то более совершенное в презентацию или загрузить шот в Dribbble.
09. Icondrop
Icondrop делает доступными миллионы дизайнерских ресурсов, с помощью одного щелчка мыши – предоставляя доступ к иконкам, иллюстрациям и фотографиям, и для этого не нужно покидать Adobe XD. Благодаря простой функции поиска и легкому доступу к предыдущим загрузкам, вскоре Icondrop позволит создавать макеты на лету.
10. Web Export
Web Export – отличный способ обмена файлами и спецификациями дизайна с разработчиками.Для дизайнеров, которые не очень хорошо знакомы с программированием, Adobe XD предлагает отличный способ обмена файлами и спецификациями дизайна с разработчиками, чтобы они могли видеть ключевые атрибуты элементов в документе. Однако для дизайнеров, которые работают над личным проектом и не имеют доступа к разработчикам, Web Export может незаменимым. Этот плагин позволяет экспортировать HTML и CSS из ваших файлов XD, а также предлагает вложенные макеты, центрированные ограничения и возможность добавлять дополнительные стили, атрибуты и разметку.
Читайте также: