Как делиться дизайнами в Adobe XD

Эскиз интерфейса и вайрфрейм на бумаге

Adobe XD — инструмент для создания макетов, прототипов и вайрфреймов для приложений, сайтов и мобильных интерфейсов. Частая задача дизайнера — передать работу коллегам, клиентам или тестировщикам. Правильная подготовка и настройки общего доступа ускоряют обратную связь, уменьшают повторную работу и помогают разработчикам получить нужные ресурсы.

В этом руководстве подробно описано, как настроить и сгенерировать ссылку для четырёх типичных сценариев обмена: обзор дизайна, передача для разработки, презентация/тестирование и кастомные настройки. В конце — чек-листы, методология подготовки, подсказки по доступам и альтернатиы.

Быстрый обзор доступных пресетов и что они дают

Design Review (Обзор дизайна): просмотр и комментарии прямо в браузере.
Development (Разработка): видны экспортируемые активы и спецификации для верстки.
Presentation (Презентация): полноэкранный просмотр для показа макета аудитории.
User Testing (Тестирование): похож на презентацию, но с акцентом на запись действий и удобство тестирования.
Custom (Пользовательские настройки): комбинируйте функции по необходимости.

Перед тем как делиться: подготовьте проект

Дайте понятные имена артбордам и компонентам. Короткие понятные имена ускоряют навигацию и поиск.
Сгруппируйте состояния компонентов (hover, active, disabled).
Убедитесь, что все используемые шрифты доступны или встроены в проект.
Разрешите вопросы лицензий для изображений и иконок.
Пометьте активы, которые нужно экспортировать (см. ниже).

Важно: названия слоёв и компонентов должны быть понятны не только дизайнерам, но и разработчикам.

Как делиться дизайном для обзора (Design Review)

Пресет Design Review позволяет другим пользователям просматривать макет в браузере и оставлять комментарии.

В окне Adobe XD откройте проект.
Нажмите на вкладку Share в верхней части окна.
В разделе View Setting выберите пресет Design Review.
Нажмите «Update Link», чтобы сгенерировать или обновить ссылку.
Откройте сформированную ссылку в правой панели.
В браузере нажмите на значок «сообщения» в правой колонке, чтобы открыть панель комментариев. Здесь можно читать и оставлять замечания.

Совет: при отправке ссылки укажите контекст — что именно нужно проверить (интеракции, контент, адаптивность).

Как делиться дизайном и активами для разработки (Development)

Когда вы делитесь проектом с разработчиками, обычно им нужны экспортируемые активы (изображения, иконки) и спецификации по размерам и отступам.

В Adobe XD откройте проект и перейдите на вкладку Design.
Для каждого ресурса, который вы хотите передать, кликните правой кнопкой и выберите Mark for Export.
Перейдите на вкладку Share.
В View Setting выберите пресет Development.
Убедитесь, что выбран флажок «Downloadable Assets» (скачиваемые активы) в разделе Export for iOS/Android/Custom, в зависимости от платформы.
Нажмите «Update Link», чтобы сгенерировать новую ссылку.
Откройте ссылку из правой панели.
В браузере выберите значок «код» в правой колонке — там будут предпросмотр активов и кнопки для скачивания.

Критерии приёмки для передачи активов:

Все растровые изображения помечены для экспорта в нужных разрешениях (1x, 2x, @3x, если нужно).
Иконки экспортированы в векторных форматах (SVG) при необходимости.
Названия файлов понятны и соответствуют структуре проекта.

Роль дизайнеров: подготовить и промаркировать активы. Роль разработчиков: проверить доступные форматы и интеграцию.

Как делиться дизайном для презентации или тестирования

Этот режим нужен, когда вы хотите показать проект в полноэкранном режиме или дать возможность тестировать прототип.

Нажмите на вкладку Share в верхней части окна Adobe XD.
В View Setting выберите пресет Presentation для показа, либо User Testing, если макет будет тестироваться.
Нажмите «Update Link», чтобы создать ссылку.
Откройте обновлённую ссылку в правой панели.
В браузере используйте кнопку со стрелкой вверху окна, чтобы перейти в полноэкранный режим. Для выхода нажмите Esc.

Советы для презентации: закройте служебные панели, включите режим показа подсветки кликов, пройдитесь по ключевым сценариям пользователя.

Как создавать собственные настройки для ссылки (Custom)

Иногда нужен набор функций из разных пресетов — например, комментарии + скачиваемые активы + полноэкранный режим. Для этого используйте Custom.

Откройте проект и выберите вкладку Share.
В View Setting выберите пресет Custom.
Отметьте опции, которые хотите включить: Comments (комментарии), Full-screen (полноэкранный просмотр), Downloadable Assets (скачиваемые активы) и др.
Нажмите «Update Link» и откройте новую ссылку.
В браузере вы увидите все выбранные функции.

Примеры сочетаний:

Комментарии + полноэкранный режим — удобно для презентаций с обратной связью.
Скачиваемые активы + комментарии — полезно при передаче разработчикам с возможностью обсуждения.

Как менять права доступа к ссылке

Adobe XD позволяет управлять доступом к ссылке двумя способами:

Anyone with the link — любой, у кого есть ссылка.
Only invited people — доступ только по приглашению.

