Adobe XD

Adobe XD CC 39.0.12 LATEST

Windows 10 (64-bit)

Adobe XD 2021 full offline installer setup for PC 32bit/64bit

Adobe XD (Adobe Experience Design) is a highly effective User Interface and User Experience design app that takes the full potential of tools, services, and years of experience of Adobe suite and provides instant access to the creation of vector-based graphics for modern websites, web apps, and mobile apps. Built from the ground up by Adobe Inc as a part of their latest wave of modern apps, Adobe XD for PC has quickly managed to become one of the most popular apps for streamlined design, collaborative experimenting, and quick deployment or sharing of test/finished designs on the web, iOS, and Android platforms. One of the reasons this app so quickly managed to become a trend-setter in modern UX/UI design is its arrival to the Creative Cloud subscription, enabling a large subscriber base of Adobe Inc to gain instant access to this powerful app.

It provides a unique toolset to its users, who were for years frustrated that Adobe’s core digital drawing applications (such as Photoshop and Illustrator) lacked tools and features needed for a modern web app or portable app design were either hard to use or completely missing. Adobe XD fixed that with the adoption of new tools, features, and services that are needed for modern UX/UI design, such as full support for vector-based graphics (crucial for deployment on devices with an incredible variation of display resolutions), responsive resize (with automatic adjusting of all UI elements such as text fields, photos, UI buttons, and more), fast creation of repeat grids (for elements such as photo galleries and lists), streamlined animation design (utilizing linking artboards into full animations), symbol designer (for creation of new app icons, UI buttons and other visual elements such as logos, banners, and transition graphics), fully-featured prototyping and testing (interactive and clickable prototypes, with support for deploying projects on both web browsers and mobile platforms via supplied iOS and Android test apps), built-in support for voice design, Adobe font integration, and more. UI creations made inside Adobe Experience Design can directly support interactions, triggers, auto-animations, overlays, and many other effects and behaviors.

Same as all other apps created inside the Adobe ecosystem, Adobe XD for Windows also features interoperability with various apps such as Illustrator, Photoshop, Photoshop Sketch, After Effects, and all-in-one cross-platform design and prototyping app Adobe Experience Design. Of course, It can also import and export files in popular file formats and has extensive plugin support for direct communication with various enterprise apps such as Slack, Microsoft Teams, Jira, and Airtable. Collaboration tools include support for co-editing, full document history, several forms of project sharing, a tool for sending invites (including private invitations), storing documents on the clouds, recording a video preview, and more.

Originally presented in 2015 and deployed to worldwide users in late 2016, Adobe XD grew into an incredibly scalable and feature-full vector-based UX/UI solution for designing websites, mobile apps on Windows and macOS. The app also supports several international languages — English, French, German, Japanese, Chinese, Korean, Brazilian Portuguese, and Spanish.

Adobe XD can be tested for free via the “XD Starter Plan” license (which is not always offered by Adobe Inc.) and purchased via two premium licenses. The app is currently not a part of Adobe Creative Cloud subscriber service.

Note: 7 days trial version.

Adobe XD

Описание

Полезный софт, который используется для прототипирования веб-ресурсов. Это превосходный ассистент для какого бы то ни было веб-дизайнера либо веб-мастера.

Adobe XD (Experience Design) представляет собой незаменимого помощника для UX/UI специалистов.

Применение

Возможности

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

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

Experience design для windows

Изначально программа была выпущена в свет под кодовым названием Project Comet, затем разработчики переименовали ее в Adobe XD (Experience Design). Программа позиционируется как инструмент для UX дизайна и прототипирования. На Mac программа стала доступна в начале 2016 года, но уже к концу года разработчики выпустили Adobe XD для Windows 10 (Программа недоступна под Windows 8, Windows 7 и ниже, так как разработчики программы используют новые возможности операционной системы Windows 10).

Программа бесплатна и находится пока в стадии бета тестирования. Если брать во внимание недавнюю существенную разницу между Mac и Windows версиями программы, то сейчас, с последним обновлением 13.06.2017 – разницы больше нет, и пользователи виндовс могут наслаждаться полной версией Adobe Experience Design.

