Как экспортировать картинку в adobe xd
Было время, когда мы полагались на Adobe Photoshop для решения любых задач, связанных с дизайном. Теперь у нас есть специальные приложения и программное обеспечение для каждого варианта использования. Что касается дизайна UI / UX, рынок наводнен такими вариантами, как Sketch, Figma, InVision и Adobe XD. Среди них, если вы инвестируете в экосистему Adobe, Adobe XD становится для вас естественным выбором. Используя плагины XD, вы можете вывести опыт на новый уровень.
Плагины играют жизненно важную роль в любом программном обеспечении UI / UX. Они похожи на то, как вы используете расширения для браузера. Множество известных компаний, таких как Dribbble, Airtable и Stark, внедрили свои инструменты и услуги непосредственно в XD, как только было объявлено об открытой платформе. Давайте рассмотрим некоторые из лучших плагинов для Adobe XD.
Примечание: В приложении Adobe XD вы найдете магазин плагинов. Просто найдите название плагина в строке поиска и установите его на устройство.
1. Trello
С помощью плагина Trello дизайнеры могут легко отправлять свои ресурсы XD в Trello, что позволяет им делиться монтажными областями с командой, не покидая Adobe XD.
2. Photosplash 2
Время от времени вы сталкиваетесь с тем, что хотите использовать бесплатное изображение в макете пользовательского интерфейса. Обычная процедура включает поиск изображения в Интернете, загрузку его на компьютер и импорт в программное обеспечение XD. Вместо этого вы можете просто выбрать плагин Photosplash 2 и добавлять изображения прямо в программу XD.
3. XD для Flutter
В наши дни язык Google Flutter становится популярным среди разработчиков. С помощью одной строчки кода вы можете создавать приложения как для iOS, так и для Android. Компания недавно добавлена поддержка веб-приложений также.
С помощью плагина XD to Flutter вы можете сгенерировать код для создания приложений с Flutter на основе ваших проектов в Adobe XD. Плагин генерирует код для любого выбранного элемента в XD, либо для отдельных объектов на холсте, либо для всей монтажной области.
Когда вы вносите изменения в XD, вы можете просто снова запустить плагин и обновить сгенерированный код.
4. Отрисовать
Макет не закончен, без иллюстраций. Вместо того, чтобы часами искать их в Интернете, вы можете просто использовать плагин UnDraw с огромной коллекцией иллюстраций. Плагин содержит постоянно обновляемую коллекцию иллюстраций в формате .svg, которые полностью настраиваются и которые вы можете использовать бесплатно и без указания авторства, даже в коммерческих проектах.
Мы используем его в каждом дизайн-проекте и настоятельно рекомендуем вам попробовать.
5. Лица пользовательского интерфейса
Каждому дизайнеру нужны эти изображения профиля для использования в UI / UX-дизайне. Плагин UI Faces для XD объединяет тысячи аватаров, которые вы можете фильтровать, чтобы создать свой идеальный образ. Аватары отфильтрованы из разных источников. Вы можете выбрать их по возрасту, полу, эмоциям и т. Д.
6. Угол
После завершения дизайн-проекта вы можете продемонстрировать это своему клиенту на макете устройства. Используя плагин Angel mockup, вы можете создавать красивые мокапы, чтобы произвести сильное первое впечатление.
7. Иконки 4 дизайна
Это не нуждается в представлении. Каждому дизайнеру нужны красочные минималистичные иконки, которые можно использовать в своем дизайне. Значки 4 позволяют искать значок по имени и одним щелчком помещать эти значки в список результатов, в результате чего создается полностью редактируемый значок на основе вектора.
Коллекция включает в себя десяток популярных коллекций иконок в различных стилях. Продолжай, попытайся. Мы уверены, что вы не разочаруетесь.
8. lorem ipsum
Используя плагин Lorem Ipsum, вы можете просто получить этот текст, не выходя из программы Adobe XD.
9. Переименуйте его
Мы все потратили больше времени, чем хотели бы признать, на организацию и переименование слоев и монтажных областей. Rename It позволяет вам переименовывать все слои последовательно в порядке возрастания или убывания, а также изменять регистр имени слоя за меньшее время, чем переименование всего нескольких слоев. Он даже позволяет находить и заменять слова или символы с помощью простых сочетаний клавиш.
10. Закладка
Если вы работаете с большим количеством макетов и монтажных областей и иногда испытываете трудности с поиском конкретной монтажной области, попробуйте плагин Bookmark. Этот плагин позволяет вам делать закладки для определенной монтажной области, и всякий раз, когда вы запускаете и щелкаете эту конкретную закладку, ваш экран фокусируется на этой конкретной монтажной области.
11. ColorSpark
Мы видели, как многие дизайнеры пользовательского интерфейса боролись с выбором цвета и сочетаниями на протяжении всего проекта. В Интернете есть специальные инструменты, которые помогут вам принять лучшее решение. Но ColorSpark для Adobe XD превосходит каждую со встроенным генератором цвета для случайных цветов и градиентов.
Это помогает дизайнерам открывать уникальные цветовые палитры и пробуждать творческий потенциал.
12. Слабость
Совместите творческую работу и командную работу со Slack. Дизайнеры могут легко обмениваться файлами и просматривать их из приложений, включая Adobe XD, получать отзывы и быть в курсе действий, предпринятых с их ресурсами.
Создавайте потрясающие дизайны пользовательского интерфейса
Learn how to export production-ready assets from Adobe XD to PNG, SVG, JPG, and PDF file formats.
You can export assets such as bitmap images, icons and background patterns, text, and artboards from XD as PNG, SVG, JPG, and PDF. These exported assets are optimized for deployment on iOS, Android, or the web apps.
If you are using XD on macOS, you can also bring your designs into third-party integrations such as Zeplin, Avocode, Sympli, Kite Compositor, and Protopie.
macOS
Select an object or an artboard, navigate to File > Export or press Cmd + E.
Windows
Select an object or an artboard and navigate to File > Export.
- Batch: You can batch export assets that are marked using Mark for Export option in the Property Inspector. To export multiple objects as a single asset, group the objects before export.
- Selected: You can select and export specific assets.
- All artboards: You can select all the artboards for export in a design project.
- After Effects: You can select the asset to export to After Effects.
Mark layers for export
Layers marked for export are included as assets in design specs. To mark assets for export, select any layer on canvas, and use any of the following options:
- Right-click the layer on the canvas and choose Mark for Export from the drop-down.
- Open the layers panel and click the mark for export icon next to the layer name.
Assets are design files required by the developers to re-create what you designed, using HTML/CSS/JS in a website, or native languages like Swift or Java in iOS and Android apps.
In general, the most common assets are bitmap images, icons, and background patterns that you can export in these formats: PNG, SVG, PDF, JPG.
Я был приятно удивлен, когда впервые попробовал Adobe XD. Для дизайнера, который до сих пор использует Photoshop для UI дизайна и никогда не пробовал Sketch – это просто глоток свежего воздуха.
Интерфейс прост и интуитивно понятен. Нет необходимости долго обучаться работе с ним. Он занимает мало места и прост. Создание интерактивных прототипов и запись видео просто завораживают.
Но вот, какой вопрос мучил меня с самого начала. И этот вопрос на самом деле является очень болезненным и знакомым: Как экспортировать объекты для передачи их разработчику? Вот истинная причина, почему я не использую Sketch в работе. Дело в том, что большинство разработчиков, с которыми я сталкиваюсь, ожидают получить именно PSD файл.
И вот, что я сделал:
Создал артборд для каждой иконки/объекта и отключил заливку фона так, чтобы все элементы были на прозрачном фоне. Если вы используете шрифт иконок, убедитесь, что он у вас переведен в векторный формат: Выберите все иконки и перейдите по Object / Path / Convert to Path
Шаг 1: Создание артбордов
Теперь переходим к File / Export и экспортируем все артборды в PNG (1x, 2x, 3x) или в SVG формате. Таким образом, у вас каждый объект будет отдельным файлом к большой радости разработчика.
Шаг 2: Экспорт артбордов Экспортированные объекты в PNG (1x, 2x, 3x) Экспортированные объекты в SVG
Также вы можете экспортировать один объект. Выберите его и снова перейдите по File / Export и вам будет экспортирован только один объект
Правда я заметил одну проблему: при экспорте к SVG файлу добавляется квадратный фон (хотя я удаляю заливку фона). Надеюсь, что это баг и Adobe его скоро пофиксит.
Баг при экспорте в SVG
Спасибо за внимание, надеюсь моя статья вам поможет. Кстати, я – фриланс UX/UI дизайнер. Оцените мои работы на Product Hunt и следите за моими обновлениями в Twitter @mightyalex.
Эти проекты имеют большое значение, помогая разработчикам понять, как вы хотите, чтобы ваш веб-сайт выглядела, и упрощают процесс разработки с их стороны. Однако существует лишь ограниченное количество способов экспортировать дизайны из программного обеспечения.
Вы можете либо сохранить их как файл XD и надеяться, что разработчик уже установил программное обеспечение в своей системе, либо экспортировать каждую монтажную область как отдельный файл PNG, что может быть немного неудобно в использовании.
К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде файлов HTML, и именно об этом я расскажу в этой статье. Но прежде чем мы перейдем к этому, вам нужно кое-что узнать.
Экспорт файлов Adobe XD в HTML с помощью плагинов
Теперь, когда у нас это есть, просто выполните следующие простые шаги, чтобы загрузить необходимый плагин, а затем экспортировать файлы Adobe XD в HTML:
Шаг 1: Щелкните кнопку меню гамбургера в верхнем левом углу программы.
Шаг 2: Прокрутите до конца и нажмите на опцию Plugins. Это откроет новую панель плагинов справа от главного меню.
Шаг 3: Выберите опцию Discover Plugins на панели Plugins.
Шаг 4: На следующей странице найдите HTML и нажмите кнопку «Установить» рядом с подключаемым модулем Web Export.
После того, как вы установили требуемый плагин, откройте проект, который хотите экспортировать в HTML, и продолжите следующие шаги. В этой статье я буду использовать бесплатную монтажную область Adobe XD, которую я нашел в Интернете.
Шаг 5: Выберите монтажную область, которую хотите экспортировать, щелкнув по ней.
Шаг 6: Теперь нажмите кнопку меню, перейдите на панель Plugins и затем выберите опцию Export Artboard в новых настройках плагина Web Export.
В том же окне вы также можете выбрать экспорт нескольких монтажных областей или последней монтажной области, которую вы редактировали.
Шаг 7: Во всплывающем окне «Экспорт монтажной области» добавьте имя файла, а затем выберите папку, в которой вы хотите сохранить файл, щелкнув крошечный значок папки рядом с параметром «Экспорт папки».
Шаг 8: Теперь, если вы хотите добавить внешний скрипт, таблицу стилей или альтернативные шрифты в экспортируемый файл, вы можете добавить их в том же окне.
Шаг 9: Затем вы можете выбрать размеры выходного HTML-файла, введя значения в пустое пространство рядом с параметром «Размер».
Шаг 10: Чтобы обеспечить правильное масштабирование проекта, вы также можете выбрать различные параметры масштабирования в том же окне, установив флажок рядом с каждым параметром.
Шаг 11: Кроме того, вы можете выбрать любые дополнительные настройки, такие как навигация с помощью клавиатуры, автоматическое обновление и т. Д., Установив флажки рядом с параметрами.
Шаг 12: После того, как вы завершили все настройки, просто нажмите синюю кнопку «Экспорт», и все готово. Монтажная область появится в виде HTML-файла в папке назначения, которую вы ранее выбрали.
Из того же окна вы также сможете скопировать CSS и разметку своей монтажной области, если вы также хотите поделиться этой информацией со своим разработчиком.
Еще раз отметим, что экспортированный HTML ни в коем случае нельзя использовать для разработки полнофункционального веб-сайта. На данный момент у вас нет возможности напрямую опубликовать проект Adobe XD в Интернете, и, согласно нескольким обсуждения на форумах Adobe, в ближайшее время его не будет.
Последнее обновление 5 июл, 2019
Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается объективным и достоверным.
Читайте также: