Импорт материальных значков и экранов Google в Adobe XD

Поиск

Последнее обновление 21 мая 2021 г.

Adobe XD улучшает и упрощает процесс создания интерфейсов за счет импорта наборов для пользовательского интерфейса. Узнайте, как импортировать элементы системы дизайна Google, чтобы без промедления начать создавать свой пользовательский интерфейс.

Итало Саннино занимается цифровым искусством уже более 20 лет, начиная со своего выпуска из Академии изящных искусств Неаполя, где сейчас обучает дизайну пользовательских интерфейсов. В 1997 году он основал небольшое агентство новых медиа-технологий «Geko», которое стало его личной площадкой для экспериментов. Благодаря Adobe Guru Project и своему статусу профессионала сообщества Adobe он принимал непосредственное участие в разработке методологии, дизайне и планировании используемых интерфейсов и соответствующих инструментов Adobe, недавно став одним из представителей компании Wacom.

Посмотрите на его работы здесь!

В первую очередь: активируйте необходимые шрифты

Google Material — это система дизайна, изначально разработанная Google для Android. Оформление играет важную роль в использовании систем дизайна. Чтобы обеспечить правильное отображение дизайна, активируйте привязанные шрифты из библиотек Adobe Fonts.

Примечание.

Google Material — это больше, чем просто набор значков и стилей для кнопок. Это система дизайна, которая не просто включает общие рекомендации относительно пользовательских интерфейсов для Интернета и мобильных приложений, но и оптимизирует использование импортированных элементов интерфейса. Дополнительные сведения см. на странице Материальный дизайн.

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

Откройте страницу Roboto на Adobe Fonts.
Нажмите переключатель Активировать все шрифты в правом верхнем углу, чтобы активировать это семейство шрифтов.

Страница Roboto на fonts.adobe.com

Подготовка к импорту наборов пользовательского интерфейса

Запустите Adobe XD. Откроется страница-заставка, на которой представлены различные возможности. Начните со стандартного набора, например iPhone 6/7/8.
После выбора набора и создания документа выберите пункт меню: Файл > Загрузить наборы для пользовательского интерфейса > Google Material.

Меню загрузки наборов для пользовательского интерфейса
Вы будете перенаправлены на страницу скачивания Google Material. Нажмите ссылку скачивания набора для пользовательского интерфейса в формате Adobe XD.

Страница скачивания файлов формата Adobe XD
Откройте недавно скачанный файл Adobe XD.

Файл с набором для пользовательского интерфейса Google Material

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

Импорт отдельных элементов в проект

Этот метод имеет неоспоримые преимущества: файл вашего проекта не сильно увеличивается, а импортируемые ресурсы находятся под полным контролем.

Определите, какой элемент (или элементы) пользовательского интерфейса вас интересует.
Используя инструмент Выделение (нажмите клавишу «V»), выберите элемент пользовательского инструмента.
Скопируйте выбранный элемент, нажав Cmd+C (Mac) или Ctrl+C (Windows), и вставьте его, нажав Cmd+V (Mac) или Ctrl+V (Win).

Выполняйте вставку элементов, нажав комбинацию Cmd+V (Mac) или Ctrl+V (Win).

В данном случае в качестве примера интеграции в дизайн используется значок почты:

Операция копирования и вставки между файлом Google Material и нашим проектом

Примечание.

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

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

Импорт нескольких монтажных областей в проект

Снова откройте или верните файл Adobe XD, содержащий пользовательский интерфейс Google.
Чтобы выбрать все монтажные области, нажмите Cmd+A (Mac) или Ctrl+A (Windows).
Скопируйте выделенное, нажав Cmd+C (Mac) или Ctrl+C (Windows), и вставьте, нажав Cmd+V (Mac) или Ctrl+V (Win).

Использование компонентов для импорта нескольких монтажных областей

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

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

Связанные компоненты позволяют вам иметь только один исходный файл (руководство по стилю или систему дизайна, как в данном случае) со всеми элементами пользовательского интерфейса вашего проекта для использования их в других файлах проектов Adobe XD.

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

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

Использование команды «Создать локальный компонент»

Откройте панель «Ресурсы», нажав Cmd+Shift+Y (Mac) или Ctrl+Shift+Y (Windows).
Выберите компонент (или компоненты), которые вы хотите преобразовать, и с помощью Ctrl+щелчок (Mac) или щелчка правой кнопки мыши (Windows) выберите во всплывающем меню пункт Создать локальный компонент.