Zeplin.io - лучший помощник для дизайнера и верстальщика

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

Для начала работы с Zeplin достаточно зарегистрироваться на сайте и нажать кнопку "Get started for free" либо "Go to Projects".

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

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

Сервис не предоставляет инструментов для разработки графического дизайна проекта с нуля. Для импорта дизайнерских макетов в Zeplin необходимо загрузить специальный плагин для графического редактора (Sketch, Photoshop, Figma, Adobe XD), который использует дизайнер. После установки плагина и импорта дизайна в программу, Zeplin автоматически сгенерирует спецификацию дизайна, детали программного кода в XML и CSS, стили и другое.

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

Для связи разработчика и дизайнера существует система комментариев. Пользователь, у которого есть доступ к проекту, может оставить комментарий к макету в целом или к отдельному элементу для внесения правок или отметки статуса. В комментариях можно отмечать человека, к которому обращается пользователь. Все комментарии можно группировать по цветам и отмечать их одним из статусов: «Открытый», «Упомянутый» и «Решённый».

В Zeplin очень удобно устроено определение отступов, размеров и расстояний у разных элементов. По умолчанию размеры отображаются в пикселях. Но это можно изменить. Например, при зажатии клавиши "Alt" и наведении курсора, значения преображаются в проценты.

Базовые особенности Zeplin:

• Установка ролей и разрешений для сотрудников: администратор, редактор, разработчик, обозреватель.
• Просмотр макетов сайтов, мобильных приложений и других интерфейсов.
• Экспорт макетов в формате XML или CSS.
• Возможность группировки слоёв и элементов в макете.
• Изменение цвета элементов и слоев.

Так же весьма удобно реализована работа с текстовым контентом. Достаточно кликнуть на текст и Zeplin позволит его скопировать кликом по соответствующей клавише.

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

Таким образом Zeplin является отличным способом для дизайнеров гармонично сотрудничать с разработчиками экономя при этом время разработки и минимизируя недопонимания в макетах.

Ссылка на канал: https://t.me/sitodel