2 простых шага для экспорта объектов из Adobe XD
Экспорт объектов из Adobe XD
Экспорт объектов из Adobe XD

Я был приятно удивлен, когда впервые попробовал Adobe XD. Для дизайнера, который до сих пор использует Photoshop для UI дизайна и никогда не пробовал Sketch – это просто глоток свежего воздуха.

Интерфейс прост и интуитивно понятен. Нет необходимости долго обучаться работе с ним. Он занимает мало места и прост. Создание интерактивных прототипов и запись видео просто завораживают.

Но вот, какой вопрос мучил меня с самого начала. И этот вопрос на самом деле является очень болезненным и знакомым: Как экспортировать объекты для передачи их разработчику? Вот истинная причина, почему я не использую Sketch в работе. Дело в том, что большинство разработчиков, с которыми я сталкиваюсь, ожидают получить именно PSD файл.

И вот, что я сделал:

Создал артборд для каждой иконки/объекта и отключил заливку фона так, чтобы все элементы были на прозрачном фоне. Если вы используете шрифт иконок, убедитесь, что он у вас переведен в векторный формат: Выберите все иконки и перейдите по Object / Path / Convert to Path

Создание артбордов Adobe XD
Шаг 1: Создание артбордов

Теперь переходим к File / Export и экспортируем все артборды в PNG (1x, 2x, 3x) или в SVG формате. Таким образом, у вас каждый объект будет отдельным файлом к большой радости разработчика.

Экспорт артбордов Adobe XD
Шаг 2: Экспорт артбордов
Экспортированные объекты в PNG (1x, 2x, 3x) из Adobe XD
Экспортированные объекты в PNG (1x, 2x, 3x)
Экспортированные объекты в SVG из Adobe XD
Экспортированные объекты в SVG

Также вы можете экспортировать один объект. Выберите его и  снова перейдите по File / Export и вам будет экспортирован только один объект

Правда я заметил одну проблему: при экспорте к SVG файлу добавляется квадратный фон (хотя я удаляю заливку фона). Надеюсь, что это баг и Adobe его скоро пофиксит.

Баг при экспорте в SVG из Adobe XD
Баг при экспорте в SVG

Спасибо за внимание, надеюсь моя статья вам поможет. Кстати, я – фриланс UX/UI дизайнер. Оцените мои работы на Product Hunt и следите за моими обновлениями в Twitter @mightyalex.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Превью-релиз Adobe Experience Design CC (Project Comet)

От имени создателей я рад поведать вам, что Project Comet стал Adobe Experience Design CC (Preview), или Adobe XD, как мы его называем. Именно сегодня продукт стал доступен для Mac OS, и мы счастливы сделать первый предварительный обзор.

Топ-10 советов от профи по Adobe XD

Я хочу поделиться советами, которые за прошедший год нашли наибольший отклик среди сообщества Adobe Experience Design CC

Сравнение Sketch vs Adobe XD vs Figma

Когда вышла первая версия Sketch, он полностью изменил мир дизайна интерфейсов, но…