Базовые шаги в Adobe XD: изображения, фигуры, текст, компоненты и экспорт

Важно: интерфейс Adobe XD периодически обновляется. Если вы не видите некоторые элементы интерфейса — проверьте версию приложения и обновления.

Введение

Adobe XD — инструмент для проектирования интерфейсов и прототипов. Он позволяет создавать макеты для мобильных приложений, веб-сайтов и десктопных интерфейсов, собирать интерактивные прототипы и формировать повторно используемые компоненты. В этом материале мы пройдём от создания нового проекта до экспорта графики и добавим практические шаблоны, чек-листы и методики для команд.

Что вы получите из статьи

• Пошаговые инструкции: как добавить изображения, формы и текст.
• Как создавать и повторно использовать компоненты.
• Шаблоны экспорта и правила именования.
• Чек-листы для дизайнера, разработчика и менеджера.
• Мини-методология проверки и возможные альтернативы.

Создание проекта в Adobe XD

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

Типичные шаблоны (ширина × высота в пикселях):

• iPhone X/XS/11 Pro — 375 × 812
• iPad — 768 × 1024
• Web 1920 — 1920 × 1080

Вы также можете задать собственную ширину и высоту арта.

После создания откроется чистый холст (canvas). Выделив холст, можно изменить его свойства в правой панели — например, ширину и высоту артборда.

Как добавить изображение

Есть несколько способов вставить изображение в проект:

• Меню: нажмите на иконку меню «гамбургер» в верхней части левой панели, выберите «Import» и откройте файл.
• Перетаскивание: откройте файл в проводнике и перетащите его на холст Adobe XD.
• Копировать/вставить: если изображение открыто в другом приложении, скопируйте и вставьте.

Изменение размера и позиции изображения

1. Выделите изображение — его свойства появятся в правой панели.
2. Измените ширину (W) и высоту (H) в полях свойств.
3. При необходимости скорректируйте координаты X и Y — они задают позицию верхнего левого угла.
4. Перемещайте изображение, кликая и перетаскивая по холсту.
5. Чтобы изменить пропорции, тяните контрольные маркеры по краям.

Корректировка углов и формы изображения

1. Выделите изображение.
2. Вокруг и внутри углов появятся точечные маркеры.
3. Потяните внутренний маркер угла, чтобы изменить радиус скругления или форму.

Дополнительные эффекты для изображений

В правой панели доступны эффекты:

1. Непрозрачность (Opacity, O) — изменяет видимость слоя.

2. Граница (Border) — цвет, толщина, стиль линий и скругление углов.

3. Размытие (Object Blur) — настраиваемая интенсивность.

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

Как добавлять формы

Фигуры находятся в левой панели инструментов. Стандартные формы — прямоугольник, эллипс, треугольник, линия.

1. Выберите форму в левой панели.
2. Кликните по холсту и тяните курсор, чтобы нарисовать элемент.

Создание произвольных фигур

1. Выберите инструмент «Перо» (Pen) в левой панели.
2. Кликайте по холсту, чтобы добавлять опорные точки. Кривая создаётся нажатием и перетаскиванием точек.
3. Завершите фигуру и нажмите Esc.

Заливка, границы и стиль фигур

1. Выделите фигуру.
2. В правой панели измените Fill — цвет заливки, а также Border и Opacity.

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

Как добавить текст

1. Нажмите на иконку «Текст» в левой панели.
2. Кликните по холсту, чтобы создать текстовое поле, и введите содержимое.
3. В правой панели измените размер шрифта, семейство и выравнивание.

Совет: для заголовков применяйте семантические размеры (H1/H2/H3), а для вспомогательного текста — меньший размер и повышенную межстрочность.

Компоненты: зачем и как

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

1. Выделите группу элементов на холсте. Клик правой кнопкой мыши и выберите Make Component.

2. Откройте панель Assets в левой части интерфейса, чтобы увидеть список компонентов.

3. Перетяните компонент из панели Assets на холст — появится экземпляр компонента (instance).

Преимущества: изменение основного компонента (Master) автоматически обновит все экземпляры, экономя время при редизайне.

Экспорт графики

Вы можете экспортировать отдельные элементы или весь артборд.

1. Для экспорта отдельного элемента выделите его.
2. Нажмите на иконку меню «гамбургер» в верхней части левой панели.
3. Выберите Export → Selected.
4. Для экспорта всех артбордов — выберите All Artboards.

Выберите формат: PNG, JPG, SVG или PDF, укажите целевую платформу (Web, iOS) и директорию сохранения.

