Adobe XD

d

Что отличает Adobe XD от других инструментов для прототипирования

Adobe XD — единственный инструмент в линейке Adobe, который создан исключительно для проектирования интерфейсов (UI/UX). В отличие от Figma (облачный редактор с ограниченными возможностями работы с изолированными компонентами) или Sketch (только macOS), XD предлагает бесшовную интеграцию с After Effects и Photoshop, а также уникальный режим автоматической анимации переходов между экранами. Это критично для веб-дизайнера, который хочет быстро создать кликабельный прототип без написания кода. Например, компонент «Повторяющаяся сетка» (Repeat Grid) в XD позволяет за 3 секунды заполнить карточки товаров данными из CSV-файла — операция, которая в Figma требует ручной замены 50-ти слоёв.

На платформе мы делаем акцент именно на практических сценариях: вы не будете изучать интерфейс ради интерфейса. Каждый второй урок содержит реальный кейс — от лендинга для стартапа до многоэкранного приложения для доставки. Вы узнаете, почему Adobe XD лучше подходит для проектов с жёсткими сроками: встроенный плагин для создания динамических макетов (Anima) позволяет автоматически конвертировать фиксированные артборды в адаптивные макеты за 4 клика. Без него настройка резиновой вёрстки вручную заняла бы 40 минут.

Однако 70% начинающих делают ошибку: используют XD как обычный векторный редактор, игнорируя интерактивные прототипы. На платформе мы даём конкретные шаги, которые превращают статичные картинки в рабочие интерфейсы.

Шаг 1. Настройка рабочей области под веб-проект

Откройте Adobe XD и выберите шаблон «Веб-дизайн (1920×1080)». Это стандарт для десктопных макетов. Не используйте шаблон «Мобильное приложение», если делаете сайт — разные направляющие и масштаб текста.

Сразу включите панель «Слои» (Layers) и «Компоненты» (Components). Важно: задайте сетку Bootstrap 12 колонок (ширина колонки 80px, отступ 30px). Для этого в меню View → Layout Grid → Custom → установите тип Grid. Это точный размер, который используется в 90% frontend-проектов. Без сетки вы будете рисовать «на глаз», что потом ломает адаптивность.

Включите режим «Дизайн» (Design), а не «Прототип» (Prototype) — пока вы рисуете, анимация не нужна. Установите в свойствах документа единицы измерения «пиксели» (px). Никогда не используйте pt или mm — верстальщик не сможет повторить отступы.

Шаг 2. Создание компонентов и повторяющейся сетки

Нарисуйте карточку товара: прямоугольник 300×400px, текст (название, цена), кнопка. Выделите всё и нажмите Ctrl+K (Windows) или Cmd+K (Mac) — это создаёт компонент. Теперь перетащите компонент в библиотеку (вкладка «Компоненты» слева). Каждый экземпляр можно менять независимо, но если вы измените родительский компонент, все копии обновятся автоматически.

Чтобы сделать галерею из 12 похожих карточек, используйте Repeat Grid. Выделите созданную карточку, нажмите Ctrl+R. На артборде появятся маркеры — потяните правый нижний вниз на 4 ряда, вправо на 3 колонки. Между карточками автоматически появится отступ 20px (можно изменить в панели свойств). Теперь выделите тексты «Название» и «Цена» — в правой панели появится кнопка «Текст из CSV». Загрузите файл с данными (например, 12 строк из Excel). XD заполнит все карточки за 1 секунду. Это и есть экономия времени: вручную вы бы вставляли каждое название по одному.

Шаг 3. Работа с состояниями и вариантами

