Как в adobe xd посмотреть css код
Перейти к содержимому

Как в adobe xd посмотреть css код

  • автор:

How to Get CSS in Adobe XD

Whether you’re using zeplin or prototyping via code, as a designer you’ve probably come across a need to hand-off CSS to your developers.

Today we’re going to learn how Adobe XD can be leveraged to make that transition a lot smoother. I’ll be using a mac for this tutorial, but the same steps apply on windows.

For best results, make sure your design is at a 1:1 scale.

Step 1: Create a development link

Well, the very first thing you’ll want to do is create your designs, but once that’s complete you can go ahead and create a developer link.

If you look in the top left hand corner of Adobe XD you’ll see three tabs: Design, Prototype & Share. Click on the Share tab.

After you open the share tab, a new window will open on the right hand side of your program. This window will allow you to export Adobe XD web links that you can use to host your prototypes and pass around for feedback.

Make sure that your view setting is set to Development and your Export is to set to Web. Then click the Create Link button and a link will be generated.

Step 2: Go to Link & Export CSS

We can now go onto our web browser of choice and view our art-boards. When you get to the art-board you want, look to your right. There’s a sidebar with an icon that will take you to inspect mode. In order to access our CSS we need to change how we view the link.

Once you select inspect mode you should see this window on the right hand side of the software.

Inspect mode allows you to view all the styles and assets from your design. What’s cool though, is that since we exported our Adobe XD link as a developer link, it’s also going to show us CSS.

You’ll notice though, that it’s not showing us CSS when we first opened the window. You didn’t do anything wrong.

What we need to do is click the part of our design you want to extract CSS from.

Voila, there we have it. CSS!

You can then pick and choose the elements on your design you need to extract CSS from and simply copy and paste them to wherever they need to go.

If you liked this tutorial make sure to follow me for more content.

Are there any other tutorials you’d like to see? Leave a comment and let me know!

11 сервисов, чтобы изучить PSD-макет для вёрстки сайта

Хороший сайт — это результат совместных усилий команды специалистов. Сначала дизайнер создаёт макет, представлен внешний вид будущей страницы. Затем разработчик переводит его в код, который будет понятен браузеру. Чтобы не вышло очередного «ожидание – реальность» и дизайнер с программистом не возненавидели друг друга, макет должен быть понятным, а информация о его элементах — легко извлекаться.

Сейчас существуют разные программы, в том числе онлайн-платформы для совместной разработки, которые помогают членам команды лучше понимать друг друга. Но многие дизайнеры-староверы продолжают работать исключительно в Photoshop (и их можно понять). Мы выяснили, что разработчики рекомендуют друг другу для работы с макетами в формате PSD, и собрали десять классных платных и неплохих бесплатных вариантов. Это не рейтинг, так что позиция значения не имеет.

0. Photoshop

Стоимость: самый дешёвый вариант подписки обойдётся чуть дороже 700 рублей в месяц, самый дорогой — почти в 2 800.

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

1. Avocode

Стоимость: 12 долларов в месяц, если подписаться в одиночку, по 29 долларов на человека для команды. Годовая подписка даёт скидку в 25%. Есть двухнедельный пробный период.

Сервис поддерживает форматы Photoshop, Sketch, Adobe XD и Illustrator без плагинов, частично интегрируется с Figma. Он превратит макет в спецификацию с отдельными изображениями и CSS-стилями, позволит быстро получить информацию об иконках, изображениях и других элементах дизайна. Интерфейс очень похож на Photoshop, что может быть удобно. Avocode используется для мобильных и веб-приложений.

2. Zeplin

Стоимость: цена привязана к количеству проектов. Попробовать программу можно бесплатно, самый дешёвый тариф обойдётся в $19/месяц или $17 при подписке на год.

У сервиса есть десктопная и браузерная версии. Zeplin похож на Avocode, не случайно последний на своём сайте даже объясняет, в чём их преимущества по сравнению с Zeplin. Так что стоит воспользоваться пробным периодом, чтобы сравнить их самостоятельно и выбрать, что больше подходит именно вам. Главное различие: в Zeplin открыть PSD-макет сразу не получится, нужно провести некоторые манипуляции. Инструкция для этого есть на их сайте.

3. Marsy

Стоимость: бесплатно; создателю можно задонатить в благодарность.

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

4. Sympli

Стоимость: бесплатно для начинающих без команды и не больше 10 долларов в месяц на самом дорогом тарифе.

Это платформа для совместной работы, которая позволяет работать с макетами Photoshop. Впрочем, на бесплатном одиночном тарифе вопрос командного взаимодействия снимается сам собой. При этом у Sympli есть плагины к Android Studio и Xcode, что ускоряет перевод макета в код.

5. PSDETCH

Стоимость: бесплатно.

Неплохой и доступный инструмент для экспорта изображений и текста из PSD-макетов, для определения расстояний между элементами и других подобных манипуляций. Работает онлайн.

6. InVision

Стоимость: бесплатно для одиночек и маленьких команд, $9,95 в месяц для больших.

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

7. Рhotopea

Стоимость: бесплатно.

Онлайн-альтернатива Photoshop. В отличие от последнего, Рhotopea можно запускать на более слабом оборудовании. Сетевое подключение нужно для загрузки среды, редактирование происходит с использованием ресурсов компьютера. Позволяет сразу видеть CSS-код объекта и в целом может быть неплохим подспорьем в работе.

