Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”

#lifehacks

Несколько дней назад я прочел статью об управлении руководствами по стилю с помощью Github. И хотя я думаю, что Github не плох для управления живыми руководствами по стилям, это не лучшее решение для обмена артефактами руководства по стилям в дизайн-командах. Живые руководства по стилям: Живые руководства по стилю пишутся в HTML и готовы для использования в продакшне. Артефакты руководства по стилям: Артефакты руководства по стилям используются командами дизайнеров для общего согласования элементов дизайна в руководстве по стилям, и обычно представлены в виде файлов Sketch. В этой статье я опишу рабочий процесс, который я называю Дизайн, обмен и контроль.

Дизайн

В этом шаге дизайнер создает свои файлы с артефактами для обмена внутри своей команды. В этом примере я создал файл Sketch под названием Design.sketch и включил в него артборд под названием Buttons, который содержит несколько стилей кнопок. Наш базовый файл руководства по стилям Важно обмениваться файлом с другими членами команды, получать их фидбек о работе и вносить нужные изменения.

Обмен

Используя Dropbox (или Google Drive), мы можем обмениваться и контролировать версии файлов дизайна. В этом примере я создал папку Styleguide через приложение Github и сохранил там свой файл Sketch. Вы можете скачать приложение Dropbox и сохранять копии файлов на компьютере. Так вы сможете обмениваться файлом с командой, но как организовать коллаборацию и контроль изменений? Этому я научу вас ниже.

Контроль

Настало время получить фидбек от команды. Для этого в Invision есть отличный набор инструментов, начиная с прототипирования и заканчивая проект-менеджментом. Сначала создайте проект Desktop с тем же названием, что и папка в Dropbox. Создание нового проекта в Invision Затем подключите Invision к аккаунту Dropbox. Кликните розовую кнопочку с плюсом в “Sync With Dropbox”. В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям. Как только Invision завершит синхронизацию, вы увидите все артборды как Screens (в этом примере “Buttons”). Экран кнопок в Invision В этом примере кликните на экран “Buttons”, чтобы войти в режим редактирования и используйте режим Comment для комментирования стилей кнопок. Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch: На этом этапе изменения должны автоматически подтянуться в Invision. Гораздо лучше Перейдите в Invision и решите проблему с кнопками. Я также мог бы отметить этот скрин как “approved”. Так как я решил все проблемы с ним. И, наконец, давайте проверим историю всех изменений в дизайне: Ухты, я даже могу следить за всем, что творится! Как видите, этот подход покрывает большую часть задач, с которыми сталкиваются дизайнеры при управлении своими проектами. Надеюсь, вам пригодится подобное решение.