Эта статья включает 15 плагинов Adobe XD, которые помогут дизайнерам и разработчикам оптимизировать процесс работы над проектом и сделать его эффективнее.
Поскольку Adobe XD представляет собой открытую платформу, для него постоянно разрабатываются тысячи плагинов. Благодаря этому, дизайнеры могут выбирать те из них, которые позволят им быстрее и проще создавать интерфейсы.
Вот список из 15 плагинов, которые сделают ваш рабочий процесс значительно эффективнее, и позволят вам сфокусироваться на дизайне, не отвлекаясь на решение сопутствующих вопросов.
1. Photosplash2
В основе плагина лежат новые расширенные функции API (интерфейс программных приложений, обеспечивает взаимодействие сервисов) Adobe XD и прекрасная библиотека фотографий Unsplash (более 500 000 бесплатных фото). С помощью этого инструмента вы сможете находить фотографии быстрее и эффективнее, не отвлекаясь от работы.
Все, что вам надо сделать: выбрать формы на артбордах и определить стиль фотографий. Вуаля! В вашем проекте мгновенно появились потрясающие изображения. Больше вам не придется тратить время на поиски.
Цена: $19.99
2. UI Faces
Плагин предназначен для добавления аватаров в выбранные на артборде формы. Это позволяет сделать интерфейс более ярким и эстетически привлекательным.
Вы можете указать, какой именно аватар необходим, выбрав возраст, пол, эмоции. Когда вы определились, просто нажмите “Применить”, и интерфейс мгновенно будет дополнен недостающими изображениями пользователей.
Цена: бесплатно.
3. Mockplus
.webp)
Mockplus — это универсальная веб-платформа для работы над дизайн-проектами, которая позволяет оптимизировать рабочий процесс и упростить взаимодействие членов команды.
Импортируйте файлы из Adobe XD в Mockplus и превращайте их в реалистичные интерактивные прототипы, которые можно отправить другим членам команды и быстро получить обратную связь. Все ваши коллеги смогут просматривать проекты, заходя на сайт по одной ссылке, и оставлять комментарии прямо на экране.
Когда работа над дизайном завершена, передавайте разработчикам не только макеты, но и автоматически сгенерированные спецификации, ресурсы и фрагменты кода, поделившись одной ссылкой.
Весь ваш рабочий процесс будет организован на одной платформе.
Цена: бесплатно.
4. Icons 4 Design
Icon 4 Design включает более 5000 бесплатных иконок высокого качества, причем дизайнеры вправе использовать их без ссылки на автора. Просто введите в поле поиска название или стиль, и вы получите коллекцию иконок со всего Интернета, которые можно с легкостью добавить в проект.
Кроме того, иконки имеют формат SVG, поэтому их можно редактировать в Adobe XD.
Цена: бесплатно.
5. UnDraw
Если вы хотите сделать свой интерфейс более эмоциональным и эстетически привлекательным для пользователей, обратите внимание на плагин unDraw. Он позволяет добавлять в проект, личный или коммерческий, прекрасные иллюстрации абсолютно бесплатно и без указания авторства. Красивые настраиваемые SVG-изображения теперь доступны каждому дизайнеру.
Цена: бесплатно.
6. Wireframer
Вам необходим шаблон, чтобы начать работу над дизайном? Обратитесь к плагину Wireframer. В нем собраны бесплатные прототипы сайтов и приложений, которые помогут визуализировать пути пользователя и повторяющиеся действия, которые он совершает, взаимодействуя с интерфейсом.
Цена: бесплатно.
7. VizzyCharts
VizzyCharts — это отличный плагин для визуализации данных. Он включает множество стандартных графиков и диаграмм, которые вы можете настроить, меняя числовые данные, цвета, размеры и расстояния.
Цена: бесплатно.
8. Rename It
Забыв название слоя, мы можем случайно использовать его снова, что приведет к путанице. Плагин Rename It позволяет переименовать все слои в порядке возрастания или убывания, а также изменить строчные буквы в названии на заглавные и наоборот. Причем это занимает меньше времени, чем вам потребовалось бы, чтобы переименовать пару слоев вручную.
Цена: бесплатно.
9. Angle
Angle сделает презентацию вашего продукта идеальной. Вы можете выбирать любые цвета устройств, тени, фон и угол наклона. При этом все мокапы представляют собой многослойные векторные изображения, которые можно редактировать в Adobe XD.
Цена: $79
10. Google Sheets
Этот плагин позволяет импортировать данные (текст и изображения) из Google Таблиц в Adobe XD. Если содержимое таблицы изменится, вы можете обновить информацию, что позволит максимально эффективно взаимодействовать с командой копирайтеров.
Цена: бесплатно.
11. Trello
Trello — это платформа для совместной работы, которая позволяет специалистам или командам организовывать задачи и расставлять их в порядке приоритетности. Используйте этот плагин, чтобы быстро отправлять свои файлы в Trello и делиться артбордами с теми членами команды, у которых нет Adobe XD.
Цена: бесплатно.
12. Arranger
Этот плагин позволяет расположить определенным образом группу объектов внутри артборда. Потратьте немного времени и вы сможете создать довольно крутые композиции и эффекты.
Цена: бесплатно.
13. Lorem Ipsum
Хотя этот плагин очень простой, он позволяет дизайнеру сэкономить много времени. Вы можете мгновенно добавить в дизайн заполняющий текст “Lorem Ipsum” вместо того, чтобы писать его самостоятельно.
Цена: бесплатно.
14. Quick Mockup
Quick Mockup — полезный плагин, который поможет вам провести мозговой штурм новых дизайн-идей и эффективно организовать процесс работы над проектом. Он обладает всем необходимым функционалом, чтобы вы смогли быстро визуализировать свои идеи.
Его даже можно использовать для создания простых прототипов, поскольку он позволяет настраивать внешний вид и состояния элементов, а также добавлять свой контент.
Цена: бесплатно.
15. Stark
Stark — это набор полезных инструментов, которые позволят убедиться, что ваш дизайн соответствует требованиям доступности. К примеру, с помощью инструмента проверки контрастности вы определите, обеспечивают ли выбранные цвета отличную читабельность и контраст элементов.
Кроме того, Spark включает симулятор нарушений зрения, который позволит вам увидеть интерфейс глазами дальтоника или человека с другим заболеванием глаз.
Цена: бесплатно.
Дополнительные ресурсы для Adobe XD
Ниже я порекомендую вам 5 лучших бесплатных UI-китов (наборов графических элементов пользовательского интерфейса) для Adobe XD. Они помогут вам быстро и без лишних усилий познакомиться с программой.
- UI-кит на тему “Образование”: Подходит для разработки образовательных и школьных сайтов. Совместим не только с Adobe XD, но и с Adobe Photoshop.
- Бесплатный стайлгайд для создания темной темы: Этот шаблон может стать отличным стартом в работе над дизайн-проектом.
- Бесплатный набор вайрфреймов для создания мобильного приложения: Этот простой набор позволяет быстро воплощать идеи в реальность.
- Набор элементов для создания пользовательских сценариев: Подходит для разработки сайтов электронной коммерции и дашбордов (панелей управления).
UI-кит для создания мобильных приложений в стиле материального дизайна: Небольшой набор элементов интерфейса, который можно использовать в Adobe XD, Sketch или Photoshop.
.svg)
.webp)
