photo5952673700316817913 1160x620 - Обновление Adobe XD август 2019. Панель плагинов, интеграция с Photoshop, возможность копировать CSS

Adobe XD – это живая, дышащая платформа для дизайнеров, позволяющая создавать удивительные впечатления, и она постоянно развивается, чтобы поддерживать творческий рабочий процесс пользователей. В этом месяце, в обновлении Adobe XD, мы представляем совершенно новый способ использования плагинов с новой панелью плагинов, улучшая интеграцию между XD и Photoshop, и вводим автоматически генерируемый код CSS в спецификациях проекта, которые разработчики могут копировать и вставлять в их код. Мы также внесли некоторые ключевые улучшения в компоненты.

Панель плагинов

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

Мы тесно сотрудничаем с сообществом разработчиков плагинов XD и рады представить несколько новых плагинов для XD, оптимизированных для Plugins Panel (панели плагинов). Вы можете узнать больше о новой Panel и увидеть некоторые из плагинов в действии в нашем полном посте «Put the Power of Plugins at Your Fingertips».

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

Открывайте и редактируйте изображения с помощью Photoshop, прямо из XD

Adobe XD является единственной платформой, которая изначально интегрируется с другими приложениями Creative Cloud, а ее использование вместе с Adobe Photoshop позволяет легко создавать, редактировать и импортировать изображения в прототипы XD. Теперь, благодаря улучшенной интеграции с Photoshop, вы можете использовать все возможности инструмента для редактирования изображений прямо из XD.

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

Копируйте и вставляйте фрагменты кода CSS

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

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

Улучшены границы для компонентов

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

Как вы можете видеть на видео выше, чтобы вместить эффект тени, ограничивающая рамка компонента кнопки сделана намного больше, чем объект внутри него. Теперь вы можете щелкнуть правой кнопкой мыши компонент и выбрать «Подогнать границы к содержимому», чтобы сбросить границы, таким образом эффективно решив проблему. Вы можете сделать это для одного экземпляра компонента или для основного компонента, чтобы применить изменение сразу ко всем экземплярам в прототипе. Для новых компонентов, созданных в последней версии XD, границы экземпляра автоматически сбрасываются, когда дизайнер добавляет или удаляет из него контент.

Дробных пикселей больше нет

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

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

Для любого контента, созданного до этого выпуска, дробные значения будут сохранены, чтобы не мешать уже существующей работе, но мы надеемся, что это усовершенствование (и другие обновления в этом выпуске) сделают работу с элементами в XD намного комфортней. Для получения полного списка новых функций и обновлений в этом выпуске Adobe XD перейдите на нашу страницу “Что нового”.

Сообщество UX

Мы хотели бы продолжить наш диалог! Помогите нам сформировать будущее Adobe XD, можете оставить свой фидбек на https://adobexd.uservoice.com. также вы можете следить за нашими обновлениями @AdobeXD для получения обновлений или связаться с командой в Twitter с помощью #AdobeXD. Вы также можете связаться с нами через Facebook, где мы обмениваемся видео и обновлениями, а также отвечаем на вопросы.

Оригинал: Dani Beaumont

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Тестируем Auto-Animate от Adobe XD

На ежегодном мероприятии Adobe Max 2018 Adobe анонсировала обновленную версию Adobe XD и представила новую функцию Auto-Animate

Adobe XD убьет Sketch и InVision?

Adobe XD – это ответ Adobe на Sketch и InVision. В статье вы узнаете почему Adobe XD будет доминировать на рынке

Adobe XD представляет дизайн-системы. Большое обновление

Легко создавайте, обменивайтесь и управляйте повторно используемыми цветами, стилями и компонентами