8. Adobe XD

Стоимость: бесплатно для ограниченного стартового плана, от 644 рублей в месяц за полноценную версию.

По названию производителя очевидно, что PSD-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.

9. Paint.NET

Стоимость: бесплатно.

Иногда этот сервис приводят как альтернативу штатному Paint от Microsoft. Это не совсем одно и то же. Хотя бы потому что при схожести стартового набора функций возможности Paint.NET можно расширять с помощью плагинов практически безгранично — в рамках разумного, разумеется. Это вариант из серии «почему бы и нет», а не «конечно, да!», но не упомянуть его нельзя.

10. GIMP

Стоимость: бесплатно.

Программа, которая поддерживает множество форматов, в том числе .PSD. Причём пользоваться ею можно абсолютно безвозмездно. Рассмотрите как вариант, если хотите сэкономить.

Если вы работаете с PSD-макетами, поделитесь в комментариях, какие программы используете, чтобы выудить максимум информации. Хотите научиться создавать сайты? Приходите учиться на факультет веб-дизайна или веб-разработки в GeekUniversity!

Просмотр и проверка спецификаций дизайна

Узнайте, как просматривать и проверять такие атрибуты как цвет, текст, измерения, состояния компонентов, участки взаимодействия и другое в спецификациях дизайна.

По ссылке на общие технические характеристики проекта можно просмотреть и опробовать прототип, добавить комментарии и отзывы в непосредственном контексте, а также выбрать получение информации об измерениях и технических характеристиках проекта.

Вкладки по ссылке на технические характеристики проекта

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

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

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

Ознакомьтесь с рекомендациями по просмотру и сопоставлению атрибутов в спецификациях дизайна.

Сведения с экрана

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

12 лучших плагинов для Adobe XD

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

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

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

1. Anima

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

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

2. Hero

Hero — полезный плагин для UI и UX-дизайнеров, который позволяет им создавать разнообразный контент и эффекты и экспортировать их прямо из Adobe XD.

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

Дизайн будет преобразован в HTML, CSS, JS и SVG-код, который можно экспортировать. Все компоненты отлично функционируют в любом современном браузере, вам даже не придется обращаться за помощью к разработчику.

3. Wireframer

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

Плагин включает набор элементов для разработки мобильных и веб-страниц, который вы можете при желании скачать отдельно. Это огромная коллекция из 170 мобильных шаблонов и 90 веб-шаблонов с более чем 200 компонентами.

4. Iconscout

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

Iconscount — это платформа, на которой можно приобрести различные иконки, иллюстрации и другие дизайн-ресурсы. Официальный плагин позволяет взаимодействовать с ней прямо внутри Adobe XD.

Iconscount предлагает бесплатный план с доступом к тысячам бесплатных ресурсов. Но, если вы хотите выбирать из миллионов иконок и иллюстраций, придется оформить премиум-подписку. Этот полезный плагин точно пригодится вам в работе над тем или иным проектом. Другая хорошая альтернатива — плагин Icons4Design.

5. Free Stock Search

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

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

6. UI Faces

UI Faces — полезный плагин, доступный на нескольких платформах, включая Figma и Sketch. Используйте его, чтобы вставлять в дизайн фотографии людей вместо пустых плейсхолдеров, например, в профиле пользователя.

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

7. Toolabs DSM

Понятие дизайн-системы знакомо каждому UX-дизайнеру. С помощью этого плагина вы сможете с легкостью создавать дизайн-системы и управлять ими.

Toolabs DSM позволяет одним щелчком извлекать данные о стилях из вашего проекта и добавлять их в дизайн-систему. Это действительно так просто.

8. Angle 3

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

У Angle 3 есть бесплатный план, в рамках которого вы получаете доступ к ограниченному числу мокапов. За полный доступ к библиотеке, включающей более чем 4000 вариантов, придется заплатить.

9. Mockplus

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

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

10. unDraw

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

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

11. VizzyCharts

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

12. Google Sheets

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

С помощью Google Sheets для Adobe XD вы сможете создавать динамические дизайны и использовать в них реальные данные из Таблиц. В случае внесения изменений сведения будут автоматически меняться в макете.

Как установить плагин Adobe XD

Если вы только начинаете использовать Adobe XD и не знаете, как установить понравившийся плагин, вот краткая инструкция.

Шаг 1. Откройте менеджер плагинов

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

Затем кликните на иконку плюса (+), чтобы открыть менеджер плагинов.

Шаг 2. Найдите нужный плагин

Теперь вы можете изучить доступные плагины. Нажмите на иконку поиска, если вы хотите найти и установить конкретный плагин.

Когда вы нашли то, что нужно, кликните на кнопку “Установить”, и плагин будет добавлен в соответствующую вкладку на панели инструментов. Видите, как все просто!

Шаг 3 (альтернативный). Перейдите по ссылке для скачивания

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

Перед скачиванием убедитесь, что приложение Adobe XD открыто на вашем компьютере.

Заключение

Плагины позволяют быстрее и эффективнее выполнять задачи. Однако в большом количестве они могут замедлить работу программного обеспечения.

Ранее мы уже делились списками полезных ресурсов для Adobe XD. Вы можете начать с коллекции UI-китов (готовые наборы элементов интерфейса) и подборки шаблонов вайрфреймов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *