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

Что такое стайлгайд и из чего он состоит можно прочитать в этой статье.

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

Для упрощения работы и взаимодействия дизайнера и верстальщика, были созданы специальные программы. Они позволяют дизайнеру (или верстальщику) публиковать макеты в своей среде. При появлении каких-либо изменений, эти программы уведомляют «что» и «где» изменилось. Кроме этого, чтобы просмотреть стили, достаточно нажать на кнопку или текст и вам сразу отобразятся свойства элемента. А при наведении на кнопку или текст — отступы.

Также они позволяют:

  • Выбрать язык отображения стилей — CSS/SASS/LESS и прочие.
  • Скопировать текст и набор свойств.
  • Оставить комментарий, если это необходимо.
  • Скачать иконки и другие графические элементы.

Содержание:

  1. Zeplin
  2. InVision
  3. Figma
  4. Adobe XD

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

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.

По материалам статьи: «Программы для просмотра макетов»

Тэги: