Несколько дней назад я прочел статью об управлении руководствами по стилю с помощью Github. И хотя я думаю, что Github не плох для управления живыми руководствами по стилям, это не лучшее решение для обмена артефактами руководства по стилям в дизайн-командах.

Живые руководства по стилям:

Живые руководства по стилю пишутся в HTML и готовы для использования в продакшне.

Артефакты руководства по стилям:

Артефакты руководства по стилям используются командами дизайнеров для общего согласования элементов дизайна в руководстве по стилям, и обычно представлены в виде файлов Sketch.

В этой статье я опишу рабочий процесс, который я называю Дизайн, обмен и контроль.

Дизайн

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

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

Обмен

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

Dropbox

Так вы сможете обмениваться файлом с командой, но как организовать коллаборацию и контроль изменений? Этому я научу вас ниже.

Контроль

Настало время получить фидбек от команды. Для этого в Invision есть отличный набор инструментов, начиная с прототипирования и заканчивая проект-менеджментом.

Сначала создайте проект Desktop с тем же названием, что и папка в Dropbox.

Создание нового проекта в Invision
Создание нового проекта в Invision
Затем подключите Invision к аккаунту Dropbox. Кликните розовую кнопочку с плюсом в «Sync With Dropbox».

Sync With Dropbox

В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям.

В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям

Как только Invision завершит синхронизацию, вы увидите все артборды как Screens (в этом примере «Buttons»).

Экран кнопок в Invision
Экран кнопок в Invision
В этом примере кликните на экран «Buttons», чтобы войти в режим редактирования и используйте режим Comment для комментирования стилей кнопок.

режим Comment для комментирования стилей кнопок

Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch:

Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch

На этом этапе изменения должны автоматически подтянуться в Invision.

 автоматически подтянуться в Invision

Гораздо лучше

Перейдите в Invision и решите проблему с кнопками.

Invision

Я также мог бы отметить этот скрин как «approved». Так как я решил все проблемы с ним.

approved

И, наконец, давайте проверим историю всех изменений в дизайне:

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

Выводы

  1. Создавайте артефакты дизайна в Sketch
  2. Обменивайтесь с командой и контролируйте версии через Dropbox
  3. Контролируйте, просматривайте, комментируйте и прототипируйте в Invision