Стоит отметить, что на Mac есть замечательная и всем известная программа для создания дизайна интерфейсов и сайтов – это Sketch, который завоевал бешенную популярность во всем мире. Но у Sketch при всех его плюсах есть один существенный минус – программа работает только на Mac OX. Чего не скажешь об Adobe XD, который уже сейчас в БЕТА версии создал весомую конкуренцию Sketch, даже скажу больше – у Adobe XD есть одна ключевая ФИШКА, которой нет у Sketch и вообще не в одной другой подобной программе — это функция Repeat Grid, которая существенно облегчает и ускоряет процесс создания дизайна и о которой мы поговорим ниже.

Преимущества Adobe XD в том, что она работает с векторной графикой, это существенно увеличивает скорость работы, да и еще делает малым размер создаваемых проектов (этот плюс будет особенно очевидным для тех пользователей, кто создавал свои дизайны в Adobe Photoshop, в котором создаваемый проект весит несколько сотен Мб), а также открывает возможность трансформирования и изменения размера объектов, без потери качества.

Adobe XD обзор программы
Функционал и Фишки

Окно запуска программы

При начальном запуске программы открывается окно, в котором можно выбрать заготовленный размер артборда (холст для рисования) из популярных разрешений экранов телефонов, планшетов и пк. Так же разработчики заготовили элементы дизайна интерфейсов компаний Apple, Google, Microsoft – так называемые UI kits.

Так же в этом окне находятся последние открываемые проекты. И начальный обучающий проект, который показывается возможности, но далеко не все (их в программе очень много!)

Интерфейс программы и ее разделы

Меню – находится в левом верхнем углу программы. В этом меню мы можем открывать/сохранять/экспортировать проекты, импортировать файлы, расшаривать (открывать совместный доступ для просмотра) проекты.

Панель инструментов – здесь находятся все инструменты для рисования. Стандартные инструменты — прямоугольник, эллипс, линия и перо для рисования произвольных фигур, «текст» для написания текста, а также инструмент «артборд» для рисования артбордоб (холстов/экранов рисования). Инструмент «лупа», который увеличивает выделенную область, но этот инструмент лично я редко использую в работе, так как разработчики настолько продумали навигацию в Adobe XD, что если вы выучите горячие клавиши «навигации» по проекту, то можно просто с феноменальной скоростью перемещаться по проекту.

Панель слоев и символов – Находятся они в левом нижнем углу интерфейса программы. О панели «символов» ниже, а пока разберем панель «слоев».

Слои – в панели слоев отображаются все артборды проекта, и если кликнуть по артборду, то мы попадем в панель слоев артборда, где мы увидим список всех элементов, расположенных на данном артборде. Что мы можем делать со слоями в панели слоев? Мы можем их перемещать выше ниже относительно друг друга (соответственно те слои, которые в панели слоев выше – будут перекрывать слои, которые расположены ниже, что визуально видно на холсте).

Так же мы можем выделить несколько слоев и группировать их (положив их в папку), нажав правой кнопкой мыши вызвать контекстное меню и выбрать пункт меню «Group». Группировка позволит перемещать сразу всю группу на холсте. Это очень удобно, когда нужно переместить блок элементов, при этом не сбивая расстояния между элементами блока.

Дополнительно мы можем скрыть или показать слои, или группу, кликнув на иконку глазика, а также заблокировать или заблокировать слои, или группу.

Любой из слоев, будь то артборд, группа, отдельный слой или еще какая-либо группа слоев (поговорим о других типах групп – ниже) можно переименовывать.

Разделы дизайна и прототипирования – расположены вверху, немного правее меню программы.
В разделе «Design/Дизайн» мы рисуем дизайн наших интерфейсов и страниц. А в разделе «Prototype/Прототипирование» мы создаем динамический прототип нашего интерфейса или сайта (о прототипировании ниже, в соответствующем разделе данной статьи).

Правая часть интерфейса программы:
Preview – кнопка пред просмотра созданного прототипа проекта.
Share Online – Совместный доступ к просмотру онлайн прототипа проекта с комментированием и прикреплением иконок комментария (в соответствующем разделе данной статьи ниже).
Панель настройки выделенного объекта – эта панель занимает практически всю правую часть интерфейса программы. В ней расположены все настройки выделенного объекта.