По умолчанию стоит «Anyone with the link». Чтобы ограничить доступ:

Нажмите вкладку Share.
В разделе Link Access выберите Only invited people.
Нажмите на иконку профиля рядом с выпадающим списком Link Access, чтобы пригласить людей с доступом для просмотра.
Для предоставления прав редактирования нажмите на иконку профиля в правом верхнем углу приложения и добавьте пользователей с правами редактирования.
Управление пользователями для режимa редактирования находится также через иконку профиля в правом верхнем углу.

Заметка: для проектов с чувствительным содержимым рекомендуем выбирать «Only invited people» и использовать корпоративную аутентификацию.

Контрольный список: что проверить перед отправкой ссылки

Для быстрого самопроверки перед отправкой копируйте этот список:

Все ключевые экраны подписаны.
Компоненты организованы по библиотеке.
Активы помечены для экспорта и имеют понятные имена.
Прототипные переходы настроены и протестированы.
Выбран подходящий пресет Share или настроен Custom.
Проверены права доступа.
В описании ссылки указана цель и ожидаемая форма обратной связи.

Роль‑ориентированные чек-листы

Дизайнер — перед отправкой разработчикам:

Проверить экспорт и версии изображений.
Убрать лишние слои и скрытые элементы.
Пронумеровать состояния компонентов.
Подготовить примечания к сложным интеракциям.

Разработчик — при приёме:

Убедиться в доступности SVG/PNG/JPEG в нужных плотностях.
Проверить спецификации отступов и шрифтов.
Задать вопросы по динамике и логике переходов.

Тестировщик — при юзер-тестировании:

Сформулировать сценарии и задания.
Проверить полноэкранный режим и навигацию.
Подготовить форму для записи замечаний.

Мини‑методология: шаги подготовки и отправки (быстрая)

Подготовьте мастер‑файл: очистка слоёв, стандартизация имён.
Пометьте активы и проверьте форматы.
Выберите пресет Share или настройте Custom.
Напишите короткое описание и список задач для получателей.
Сгенерируйте ссылку, протестируйте её в браузере.
Отправьте ссылку и отслеживайте комментарии.

Решение: какой пресет выбрать — схема

flowchart TD
  A[Нужно, чтобы они комментировали?] -->|Да| B[Design Review]
  A -->|Нет| C[Нужно отдавать активы?]
  C -->|Да| D[Development]
  C -->|Нет| E[Нужно показывать в полноэкранном режиме?]
  E -->|Да| F[Presentation или User Testing]
  E -->|Нет| G[Custom: комбинируем функции]

Когда такой подход может не подойти

У вас строгие требования по безопасности и запрещено публиковать внешние ссылки — используйте корпоративные инструменты или VPN.
Нужна тесная интеграция с системой таск‑менеджмента — рассмотрите плагины или экспорт спецификаций в Jira/Confluence.
Если проект требует версионирования и хранение всех версий — используйте систему контроля версий для артефактов или библиотек компонентов.

Альтернативы и их сильные стороны

Figma — сильна в совместной работе в реальном времени и управлении правами.
Zeplin — фокус на передаче спецификаций и активов разработчикам.
InVision — мощные инструменты для прототипирования и тестирования.

Выбор зависит от команды, процесса и интеграций.

Безопасность и конфиденциальность

Для конфиденциальных проектов выбирайте «Only invited people».
По возможности используйте корпоративную аутентификацию (SSO).
Не публикуйте секретную информацию в примечаниях или комментариях.

Примечание: Adobe XD не заменяет систему управления версиями кода или секретов.

Глоссарий (одно предложение на термин)

Артборд — отдельный экран или состояние интерфейса в проекте.
Актив (asset) — изображение, иконка или ресурс, который можно экспортировать.
Пресет Share — набор опций обмена (обзор, разработка, презентация и т.д.).
Mark for Export — пометка ресурса для извлечения в файлы.

Социальные превью для публикации ссылки

OG title: Просмотрите макет в Adobe XD
OG description: Откройте прототип, оставьте комментарий и скачайте активы для разработки.

Частые ошибки и как их избежать

Ошибка: отправить ссылку без пояснений. Решение: в теле письма/сообщения опишите цель и ожидаемую обратную связь.
Ошибка: не пометить активы для экспорта. Решение: проверьте раздел «Mark for Export» и скачайте предпросмотр.
Ошибка: открыть ссылку в неподдерживаемом браузере. Решение: используйте Chrome/Edge/Firefox, проверьте обновления.

Короткое резюме

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

Важные шаги: подготовить проект, пометить активы для экспорта, выбрать подходящий пресет или настроить собственный набор опций, обновить ссылку и проверить её в браузере.

Ключевые выносы:

Используйте Design Review для обратной связи и комментариев.
Помечайте активы для Development, чтобы разработчики могли скачивать ресурсы.
Presentation и User Testing — для полноэкранных показов и тестов.
Custom позволяет комбинировать нужные функции в одной ссылке.

Спасибо за внимание. Проверьте ссылку самостоятельно и укажите контекст для получателей — это сэкономит вам время и повысит качество обратной связи.

Как делиться дизайнами и активами в Adobe XD