Кнопка должна иметь минимум 3 состояния: обычное, при наведении (hover), нажатое (active). Выберите компонент кнопки, в панели свойств нажмите «Добавить состояние». Создайте состояния «Hover» и «Pressed». Для Hover измените цвет заливки на 10% светлее (например, #0066FF → #3388FF), для Pressed — добавьте тень Inner Shadow 2px. Чтобы переключаться между состояниями, используйте переключатель вверху артборда.

Варианты — это разные модификации одного компонента. Например, кнопка может быть «primary» (синяя), «secondary» (серая) и «danger» (красная). Создайте один компонент кнопки, затем в панели «Варианты» (Variants) нажмите «+». В открывшемся окне задайте первое свойство «Type» со значениями «primary», «secondary», «danger». Для каждого варианта перекрасьте кнопку. После этого в прототипе вы сможете просто переключать Type в свойствах экземпляра, не рисуя новую кнопку. Это уменьшает количество компонентов в библиотеке в 3 раза.

Шаг 4. Связывание экранов в прототип

Переключитесь на вкладку «Прототип» (Prototype) в верхней панели. Нажмите на кнопку на первом артборде — от неё потянется синяя стрелка. Перенесите стрелку на второй артборд (например, страница каталога). В панели свойств выберите действие «Tap» (нажатие), переход «Swipe Left». Задайте длительность 0,3 сек и замедление «Ease Out». Это даёт эффект перелистывания слайдов, характерный для мобильных интерфейсов.

Для десктопного меню используйте «Hover» (наведение) — например, при наведении на пункт меню «Услуги» появляется выпадающий список. Выберите пункт меню, в действии укажите Hover → переход на артборд с выпадающим списком. Важно: выпадающий список должен быть отдельным артбордом меньшего размера, расположенным поверх основного. Чтобы он исчезал при отведении мыши, создайте второе действие — Mouse Leave → возврат на исходный экран.

Шаг 5. Настройка адаптивного макета с помощью отклика

Современный сайт должен работать на телефоне, планшете и десктопе. В XD есть встроенный инструмент «Адаптивный макет» (Responsive Resize). Выделите группу элементов на артборде (например, шапку с логотипом и меню). Нажмите на иконку «Responsive Resize» в панели свойств (четыре направленные наружу стрелки). Теперь, если вы измените ширину артборда, элементы будут перестраиваться в соответствии с правилами: логотип останется слева, меню — справа, кнопка — рядом с меню. Без этой настройки элементы разъедутся хаотично.

Чтобы проверить адаптивность, создайте копию артборда (Ctrl+D) и измените его ширину на 768px (планшет) и 375px (телефон). Затем вручную поправьте отступы и размер шрифта. Не полагайтесь на автонастройку — она часто делает кнопки слишком маленькими. В XD можно задать min-width для элементов: выделите объект, в панели «Размер» включите привязку к левому и правому краю. Тогда при сжатии экрана объект будет сжиматься пропорционально, но до минимального размера, который вы укажете.

Шаг 6. Экспорт и передача разработчику

Закончив прототип, нажмите «Поделиться» (Share) в правом верхнем углу. Сгенерируйте ссылку для разработки (Developer Link). Важно: включите опцию «Включить спецификации» — разработчик увидит отступы, размеры, цвета, шрифты в px. Запретите редактирование, чтобы коллеги не сломали макет. Скопируйте ссылку.

Дополнительно экспортируйте все активы в PNG или SVG: выберите File → Export → All Artboards. Для иконок используйте SVG (вектор), для фотографий — PNG с качеством 80%. Укажите масштаб 2× (Retina) и 3× (для iPhone). Разработчик сможет скачать каждый элемент отдельно. Если нужен код CSS, нажмите на объект правой кнопкой → «Копировать CSS». XD выдаст код с правильными размерами, цветами, тенями и скруглениями. Это ускоряет вёрстку на 40%.

Шаг 7. Типичные ошибки новичков и их решение

Ошибка 1: игнорирование компонентов. Каждый второй студент рисует 10 одинаковых кнопок вручную, а потом правит каждую отдельно. Решение: любая повторяющаяся деталь должна быть компонентом. Ошибка 2: переполнение артборда лишними элементами. Если на экране больше 50 объектов, прототип тормозит. Группируйте логические блоки (Ctrl+G) и давайте им осмысленные имена в панели слоёв. Ошибка 3: забывают про выравнивание. Используйте панель «Align» (выравнивание) — кнопки «Distribute horizontal spacing» и «Align center». Без них отступы между карточками будут разными, и разработчик не сможет сверстать аккуратно.

Ошибка 4: слишком много состояний для одной кнопки. Не нужно 10 вариантов — достаточно 3 (default, hover, active). Если нужно больше, используйте компонент с вариантами (variants), а не отдельные компоненты. Ошибка 5: экспорт без спецификаций. Всегда включайте Developer Link — он содержит точные размеры, которых нет в PDF. Ошибка 6: использование шрифтов без лицензии. Проверьте, что шрифты, используемые в макете, есть в Google Fonts или куплены. Иначе разработчик не сможет воспроизвести внешний вид. Ошибка 7: отсутствие логической структуры прототипа. Не делайте «линейный» прототип, где каждый клик ведёт на следующий экран. Используйте циклы (кнопка назад) и модалки (всплывающие окна).

Заключение: как закрепить навыки за 7 дней

После изучения семи шагов выполните практическое задание: создайте прототип интернет-магазина из трёх экранов (главная, каталог, карточка товара) с адаптивной вёрсткой под телефон. Уделите внимание состояниям кнопок и Repeat Grid. Засеките время: в начале вы потратите 2-3 часа, после недели тренировок — 40 минут. Adobe XD становится действительно мощным инструментом только при постоянной практике. На платформе мы даём 5 готовых шаблонов реальных проектов, чтобы вы могли разобрать структуру и повторить её. Помните: лучший способ выучить XD — сделать три прототипа подряд, каждый раз усложняя анимацию и компоненты. Уже через месяц вы сможете создавать прототипы, которые клиенты принимают с первого раза, без списка доработок.

Добавлено: 23.04.2026