Стандартные функции Experience Design

Цвет – в блоке выбора цвета мы можем выбрать цвет заливки фона, бордюра, тени. Так же мы можем сохранять цвет в библиотеку цветов, и выбирать цвета из нее (так же мы можем сортировать цвета в библиотеке и удалять цвета). Библиотека цвета полезна, когда в создаваемом дизайне проекта один и тот же цвет используется неодин раз.

Градиент – при выборе цвета фона выбранного объекта, ему можно задать градиент цвета, выбрав его в выпадающем списке (один цвет/градиент). В градиенте можно задать любое количество цветовых точек перехода. Задание угла/ширины градиента разработчики сделали очень удобным и их можно задавать, перемещая конечные точки линии градиента на самом объекте. Это очень удобно, так как можно сразу наблюдать результат.

Выравнивание – с помощью настроек выравнивания мы можем выровнять элемент относительно артборда или относительно других элементов (при выделении нескольких объектов). Более продвинутые возможности выравнивания рассматриваются ниже, в разделах «Подсказки расстояний» и «Сетка» в данной статье.

Также выделенному объекту можно добавить тень, прозрачность, размытие и изменить размер, повернуть, переместить .

Булевы операции – вычитание/сложение объектов и их пересечений

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

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

Если все же хочется объединить объекты в один сплошной векторный объект, то это можно сделать из контекстного меню, после применения к объекту булевой операции, кликнув правой кнопкой мыши и выбрав пункт меню Path > Convert to Path . Либо нажав сочетание клавиш Ctrl + 8 . И затем трансформировать объект, как произвольную фигуру.

Текст

Используя инструмент текст, мы можем писать текст. Текст является по сути блоком, который мы можем редактировать, поворачивать, производить стандартные операции редактирования текста: выбор шрифта, толщина шрифта, размер, расстояние между буквами, межстрочное расстояние, выравнивание текста. А также изменять цвет, задавать тень, обводку, прозрачность, размытие.

Стоит отметить, что в блоке текста можно редактировать отдельно выделенные участи текста.

Маски

В программе удобно реализована функция маскировки объектов. Объекты маскируются также, как и булевы операции в своеобразную группу маски, которая отображается соответствующей иконкой в панели слоев. Маскировать можно несколько объектов.

Для того чтобы применить маскировку, объекты должны пересекаться друг с другом, затем их нужно выделить и нажав правую кнопку мыши вызвав контекстное меню, выбрать соответствующий пункт меню Mask with Shape . Либо нажав сочетание клавиш Shift + Ctrl + M .

Фишки Adobe XD

Подсказки расстояний

Первая фишка значительно ускоряющая процесс дизайна, это подсказки расстояний между объектами. Если выделить объект, зажать клавишу Alt , то мы увидим расстояние краев объекта относительно артборда (холста), а если при этом навести мышь на любой другой объект или группу, то расстояния будут показаны до этого объекта.

Если мы перемещаем выделенный объект, то при пересечении линии центра (горизонтальной/вертикальной) другого объекта, группы или самого артборда, то нам будут показаны эти линии и объект будет как бы липнуть к этим линиям при перемещении мышью. Это очень удобно, когда нужно выровнять объект относительно другого точно, а не на глаз . Еще такой лайф хак – если зажать клавишу Shift и при этом перемещать мышью объект, то он будет перемещаться либо по вертикали, либо по горизонтали, в зависимости от начального направления движения.

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

Сетка

Если выделить артборд, то мы увидим в его настройках пункт GRID (сетка) , где мы можем включить/отключить сетку выделенного артборда, настроить величину ячеек сетки, цвет ее линий и прозрачность.

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

Артборды

Артборд – это холст, на котором мы рисуем. Adobe XD позволяет создавать любое количество артбордов. Это можно сделать, выбрав инструмент «Артборд» из панели инструментов, затем нарисовать артборд с произвольным размером ширины, высоты, либо выбрав уже заготовленные в программе часто используемые разрешения экранов. А также можно просто выделить уже нарисованный артборд или несколько артбордов, скопировать его и вставить, так артборд продублируется со всеми элементами, которые прорисованы на нем.

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

Чтобы включить данную опцию, нужно в настройках артборда в разделе «SCROLLING» в выпадающем списке выбрать «Vertical» . А в поле «Viewport Height» задать высоту области просмотра, которая будет отображаться на экране без скрола страницы, при просмотре превью проекта, при этом на самом артборде появиться голубая пунктирная линия, которая наглядно показывает границу области видимости.

Символы

Символ — это сохраненный в библиотеку объект или группа объектов, которые могут использоваться сколь угодно раз в проекте. Символ по сути является самостоятельным объектом и при редактировании символа, все изменения будут автоматически применяться ко всем его копиям в режиме реального времени. Это очень удобно, когда в дизайне проекта используются одинаковые элементы, например, кнопка. Если мы сохраним кнопку в символ, продублируем ее и поменяем допустим ее фоновый цвет, то этот цвет будет меняться на всех копиях этого символа.

В Adobe Experience Design символ можно создать несколькими способами: выделив объект или группу объектов, перейдя в панель символов нажать на кнопку +, либо щелкнув правой кнопкой мыши выбрать из контекстного меню пункт Make Simbol , либо нажав сочетание клавиш Ctrl + K .

Прототипирование

В разделе Prototype (прототип) мы можем создавать прототип нашего сайта или интерфейса с переходами. Например, у нас есть кнопка в меню навигации, которая ведет на страницу «О нас», мы можем выбрать эту кнопку и привязать к ней переход по клику на страницу артборда «О нас».

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

При этом параметры эффекта перехода можно настраивать в окошке, которое появляется при определении перехода.

Посмотреть созданный прототип мы можем, нажав на кнопку Preview (превью).

Так же разработчики сделали такую классную вещь, как Live Preview на мобильных (Предпросмотр проекта на мобильном устройстве). Для этого на мобильное устройство нужно скачать и установить соответствующее приложение Adobe Experience Design и подключить мобильное устройство к компьютеру по USB кабелю.

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

Repeat Grid – МЕГА БОМБОВАЯ ВЕЩЬ!

Может компания Adobe и затянула с выпуском Experience Design для создания дизайна интерфейсов и сайтов и Sketch выбился в лидеры в данной сфере наряду с другими подобными программами, но Adobe XD с наикрутейшей функцией Repeat Grid, просто убивает всех конкурентов на повал!

Что такое Repeat Grid в Adobe XD?
Repeat Grid – это функция дублирования элементов или блока элементов. Эта функция сократит вам время создания дизайна в разы!

Для того, чтобы воспользоваться данной функцией, нужно выделить элемент или группу элементов и в меню настроек нажать заветную кнопочку – Repeat Grid . Вокруг выбранных элементов появится зеленая пунктирная обводка с ползунками, потянув за которые, объекты будут дублироваться по вертикали/горизонтали.

Но это далеко не все! Если навести курсор мыши на расстояние между продублированными элементами и зажать мышь, появится розовое выделение расстояний между объектами, потянув за которое, можно изменять это расстояние у всех объектов одновременно, при этом программа не только подсвечивает расстояние между объектами, а еще и показывает его в пикселях. Расстояние можно менять как по горизонтали, так и по вертикали.

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

Ну а теперь-то все? А нет, не все :)! Если мы допустим создаем каталог товаров и дублируем блок товара, затем хотим вставить картинки товара в каждый блок свою, то нам нужно вставлять каждую картинку отдельно в каждый блок, но в сетке Repeat Grid разработчики реализовали мульти вставку картинок.

Чтобы это сделать, достаточно подготовить нужные картинки, выделить их в папке и перетащить в первый блок и отпустить на том элементе, в который хотим вставить картинку, все остальные картинки встанут в тот же элемент в дублях сетки Repeat Grid — последовательно.

Ну а теперь все? Почти :). Разработчики Adobe Experience Design постарались на славу и также реализовали мульти вставку для текста. Чтобы вставить текст также, как и картинки, нужно просто в текстовом документе прописать нужные фразы, каждую на новой строчке, затем сохранить текстовый документ (при сохранении выбрать кодировку UTF8, по умолчанию стоит ANSI, эта кодировка будет отображать русские буквы значками вопроса). И затем так же перетянуть документ на нужный текстовый элемент в первом блоке сетки Repeat Grid. На этом разбор функции Repeat Grid закончен.

