Экспорт объектов из 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.