Adobe XD обзор, урок
Всем привет друзья! Сегодня в уроке полный обзор новой, замечательной программы для создания дизайна интерфейсов и дизайна сайтов Adobe Experience Design или сокращенно Adobe XD, а также ее крутых фишек. Программа бесплатная (пока) и доступна для операционных систем Windows и Mac. И так, поехали!
Вкратце о программе и ее преимуществах:
Изначально программа была выпущена в свет под кодовым названием 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. Поделитесь уроком с друзьями.
Всем творческих успехов и крупных заказов от души! Жду ваших комментариев ниже и до встречи в следующих уроках! Пока друзья!
Топ 10 советов по Adobe XD для новичков
Adobe Experience Design (Adobe XD) — одна из последних новинок от компании Adobe, призванная стать конкурентом полюбившемуся всем дизайнерам интерфейсов Sketch.app.
Имея в своем арсенале схожие со Sketch.app функции, а также все возрастающее количество UI-китов, пригодных для использования в Adobe XD, в скором времени эта программа может перетянуть на себя значительную часть пользователей, которые или еще не слезли с Photoshop и создают веб-проекты в нем или еще только выбирают подходящую под свои задачи программу.
Эта статья познакомит вас с 10 полезными хитростями, которые помогут сэкономить массу времени при освоении программы Adobe XD, а также ответит на вопросы, которые, вполне вероятно, возникали у вас в процессе работы с ней.
Наследование настроек текста
Когда вы выбираете инструмент «Текст» и начинаете печатать, то XD по умолчанию использует стандартный стиль текста. Однако, если у вас есть стиль, который вы бы хотели скопировать, просто кликните по объекту инструментом выделения. Затем переключитесь на инструмент «Текст» и либо кликните курсором, чтобы установить точку ввода текста, либо перетащите копируемый объект в область ввода текста. Текст, который вы напечатаете после этого будет наследовать скопированный, в том числе шрифт, междустрочный интервал и интервал между символами.
Замыкание кривой
Как правило, редактировать кривую в Adobe XD очень легко— просто кликните и добавьте точку в любом месте, когда у вас выбран инструмент «Перо». Однако, вы также можете замкнуть кривую, нажав на начальную точку. Если вы хотите замкнуть кривую закруглением, кликните и перетащите ее. И, конечно, как насчет этой начальной точки? Удерживайте нажатой клавишу Cmd, если вы работаете в Mac или клавишу Ctrl, если работаете в Windows 10, когда вы нажимаете и перетаскиваете эту начальную точку, чтобы переместить ее, без присоединения.
Реалистичное размытие фона
С функцией размытие фона теперь вы можете создавать реалистичное размытие фона, которое ваши разработчики смогут дублировать. Некоторые из самых популярных прототипов, которыми я поделилась связаны с регулировкой эмуляции настроек iOS: Dark, Light и ExtraLight.
- Dark: Размытие 25, Яркость 0, Непрозрачность 55%
- Light: Размытие 30, Яркость 15, Непрозрачность 0%
- ExtraLight: Размытие 24, Яркость 40, Непрозрачность 50%
Конвертирование базовых объектов в кривую
Вместо того, чтобы создавать свои иконки с нуля, часто легче начать с простых фигур, таких как прямоугольник или овал. Чтобы преобразовать ее в кривую, просто дважды кликните по простой фигуре, для ее конвертации. (Если вы не внесете никаких изменений, она вернется в исходное состояние.) Если по какой-то причине вы хотите убедиться, что ваши объекты остаются кривой несмотря ни на что, используйте Cmd+8 на Mac или Ctrl+8 на Windows 10, чтобы конвертировать объект в кривую. Если вы находитесь на границе фигуры, ваш курсор изменится на «Перо», чтобы добавить точку вдоль линии. Вы даже можете разорвать существующую фигуру, выбрав инструмент «Перо» и нажав на начальную точку.
Перемещение с помощью инструмента «Рука»
Мне часто задают вопросы об инструменте «Рука». Все очень просто: удерживайте нажатой клавишу Space, чтобы временно преобразовать ваш текущий инструмент в инструмент «Рука». Затем нажмите левую клавишу мыши и перетащите курсор для перемещения по холсту. Еще один совет от профи — если вы работаете на ноутбуке с трекпадом или используете Magic Mouse, вы можете провести двумя пальцами по экрану, чтобы перемещаться по холсту.
Сочетания клавиш для быстрого выбора цвета
Это из наших недавних и любимых нововведений. В прошлом году мы добавили поддержку шестнадцатеричных цветовых значений. Вы можете напечатать любое шестнадцатеричное значение, чтобы оно повторялось для всех шести значений.
- Одиночные символы (например, f) повторяются для всех значений (#ffffff)
- Двойные символы (например, ab) повторяются по порядку (#ababab)
- Тройные символы (например, 123) каждый символ повторяется по порядку (#112233)
Создание дубликата vs. Копировать и вставить
На наших форумах нас часто спрашивают, зачем в нашей программе есть команда «Создать дубликат», когда есть функции Копировать» и «Вставить». Суть в том, что при дублировании объект помещается на тот же уровень по Z-координате, в то время как «Копировать» + «Вставить» переместит его вверх по Z-координате. Это важно помнить, когда вы работаете над сложными файлами! Вы также можете использовать функции «Копировать» + «Вставить», чтобы перемещать объекты по группам.
Экспорт исходников
Экспорт ресурсов является важной частью рабочего процесса дизайнера, особенно при передаче разработчикам. Наш экспортный процесс учитывает, что ресурсы разных размеров являются важной частью современного дизайна графического интерфейса пользователя.
По умолчанию XD будет экспортировать с различным разрешением, в зависимости от платформы. Например, если вы экспортируете для iOS, вам понадобятся 1x, 2x, и 3x версии ресурсов. Если вы создаете иконку в разрешении 100 x 100 и установите «designed at 1x», мы будем экспортировать версии 100 x 100, 200 x 200 и 300 x 300 для полного набора. Однако, если вы создадите иконку в разрешении 90 x 90 и установите «designed at 3x,» мы будем экспортировать в 30 x 30, 60 x 60, и 90 x 90 для создания 1x, 2x, и 3x версий.
Управление редактированием контекста
До того, как мы создали панель слоев, единственным способом обойти это было возможно, используя редактирование контекста. Группы и повторяющиеся сетки (repeat grids) – очень мощные функции, которые вы можете использовать для выравнивания, выделения и повторения. Часто, я использую вложенные группы для работы с чем-то вроде сложной панели пиктограмм, содержащей такие элементы как иконки, текст и фон. В этом случае иконка представляет собой группу, и эта группа находится на том же уровне, что и текстовый элемент, и прямоугольник. Несколько концепций, которые я обычно выделяю в советах:
Прямое выделение. Обычно люди спрашивают, где инструмент «Прямое выделение», и ответ таков: он встроен прямо в инструмент выделения! Удерживайте нажатой клавишу Cmd (Mac) или Ctrl (Windows 10) чтобы выбрать объект, вне зависимости от того, как глубоко от вложен.
- Открытие редактирования контекста.Вы можете открыть редактирование контекста прямо в группе или повторяющейся сетке двойным щелчком по любому объекту внутри них. Теперь внутри редактирования контекста, можно манипулировать со всеми объектами в нем (например, выделять и выравнивать по отношению друг к другу).
- Закрытие редактирования контекста.Теперь, когда вы в редактировании контекста, вы можете нажать Escape, чтобы выйти из него.
Этот набор функций позволяет легко перемещаться между группами, без необходимости искать их на панели слоев. Сосредотачивая свою работу на холсте, вы можете видеть вещи в контексте всего дизайна.
Если вам понравились эти советы и хитрости по некоторым наименее известным функциям Adobe XD, посмотрите мой подробный разбор Repeat Grid – одной из самых популярных функций нашего продукта.
Хотите больше публикаций подобного рода? Ставьте лайки, делайте репосты, и напишите мне (или в комментариях, или в Twitter) какую тему вы хотите, чтобы я подробно разобрала в следующий раз!
Автор: Элейн, продакт-менеджер в компании Adobe
Источник: sketchapp.me
25 уроков по Adobe XD для новичков
Adobe XD — новый продукт от Adobe, предназначенный для разработки прототипов интерфейсов и проработки пользовательских сценариев. Пока для XD мало материалов и библиотек, но их число с каждым днем растет.
Предлагаем вам ознакомиться с отличными уроками по Adobe Xd, которые помогут освоить эту программу.
Как скачать и установить программу Adobe XD
10 ESSENTIAL Tips for Adobe XD
Adobe XD Обзор программы Урок 1
Adobe XD Как начинать прототипирование Обзор программы XD Урок 2
Adobe XD Обзор программы. Подготовка материала для прототипирования Урок 3
Adobe XD Финальная версия урока или как оживить ваш макет Урок 4
Мастер-класс по Adobe XD
Адаптивная HTML вёрстка из Adobe XD на реальном примере
Adobe XD (Preview) The Basics of Adobe Experience Design | Dansky
Learn How to Use the Repeat Grid Tool in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Create Responsive Guides in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Export Assets in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Edit the Corner Radius of Shapes in Adobe XD | Dansky
Learn How to Quickly Add Images in Adobe XD | Dansky
Learn How to Design a Switch UI in Adobe XD | Dansky
Learn How to Design a Carousel Slider in Adobe XD | Dansky
Learn How to Use the Pen Tool in Adobe XD | Dansky
How & Why to Prototype Adobe XD Tutorial
Create Grids for Responsive Design Adobe XD Tutorial
Create Floating Shadows Adobe XD Tutorial
Color & Character Styles Adobe XD Tutorial
How to Design Banners in Adobe XD
How to Design & Prototype Adobe XD Tutorial
How to Design a Chat UI in Adobe XD
Scrollable Artboards in Adobe XD
Создание дизайна с реальными данными
Ранее, мы представили Adobe XD (бывший Project Comet), что вызвало бурную реакцию в мире. Нас буквально засыпали положительными отзывами и запросами на доступ. Если вы еще не в курсе, Adobe XD – это совершенно новый дизайн инструмент от компании Adobe, который позволит вам создавать дизайн и прототип в одном месте!
В создании нового инструмента с нуля, есть ряд преимуществ. Это позволяет задуматься о производительности и простоте использования инструмента на начальном этапе создания. А также продумать значимость работы с реальными данными в процессе дизайна.
Я объединил несколько наработок по этим вопросам в тестовой сборке Adobe XD и презентовал ее на Adobe MAX 2015 Sneaks
В этом видео показана масса интересных процессов. Но прежде чем мы рассмотрим их детальнее, позвольте рассказать, как мы дошли до этого.
Создание дизайна с реальными данными
Будучи инженером, я всегда интересовался камнями преткновения в дизайне и как их возможно преодолеть. Работа с реальными данными является одним из них, с которым сталкиваются на начальном этапе. И это обычно сильно влияет на готовый дизайн.
Сообщество UX дизайнеров также принялось отстаивать необходимость реальных данных:
Мы видим мир и пользователей как они есть, вместо того, чтобы представить их такими, какими они должны быть. Создание дизайна с реальными данными, позволяет нам двигаться быстрее, раньше выявлять проблемы и трудности, создавая лучшее восприятие для пользователя . — Josh Puckett on Modern Design Tools: Using Real Data
Я вспоминаю обсуждения и брейнштормы с коллегами (Tom Krcha) об использовании реальных данных в дизайне и то, как подобный инструмент облегчит жизнь многим. У нас было множество идей, но их реализация стопорилась по мере создания такого продукта с нуля.
Мы уделили основное внимание на более глобальную проблему: повторяющиеся элементы в списках и таблицах при создании дизайна. Это важный элемент для мобайл и веб дизайна, но очень утомительный для создания вручную. Чтобы упростить процесс, мы создали инструмент под названием Repeat Grid. Вы можете выбрать любой элемент на холсте и продублировать его по горизонтали или вертикали. Элементы в Repeat Grid сохраняют свое расположение и стиль, но текст и изображение может изменяться. Наполнение можно регулировать.
После реализации такого инструмента, я вспомнил про разговоры о реальных данных в дизайне.
Основная проблема заключалась в внедрении данных в дизайн. Суть в том, что дизайн – это связка индивидуальных графических объектов: шейпов, иллюстраций, текстовых элементов. Но данные по своей сути – структурированы. Вы конечно же можете попытаться навязать структуру дизайну, но в таком случае, дизайн будет нескладным и усложнять процесс.
Repeat Grid предлагает простую структуру для вашего дизайна, а также решает ключевую проблему: выбор. Выбор одного элемента в Repeat Grid влияет на все копии этого элемента. Это означает, что если у вас, допустим, есть список из 10ти имен, вы можете вставить их все на полотно, всего лишь выбрав один текстовый элемент при помощи Repeat Grid. Больше нет необходимости выбирать каждый элемент по отдельности.
Реальные данные в Adobe XD
В тествой сборке программы, продемонстрированной на MAX Sneaks, данные (текст или иллюстрации), могут быть внедрены в дизайн через:
- Встроенный шаблон
- Файловую систему
- Google таблиц
- Интернет
* Все, что показано ниже – находится в стадии разработки и может быть изменено.
Встроенные шаблоны контента
Каждый раз, при выборе шаблона Name (Имя), вы получаете случайный список имен.
Данные из файловой системы
Перетащите текстовый документ на элемент в Repeat Grid и текст будет подтягиваться автоматически.
Вы также можете работать с JSON или CSV данными, вставляя различные элементы из свойств и таблиц.
Данные из Google таблиц
Вставьте ссылку на Google таблицу и выберите колонку, из которой необходимо взять данные в ваш дизайн. Переключая колонки, позволит вам быстро менять источник ввода данных. Также предусмотрен функционал, позволяющий посмотреть, как будет выглядеть ваш дизайн при смене языка.
Данные из Интернета
Откройте любую страницу в сети и наведите курсор мыши на повторяющийся элемент на ней. Внедрить данные в дизайн можно в один клик на элементе. Используя данные с коммерческой страницы, вы получите релевантный дизайн, без участия разработчика.
Также, очень легко можно перенести данные фото и имен друзей с Фейсбука в дизайн. Попробуйте найти фото на Adobe Stock и всего в несколько кликов встроить массу разных картинок в ваш дизайн.
Переходим на более новый и интересный Adobe XD
Об Adobe XD
Итак, что же такое этот самый волшебный Adobe Experience Design, который с легкой руки окрестили убийцей Sketch и Photoshop?
Adobe Experience Design – это инструмент для прототипирования и создания UI/UX дизайна, ориентированный на быстрое создание полноценных дизайн-макетов, с адекватным заполнением графматериалов и контента.
Как это работает?
Реализовано это посредством отбора методов и инструментов, которые используются дизайнерами для создания интерфейсов и дизайна мобильных приложений и сайтов в Photoshop, Illustrator или InDesign. Очень приятно, что Adobe действительно заморочились над тем, чтобы изучить базис тех инструментов, которые постоянно используются дизайнерами, и выкинули всё лишнее, существенно улучшив работу этих самых инструментов.
К примеру работа с обтравочными масками перестала быть головной болью, и теперь наконец можно грузить изображения пачками в необходимые нам фигуры – теперь работа по заполнению какой-нибудь типовой страницы с карточками товаров ускоряется в худшем случае в 3-4 раза. Изображения сами сжимаются до нужны размеров, выравниваются как надо, и встают без необходимости править их руками после вставки. Этим самым мы автоматизируем процесс подготовки макета, а если Вы как дизайнер еще и успешно используете сценарии в Photoshop для обработки фото – вы получаете просто волшебный чудо-инструмент для работы с большим количеством информации.
Работа с карточками товаров или статей также очень интересно реализована – теперь растягивая карточки вы не получаете увеличивающийся текст, текст равномерно распределяется по карточке, отступы растягиваются плавно – что позволяет быстро менять размер карточек, без необходимости в ковырянии в слоях и выискивании нужного слоя или группы слоев.
Сами карточки копируются быстро и удобно – тянем за краешек, и теперь у нас не одна карточка – а целых 4, выровненных по ширине, привязанных к сетке (если надо), и легкозаполняемых.
Дорогу – шаблонам!
Для ускорения работы активно используются шаблоны – теперь кнопки, меню и прочие элементы интерфейса можно выбросить в палитру «Символы» – и использовать их оттуда, перетаскивая всё что нужно за секунды – без переключения между макетами со стайлгайдом или типовой страницей и перетаскивания элементов. Работа с палитрой очень удобна – если нам нужно заменить цветовую гамму, мы её меняем и получаем изменение цвета во всех элементах которые мы уже использовали в макете.
Помимо всего этого для дизайнеров мобильных приложений здесь есть такая полезная функция, как презентация интерфейса в режиме прототипирования – хотите показать свой дизайн заказчику – пожалуйста, запускаем режим прототипирования, запускаем превью – сразу же сохраняем наше интерактивное действие и переход между окошками приложения в видеоформате. Практично, удобно, и ужасно красиво и просто реализовано.
Это далеко не весь список приятных “плюшек” в Adobe XD, их куда больше + с каждым обновлением выходят всё новые и новые инструменты.
Сейчас Adobe XD доступен бесплатно для владельцев компьютеров с MacOS и Windows 10 и старше на борту абсолютно бесплатно (потому что Beta) – дальше скорее всего станет платным, но ради удобства пожалуй стоит выкатить денег за полезный набор инструментов.
Вердикт: не тормозить и переходить на удобные инструменты и облегчать себе жизнь.
Здесь можно посмотреть немного интересных видео о работе с сайтами в Adobe XD:
Обновление Adobe XD ноябрь 2019. Совместная работа, история документа, состояния компонентов
Мы любим ежемесячно выпускать новые функции и усовершенствовать Adobe XD, но конференция Adobe MAX, несомненно, является нашим любимым временем года, поскольку мы представляем основные новинки нашего продукта. Этот год не стал исключением, поскольку релиз XD на конференции MAX 2019 стал одним из наших самых крупных релизов за всю историю!
В этой версии представлено множество новых функций и улучшений, которые помогут вам и вашей команде сотрудничать и быстрее воплощать в жизнь свои идеи. В том числе совместное редактирование в режиме реального времени, состояния компонентов, поддержка интерактивных взаимодействий, переработанный менеджер плагинов и многое другое. И, как всегда, мы стремимся представлять новые функции с тем же уровнем простоты использования, производительности и качества, который вы ожидаете от XD. Поэтому ваша команда дизайнеров может положиться на XD и упорядочить свой рабочий процесс.
Наряду с новыми функциями, мы также расширили ряд других областей XD, основываясь на отзывах дизайнеров, использующих наш продукт. Мы любим получать запросы новых функций на UserVoice и в дискуссиях о будущем XD в Twitter, Facebook и наших форумах.
Давайте рассмотрим нововведения последней версии!
Сила совместно работы в XD
Дизайн – это изначально коллективный процесс, что подразумевает глубокое понимание проблем и выработку решений, основанных на данных, эмпатии, исследованиях и постоянном диалоге с пользователями, товарищами по команде и заинтересованными сторонами. В обновлении XD, представленной на MAX 2019, мы делаем огромный шаг вперед в обеспечении сотрудничества.
Совместное редактирование (Бета-тест)
Совместное редактирование (Coediting), доступное в бета-версии, позволяет вам и другим дизайнерам работать вместе в XD в режиме реального времени. Совместное редактирование эффективно работает в фоновом режиме, позволяя нескольким дизайнерам одновременно проектировать и проводить итерации в одном облачном документе, одновременно получая выгоду от производительности и качества нашего нативного приложения. С помощью совместного редактирования вы и ваши товарищи по команде можете совместно проектировать, не беспокоясь о дублировании работы или поддержании лишних документов. Coediting упрощает рабочий процесс вашей команды.
Совместное редактирование может быть включено в облачных документах XD. Когда оно включено, вы можете пригласить других членов команды редактировать документ вместе с вами. В самом документе вы увидите, когда другие дизайнеры активны, и какие артборды и объекты они редактируют в настоящее время.
Совместное редактирование полностью изменит работу команд, и откроет в XD новые рабочие сценарии, а это значит, что нам многому предстоит научиться! Сегодня мы делаем доступным бета-версию совместного редактирования, чтобы вы сами могли попробовать ее и, дав фидбек, помогли нам понять, что можно улучшить. Мы рекомендуем принять участие в бета-тестировании и оставить свой отзыв, но учтите, что могут возникнуть проблемы с качеством и производительностью, поскольку мы продолжаем готовить эту функцию к общему доступу.
История документа
Когда вы работаете, облачные документы автоматически сохраняют вашу работу на ходу. В этом релизе вы сможете увидеть историю документа и то, как ваша работа развивалась с течением времени. Она позволяет открывать предыдущие версии документа, чтобы вы могли скопировать элементы в текущий документ или отдельно сохранить предыдущую версию. История документа автоматически доступна на 30 дней, но вы можете добавить в закладки определенные версии документа, чтобы сохранить их на неопределенный срок. Вы также можете называть версии, чтобы отслеживать важные этапы разработки проекта.
Чтобы получить доступ к истории документа, просто нажмите на иконку рядом с названием облачного документа в верхней части экрана.
Важной частью процесса проектирования является возможность поделиться работой с другими командами и заинтересованными сторонами для получения фидбека и предоставления готовых ресурсов для разработчиков, чтобы дизайн мог быть встроен в рабочие продукты. Это всегда было важной частью XD, поэтому мы объединили несколько различных возможностей совместного использования в совершенно новом режиме Share наряду с режимами Design и Prototype.
Вы должны обращаться к режиму Share, когда нужно поделиться своей работой с другими. Здесь вы можете создавать и управлять ссылками на свою работу, используя новые пресеты настройки для различных вариантов использования, включая обзоры дизайна, разработку, презентации и пользовательское тестирование. Вы точно увидите, какие артборды будут включены в общий артефакт и сможете дать каждой ссылке уникальное имя, чтобы их было легко отслеживать. Вы также можете управлять правами доступа к вашим общим ссылкам и добавлять защиту паролем. Можно ожидать дальнейших улучшений режима Share в будущих версиях, которые еще более упростят совместное использование прототипов или различных наборов арбордов.
Все эти новые возможности, включая совместное редактирование, доступны во всех пакетах Adobe XD. Пользователи наших платных планов получат неограниченный доступ к этим возможностям, а до апреля 2020 года мы добавим неограниченный доступ ко всем функциям совместного использования и совместной работы в бесплатный план XD Starter.
Мы не можем дождаться, чтобы увидеть, как эти возможности открывают новые способы работы в XD для вас и вашей команды!
Углубление возможностей взаимодействия и прототипирования
С самого начала мы создали XD, как универсальную платформу для проектирования и прототипирования пользовательского опыта. Наша цель состояла в том, чтобы помочь командам дизайнеров сосредоточиться на создании и предоставлении невероятного опыта, вместо того, чтобы беспокоиться о синхронизации файлов проекта между несколькими инструментами дизайна. В дополнение к нескольким обновлениям функциональных возможностей приложения, которые мы делали в течение года, мы рады поделиться значительным обновлением возможностей взаимодействия и прототипирования.
Состояния компонентов
В XD компоненты помогают дизайнерам создавать согласованность в рамках всего проекта, позволяя избегать повторного создания в документе одних и тех же элементов интерфейса. Для тех, кто создает в XD дизайн-систему и управляет ей, возможность связывать компоненты с централизованным источником позволяет вам и вашей команде повторно использовать элементы в нескольких проектах. Но сегодняшний опыт – это нечто большее, чем просто визуальные элементы – они динамические и адаптивные, основанные на различных взаимодействиях.
Вот почему с этим релизом XD мы делаем компоненты еще более мощными, добавив состояния компонентов. Теперь каждый компонент может поддерживать несколько вариантов одного элемента интерфейса, представляющего различные типы взаимодействия. Например, когда вкладка активна или, когда пользователь нажимает на кнопку. Состояния компонентов означают, что вам не нужно создавать несколько компонентов для разных сценариев; вместо этого вы можете сосредоточиться на опыте и легко организовывать и управлять компонентами по всем документам.
Создавать состояния компонентов легко. Выбрав компонент, вы увидите новый раздел в инспекторе свойств в правой части экрана, где вы можете создавать и управлять различными состояниями для выбранного компонента. Когда выбрано определенное состояние, вы можете изменить его свойства, например, цвет заливки компонента или стили символов, так же, как при редактировании обычного компонента.
Вы также можете работать с состояниями компонентов в режиме Prototype, что позволяет создавать интерактивные интерфейсы, а также реализовывать микровзаимодействия как часть опыта вашего прототипа. Если выбранный компонент имеет состояния, то вы увидите различные состояния в качестве пунктов назначения для действия прототипирования. Например, вы можете определить состояние наведения курсора для компонента кнопки в режиме Design, а затем установить состояние наведения в качестве пункта назначения для взаимодействия прототипирования в режиме Prototype.
Чтобы помочь вам лучше понять, как в Adobe XD работают состояния компонентов, мы совместно с Danksy создали XD Fresh UI Kit. В нем вы найдете вымышленное приложение, которое имитирует опыт покупки фруктов и овощей онлайн. Наш набор использует состояния компонентов для включения и выключения различных элементов «упорядочивания», таких как флажки, переключатели и кнопки, без необходимости использования дополнительных артбордов.
Триггер наведения
Одним из наиболее распространенных вариантов использования состояний компонентов является создание состояний наведения курсора (hover states). Мы откладывали ее добавление до тех пор, пока не смогли объединить ее с функциональностью состояний компонентов, чтобы сделать ее максимально полезной для команд дизайнеров. Как следует из названия, триггер наведения вызывается всякий раз, когда пользователь наводит курсор на элемент, например, кнопку в десктопном приложении.
Как часть определения состояний компонентов (как описано выше), вы можете выбрать определение состояния наведения курсора, которое будет автоматически связывать необходимые взаимодействия, чтобы реагировать на наведение курсора на компонент. Также вы можете вручную применить триггер наведения к любому элементу в режиме Prototype, используя раскрывающийся список триггера в Инспекторе свойств. Hover объединяет растущий список триггеров, поддерживаемых в XD, включая нажатие, перетаскивание, голосовые команды, ввод с клавиатуры и ввод с геймпада.
Поддержка нескольких взаимодействий
Поскольку мы поддерживаем все больше и больше вариантов ввода данных, разработчики взаимодействий могут создавать прототипы полные интерактивного опыта без необходимости писать какой-либо код. Часто взаимодействия прототипов будут различаться в зависимости от данных, вводимых пользователем. Например, одно действие, когда пользователь нажимает на объект, а другое – когда перетаскивает его. До сих пор это требовало дублирования артбордов для подключения различных сценариев прототипирования, но теперь это больше не нужно!
Теперь вы можете определить несколько взаимодействий для одного объекта без лишней работы. При создании прототипа в XD просто перетащите несколько соединений (wires) из одного объекта, чтобы определить все сценарии взаимодействия. Вы можете определить различные взаимодействия на основе разных триггеров для обработки более сложных взаимодействий, таких как реагирование на ряд различных голосовых команд или ряд различных клавишных команд. Вы также можете использовать несколько взаимодействий с состояниями компонентов. XD автоматически узнает, что вы уже определили взаимодействие для определенного триггера, поэтому вам не придется беспокоиться о конфликтующих взаимодействиях во время работы.
Мы не можем дождаться, чтобы увидеть, что вы создаете с помощью мощной комбинации компонентов и их состояний, нового триггера наведения и поддержки нескольких взаимодействий!
Расширяемость и совместимость с другими инструментами
Одна из основных причин, по которой команды дизайнеров выбирают XD, заключается в нашей открытой платформе и совместимости с другими инструментами, как Creative Cloud, так и сторонними инструментами, и платформами. В рамках этого релиза также представляем обновление и улучшение работы XD с другими инструментами.
Расширенная интеграция библиотек Creative Cloud
Библиотеки Creative Cloud позволяют обмениваться логотипами, цветами и многим другим между приложениями Creative Cloud. Благодаря существующей поддержке библиотек Creative Cloud вы можете использовать в XD ресурсы, созданные в других приложениях Creative Cloud, таких как Photoshop и Illustrator. На основе ваших отзывов мы расширяем поддержку библиотек Creative Cloud, чтобы вы могли создавать библиотеки и управлять ими из XD, а также добавлять ресурсы и компоненты из XD в существующие библиотеки и использовать их в других приложениях Creative Cloud. Это позволяет совместно использовать ресурсы дизайн-системы и маркетинга в рамках единой творческой системы всей вашей организации.
Улучшенный импорт из Sketch и совместимость
Мы знаем, что многие команды дизайнеров используют различные инструменты в своих процессах и что для полного принятия XD важно, чтобы вы могли использовать существующие для них ресурсы. Хотя мы уже некоторое время поддерживаем импорт файлов из Sketch (и постоянно улучшаем точность импорта на основе ваших отзывов), в этой версии добавлена возможность конвертировать существующие библиотеки Sketch в облачные документы XD, чтобы вы могли использовать активы Sketch Libraries в XD, как часть вашей дизайн-системы. XD автоматически свяжет все активы и компоненты в вашей преобразованной библиотеке с исходным облачным документом, чтобы вы могли использовать их прямо в XD. Вы также можете вносить изменения в исходный облачный документ и переносить эти изменения в свои проекты посредством связанных активов.
Редизайн менеджера плагинов
На MAX 2018 мы открыли платформу Adobe XD, чтобы дизайнеры и разработчики могли расширить возможности программы с помощью плагинов. На сегодняшний день для XD доступно более 200 различных плагинов, включая Jira Cloud, zeroheight, UI Faces, Stark, Arranger и десятки других, которые помогают автоматизировать рутинные задачи проектирования, подключать XD к другим инструментам и расширять возможности XD для новых случаев использования. Наше сообщество разработчиков постоянно внедряет новые плагины и совершенствует существующие, чтобы использовать новые возможности XD.
Поскольку наша экосистема продолжает расти, мы хотим, чтобы вы, как можно проще находили плагины, нужные для вашего уникального рабочего процесса. Вот почему мы рады представить полностью обновленный менеджер плагинов. Переработанный менеджер плагинов позволяет вам находить рекомендуемые плагины, просматривать подобранные коллекции, изучать различные категории плагинов и видеть дополнительную информацию о их возможностях, включая оценки других дизайнеров, перед их установкой в XD. Вы также можете связаться с разработчиком плагина, чтобы получить поддержку или оставить отзыв и скопировать ссылки, чтобы поделиться ими с другими членами вашей команды.
В дополнение к переработанному менеджеру плагинов мы продолжаем расширять спектр API, доступных для разработчиков. В этом выпуске мы представляем новый набор API-интерфейсов XD Cloud Content, которые позволяют переносить информацию о документах XD в другие приложения. Мы используем эти API для поддержки нескольких интеграций, таких как Jira, Slack, и Microsoft Teams. Вы можете прочитать подробнее об этих новых API и начать работать с ними на нашем сайте для разработчиков.
Подобно тому, как дизайн никогда не бывает завершенным, мы будем продолжать развивать XD по мере роста и изменения потребностей дизайнеров. Вы можете получить доступ к новым функциям, загрузив последнюю версию XD или обновив его с помощью приложения Creative Cloud.
Следите за обновлениями XD и, как всегда, делитесь своими мыслями и отзывами с нашей командой!
Присоединяйтесь к нашему сообществу
Мы хотели бы продолжить диалог! Помогите нам сформировать будущее Adobe XD, отправив запросы функций через UserVoice. Вы можете следить за обновлениями в Twitter @AdobeXD Кроме того, вы можете там связаться с нашей командой с помощью хештега #AdobeXD. Вы можете найти нас в Facebook, где мы делимся видео и новостями, а также отвечаем на вопросы во время прямых эфиров
Делитесь своими работам с хештегом #MadeWithAdobeXD
Когда публикуете свои прототипы на Behance, не забывайте ставить хештег #MadeWithAdobeXD и выбирать Adobe XD в пункте “Tools Used”. Тогда, возможно, ваша работа попадет на веб-сайт Adobe XD, новостную рассылку или страницы в социальных сетях.
4 причины победы Adobe XD над Sketch
Для тех кто не в курсе, Adobe XD, ранее Project Comet — инструмент проектирования основанный на векторе, был запущен в начале 2016 года.
В ноябре прошлого года я присоединился к команде проектировщиков из Red Ventures, чтобы посетить конференцию Adobe MAX в солнечном Сан-Диего. Мы изучили большое количество информации о том, что Adobe планирует на 2017 год, включая новые интересные возможности в Adobe XD.
После конференции я убежден, что Adobe XD — лучший инструмент на рынке для проектировщиков UX/UI в 2017 году. И бесспорно выигрывает у Sketch.
4 причины, по которым XD правильный инструмент для UI/UX дизайнеров
У вас уже оформлена подписка на Adobe CC
Более чем 90% профессионалов в мире используют продукты Adobe каждый день. С ежемесячной подпиской на Adobe Creative Cloud, доступ к XD уже включен — никакая дополнительная подписка не потребуется.
В то же время Sketch недавно представил новую структуру цен, которая требует от пользователя оформления годовой подписки для получения обновлений.
Adobe XD создан для команд
Наиболее важные обновления вышедшие на XD за последние 12 месяцев очень перспективны, и обещают нам ещё большие изменения в будущем. Многие из них созданы с учетом необходимости работы в команде. Правда на данный момент такой функционал доступен только в сборке для закрытого тестирования и в общедоступной бета-версии многое ещё не реализовано.
- Интеграция с библиотеками Creative Cloud
В XD легко перемещать текущие проекты между устройствами и другими продуктами Adobe. Облачное управление проектами также облегчает беспрепятственную передачу данных между членами команды.
Простое присвоение проекту URL адреса для встроенного, прямого комментирования товарищами по команде и клиентами.
- Руководство по стилю
Создает и публикует единое руководство по стилю для любого файла с уникальным URL адресом, которым можно поделиться.
- История изменений и управление версиями
Быстрая загрузка и возврат к предыдущим версиям.
- Совместная работа в реальном времени
Теперь можно работать одновременно в том же самом файле.
- Совместимость
В то время как Sketch — приложение только для Mac, с Adobe XD без проблем смогут работать товарищи по команде, предпочитающие Windows.
Adobe XD — инновационный источник возможностей для дизайнера
Если вы работали со Sketch, то наверняка знакомы с его набором инструментов и бесконечными плагинами, которые обновляются каждую неделю. Плагины помогают, за исключением тех случаев, когда выходит обновление и всё ломается. Подобное несколько раз случалось со мной, и каждый раз приходилось искать решение по статьям и форумам.
С Adobe XD нет нужды в инструментах: Principle, Invision, Flinto и других плагинах. Большинство аналогичных действий можно выполнить в самом XD. Можно больше не зависеть, от того как третье лицо поддерживает свой софт при обновлении. И да, это настолько же здорово, насколько здорово это звучит.
В Adobe XD не нужны плагины для следующих действий:
- Создание анимированных прототипов, чтобы наметить пользовательский путь и взаимодействие элементов друг с другом.
- Функция Repeat Grid (создание повторяющихся элементов). Не совсем понятно о чём речь? Посмотрите
- Навигация в панели слоев, которая выделяет только слои в группе или выбранном объекте. Теперь вы безболезненно можете найти тот слой, которому забыли присвоить имя.
- Замена цвета в любой части документа по одному клику. (Смотрите с 55 секунды в этом видео)
- Редактирование символов в монтажной области и просмотр изменений, сделанных в режиме реального времени через все монтажные области. (Смотрите с 50:10 в этом видео)
Adobe XD быстр как молния
XD по-настоящему быстрый. Приложение задумывалось разработчиками как оперативное в работе и демонстрирует это. Особый акцент создатели сделали на реализации новых возможностей без увеличения объема дистрибутива. Даже загрузка большого файла не мешает приложению, справляться с любой задачей мгновенно.
Сопоставим это с тем, как медленно Sketch работает с большими файлами и при этом занимает 200ГБ в вашем MacBook. Так что и здесь XD явно преуспевает.
Adobe XD находится под управлением солидной компании, имеющей широкие возможности
За плечами у Adobe более 30 лет инвестирования в творческую индустрию, 6,6 миллиона глобальных пользователей и 14 154 сотрудника по всему миру. В их распоряжении невероятное количество ресурсов. Постоянное обновление каталога продуктов, имеющего возможность синхронизации с единой библиотекой.
Для сравнения Bohemian Coding, компания-учредитель Sketch, была основана в 2008 и насчитывает всего 20 сотрудников. Такое существование, схожее с небольшим магазином имеет свои преимущества. Но в такой ситуации для Sketch будет сложно конкурировать с масштабом и перспективой Adobe.
Если Adobe продолжит выпускать обновления к XD в текущем темпе, у Sketch не останется шансов.
Владимир Синицын — преподаватель и координатор направления «Дизайн» в «Нетологии». Вы сможете освоить одну из самых востребованных профессий, повысить уровень своих знаний, освоите инструменты веб-дизайна и узнаете всё о проектировании интерфейсов. А также научитесь работать с инфографикой. Выбирайте курс по своему вкусу и записывайтесь!