Вы получили от дизайнера макет дизайна сайта, который нужно сверстать. Обычно дизайнеры присылают макеты в формате PSD, что не всегда удобно. Кроме того, что в этом случае у вас должен быть установлен Photoshop, будет также затруднительно посмотреть все отступы. Особенно если нет стайлгайда.
Что такое стайлгайд и из чего он состоит можно прочитать в этой статье.
А если в дизайн постоянно вносятся изменения, то вообще беда. Появляется необходимость в постоянном скачивании новых вариантов, удалять старый и вообще следить за всеми изменениями.
Для упрощения работы и взаимодействия дизайнера и верстальщика, были созданы специальные программы. Они позволяют дизайнеру (или верстальщику) публиковать макеты в своей среде. При появлении каких-либо изменений, эти программы уведомляют «что» и «где» изменилось. Кроме этого, чтобы просмотреть стили, достаточно нажать на кнопку или текст и вам сразу отобразятся свойства элемента. А при наведении на кнопку или текст — отступы.
Также они позволяют:
- Выбрать язык отображения стилей — CSS/SASS/LESS и прочие.
- Скопировать текст и набор свойств.
- Оставить комментарий, если это необходимо.
- Скачать иконки и другие графические элементы.
Содержание:
Следует заметить, что все программы позволяют бесплатно делиться ограниченным числом проектов с одного аккаунта. Если же вас приглашают в проект, то таких проектов может быть сколько угодно.
1. Zeplin
Сервис просмотра макетов дизайна. Автоматически генерирует руководство по стилям, исходники кода и спецификацию для разработчика.
Программа доступна для Windows, MacOS и через браузер.
Позволяет экспортировать файлы из Sketch, Adobe XD, Figma и Photoshop CC. Для этого нужно установить десктопное приложение и дополнительные плагины.
Вы можете бесплатно протестировать программу на одном проекте. Далее уже необходимо приобрести подписку от 17 долларов в месяц.
2. InVision
Сервис для быстрого преобразования веб-дизайна в кликабельные прототипы и макеты для совместной работы. Работает с макетами из Sketch и Photoshop CC.
Программа имеет высоконагруженный интерфейс. Показывает все слои проекта и это нельзя отключить в настройках. Также нельзя растянуть панель стилей.
Бесплатно можно поделиться одним проектом, далее нужна подписка, которая начинается с 15 долларов.
3. Figma
В данном инструменте можно не только создавать дизайн, но и напрямую смотреть стили из макета. Есть десктопное приложение. Позволяет экспортировать макеты из Sketch.
Figma имеет индивидуальную настройку прав. При приглашении разработчика в проект, вы можете назначить ему статус «read-only». В этом случае, разработчик может только просматривать макеты, шрифт, цвета, размеры, отступы. В случае полного доступа, разработчик может и «подправить» проект.
Плюс в том, что у верстальщика под рукой всегда актуальная версия дизайна.
Бесплатно можно поделиться 3 проектами с 2 пользователями. Далее 12 долларов в месяц за каждого пользователя.
4. AdobeXD
Еще один сервис по разработке интерфейсов и прототипов от компании Adobe.
В данной программе также можно просматривать отступы, сетку, экспортировать иконки и графику, и прочее. С помощью дополнительных плагинов можно копировать CSS стили элементов.
Поддерживает формат макетов из Photoshop CC.
По материалам статьи: «Программы для просмотра макетов»
