Advertisement
  1. Web Design
  2. Style Guides

Небольшая хитрость: как использовать Zeplin для создания руководства по стилю

Read Time:2 minsLanguages:

Russian (Pусский) translation by Anton L (you can also view the original English article)

До этого мы разобрали как дизайнеры могут взаимодействовать с командой разработчиков благодаря Zeplin, однако есть ещё одна вещь, которую стоит упомянуть; Zeplin замечательный инструмент для создания руководств по стилю (style guides). Тем самым ваша команда будет иметь постоянное, обновляемое онлайн руководство доступное для всех, откуда угодно.

Это позволит вам сохранить и переименовать информацию о шрифтах и даже экспортировать данные в CSS. Руководство по стилю позволит инспектировать функционал и сохранит огромное количество усилий, когда дело доходит до проверки качества (QA quality assurance). Давайте быстро разберём, как это работает!

Добавляем стили

Для начала, выберете окно на панели управления проектом.

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

Далее, наведите на инструмент для инспектирования и найдите иконку Aa+, которая появится рядом со стилями для текста, которые можно добавить из книги шрифтов:

selected titles properties in zeplinselected titles properties in zeplinselected titles properties in zeplin
Выбранный заголовок и его свойств, используя инструмент для инспектирования

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

same deal with colourssame deal with colourssame deal with colours
Тоже самое с цветами

Ваше руководство по стилю

Чтобы увидеть руководство по стилю выберите следующую вкладку - руководства по стилю (Styleguide) на верху страницы:

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

Обратите внимание: используйте названия и соглашение об именовании, которые знакомы всем членам команды:

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

То что у вас должно получиться, будет выглядеть следующим образом:

Экспортируем

На данный момент, если вы являетесь разработчиком, вы возможно захотите скопировать CSS из правой колонки. Код будет доступен в любом синтаксисе, который вам больше подходит: Sass, LESS, Stylus или обычный CSS.

Каждое правило может быть выбрано отдельно для дальнейшего скачивания, в то время, как Command + A выберет всё содержимое для дальнейшего копирования и вставки.

Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.