Совместный доступ к просмотру онлайн прототипа

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

Для того, чтобы открыть доступ к онлайн прототипу, нам нужно его расшарить, что делается через кнопку Share Online .

После нажатия на кнопку открывается меню настройки онлайн прототипа, где можно задать название прототипа, установить картинку и разрешить/запретить комментирование прототипа. После настроек жмем кнопку Create Link .

Программа закинет наш проект в бесплатное онлайн хранилище компании Adobe и выдаст ссылку на онлайн прототип (чтобы закинуть прототип в хранилище вы должны быть авторизованы в своем аккаунте adobe). Мы можем скопировать ссылку и дать заказчику для просмотра прототипа в браузере, либо перейти на вкладку Embed и скопировать код для вставки на свой сайт. Если мы изменим что-то в нашем проекте, то мы можем в меню расшаривания проекта обновить прототип по полученной ссылке, либо создать новую.

Что можно делать с онлайн прототипом? Можно просматривать все страницы (артборды) проекта, а также переходить на определенные страницы при клике на те или иные элементы дизайна. Переходы при клике по элементу назначаются в разделе прототипирования проекта в самой программе.

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

Плюсы и минусы Adobe XD

Вот, пожалуй, и все, что хотелось рассказать в данном обзоре об Adobe Experience Design. Осталось только обозначить плюсы и пару несущественных, но все же минусов.

Плюсы:
Программа бесплатная (пока находится в бета версии).
Программа доступна как под Mac, так и под Windows 10.
Обновления выходят каждый месяц.
Бесплатное онлайн хранилище прототипов.

Минусы:
Не работают некоторые горячие клавиши в русской раскладке клавиатуры (я заметил только одно – это перемещение слоев выше/ниже в панели слоев Ctrl+[ и Ctrl+] ).
При мулти вставке текста в сетку Repeat Grid, текст сохраненный в кодировке ANSI отображается вопросиками, так что сохранять текстовый документ нужно в кодировке UTF8.

Горячие клавиши Adobe XD для Windows

Scroll – Перемещение по проекту по вертикали
Shift + Scroll – Перемещение по проекту по горизонтали
Ctrl + Scroll – Отдаление/Приближение к центру места на которое наведен курсор мыши
Ctrl + 0 – Увеличение/Уменьшение экрана к размещению всех артбордов в область видимости проекта.
Ctrl + 1 – Увеличение/Уменьшение до 100% размера экрана.
Ctrl + 3 – Увеличение выделенного объекта.
Ctrl + Enter – Открыть превью проекта.
Ctrl + R – Включить Repeat Grid.
Ctrl + G – Группировать объекты.
Shift + Ctrl + G – Группировать объекты.
Shift + Ctrl + M – Создать маску.
Ctrl + K – Создать символ.
Ctrl + ` – Показать/Скрыть сетку артборда.
Ctrl + L – Заблокировать/Разблокировать объект.
Ctrl + ; – Скрыть/Показать объект.
Ctrl + 8 – Преобразовать в контур.
Ctrl + Y – Скрыть/Показать панель слоев.
Shift + Ctrl + Y – Скрыть/Показать панель символов.
Ctrl + E – Экспорт.
Shift + Ctrl + E – Расшаривание проекта (совместный доступ онлайн).
Shift + Ctrl + I – Импорт.
Ctrl + [ – Сдвинуть на слой назад (не работает в русской раскладке клавиатуры)
Ctrl + ] – Сдвинуть на слой вперед (не работает в русской раскладке клавиатуры)
Shift + Ctrl + [ – Сдвинуть назад (не работает в русской раскладке клавиатуры)
Shift + Ctrl + ] – Сдвинуть вперед (не работает в русской раскладке клавиатуры)

На этом у меня все. Спасибо друзья за просмотр данного урока, надеюсь он был вам полезен. Я постарался полностью раскрыть все основные возможности программы Adobe Experience Design. Поделитесь уроком с друзьями.

Всем творческих успехов и крупных заказов от души! Жду ваших комментариев ниже и до встречи в следующих уроках! Пока друзья!