Алгоритм выбора формата экспорта (мермайд схема)

flowchart TD
  A[Нужен ли вектор?] -->|Да| B[SVG]
  A -->|Нет, нужен растр| C[PNG/JPG]
  B --> D[Логотипы, иконки, масштабируемая графика]
  C --> E[Фото или фон]
  C --> F{Прозрачность нужна?}
  F -->|Да| G[PNG]
  F -->|Нет| H[JPG]

Правило: используйте SVG для иконок и логотипов, PNG для растров с прозрачностями, JPG для фотографий и фоновых изображений там, где прозрачность не нужна.

Рекомендации по именованию файлов при экспорте

• Формат: projectname_component_variant_size.ext
• Пример: myapp_button_primary_2x.png

Это упрощает интеграцию с фронтенд-репозиториями и сборками.

Частые ошибки и когда подход не сработает

• Слишком мелкие элементы для мобильного размера — проверьте контраст и доступность.
• Использование растров для иконок — приводит к пикселизации при масштабировании.
• Отсутствие дизайн-токенов — влечёт рассинхронизацию стилей на больших проектах.

Альтернативы и интеграции

• Figma: лучший выбор для облачной совместной работы и мгновенной совместной правки.
• Sketch: популярен на macOS и хорошо интегрируется с плагинами.
• Adobe Photoshop/Illustrator: полезны для подготовки растров и векторной графики перед импортом в XD.

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

Роли и чек-листы

Дизайнер — чек-лист

• Создать артборды нужных размеров.
• Настроить дизайн-токены (цвета, отступы, типографика).
• Создать компоненты для повторяющихся элементов.
• Протестировать макет на целевых разрешениях.
• Экспортировать ресурсы с корректными именами и масштабами.

Разработчик — чек-лист

• Проверить совместимость форматов (SVG/PNG/JPG).
• Подтвердить размеры и плотность пикселей (1x/2x/3x).
• Сверить типографику и отступы с макетом.
• Убедиться, что компоненты легко интегрируются в кодовую базу.

Продуктовый менеджер — чек-лист

• Подтвердить приоритеты экранов и сценарии использования.
• Проверить интерактивность ключевых переходов.
• Организовать передачу ассетов и описаний для разработчиков.

SOP: быстрый план экспорта и передачи ассетов

1. Создать отдельную страницу «Assets» с итоговыми компонентами.
2. Назвать каждый элемент по шаблону project_component_variant.
3. Для иконок экспортировать SVG, для фото — JPG 2x и 3x, для элементов с прозрачностью — PNG.
4. Собрать ZIP с деривациями и README (описание форматов и размеров).
5. Отправить архив в тикет или в корзину артефактов в репозитории.

Мини-методология проверки качества

• Визуальный контроль: сравните экспортированные файлы с макетом при 100% и 200% масштабах.
• Функциональный контроль: протестируйте интерактивные прототипы (клики, переходы).
• Проверка доступности: минимальный контраст текста 4.5:1 для основного текста.

Важно: критерии доступности могут зависеть от стандартов вашей организации. При необходимости подключите специалиста по доступности (a11y).

Критерии приёмки

• Все ключевые экраны собраны и доступны в прототипе.
• Компоненты и их состояния (hover, active, disabled) документированы.
• Экспортированные активы соответствуют именованию и размерам, требуемым разработкой.
• Прототип протестирован на основных разрешениях и прошёл базовые проверки доступности.

Сравнение: когда выбирать Adobe XD

• Adobe XD удобен для тех, кто уже в экосистеме Adobe и использует Photoshop/Illustrator.
• Если приоритет — совместная работа в реальном времени и автоматические ревизии — выбирайте Figma.

Короткая 1‑строчная глоссарий

• Артборд — рабочая плоскость/страница, где располагается макет.
• Компонент — повторяемый элемент интерфейса, управляющийся из центрального мастера.
• Instance — экземпляр компонента на холсте.

Заключение

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

Короткая сводка:

• Начинайте с правильных размеров артборда.
• Используйте компоненты для повторяющихся элементов.
• Экспортируйте и именуйте файлы по шаблону для удобства интеграции.

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

Резюме

• Adobe XD покрывает базовые задачи UI/UX: изображения, формы, текст, компоненты и экспорт.
• Внедрите стандарты именования и проверочные чек-листы для ускорения передачи в разработку.
• Рассмотрите альтернативы (Figma, Sketch) при специфических требованиях к совместной работе.