[Дизайн, Интерфейсы, Системы управления версиями] Версионирование в дизайне: как не потеряться в тысяче макетов

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
15-Июл-2020 18:31

Цитировать

— Коллеги, файл project_lastVersion точно финальный? Или project_lastVersion_1?
— …
Знакомая ситуация? Мне так точно, особенно когда работаешь в команде с другими дизайнерами. Обычно приходится создать несколько разных версий файлов, количество которых зависит от проекта, правок и других факторов, и головная боль заключается в том, чтобы разобраться во всех этих версиях.
В статье я расскажу о наиболее актуальных и используемых вариантах контроля версий,
а именно: Zeplin (+ Sketch), Figma, Abstract (+ Sketch), то есть опишу функции и особенности этих инструментов, относящиеся именно к версионированию.

Почему в дизайне важен и нужен контроль версий

Если дизайнер вручную не сохранил рабочий файл с версией проекта, можно считать, что этой версии и не было. Грамотная система контроля версий учитывает подобные моменты: важно сохранять все старые и новые версии, чтобы в любой момент вернуться к ним;
Разместив в одном месте файлы с версиями проекта, дизайнеру (или дизайнерам) будет легче найти необходимый файл вместо того, чтобы бесконечно просматривать на рабочем столе файлы с именами вроде таких как «project1», «project1.1», «project_1», «project1_lastVersion» и тд. Наверняка почти каждый дизайнер сталкивался с подобными названиями файлов (или сам их так называл), и тратил время на поиски нужного файла;
Версионирование нужно для совместной одновременной работы дизайнеров над одним и тем же файлом;
Из предыдущего пункта следует, что при совместной работе важно понимать, кто именно и когда внес изменения, и что они из себя представляют.

Это лишь несколько ситуаций, когда использование системы контроля версий может ускорить процесс разработки и избежать замираний сердца, когда кажется, что все пропало. Далее
я расскажу о плюсах и минусах инструментов контроля версий, с которыми приходилось сталкиваться в работе.
Zeplin + Sketch
Наиболее простым в использовании является Zeplin. Для работы с ним дизайнеру достаточно сохранить изменения в рабочем файле Sketch и экспортировать артборды из Sketch в Zeplin. Артборды отобразятся в Zeplin, их можно сгруппировать в секции, просмотреть стили элементов, скачать иконки, картинки и прочее, а также сформировать styleguide, который состоит из палитры цветов, текстовых стилей, расстояний между элементами,
компонентов/символов.
К плюсам использования Zeplin я бы отнесла следующие:

Как было сказано ранее, простота использования — нужно лишь экспортировать выбранный артборд;
Возможность комментирования артбордов;
Уведомления о комментариях, которые приходят и на почту, и отображаются
в самом Zeplin;
Возможность бесплатно создать 1 проект и добавить столько участников,
сколько нужно.

Как любой инструмент, Zeplin имеет свои недостатки:

При изменении в Sketch артборда, ранее экспортированного в Zeplin, нужно обращать внимание на его название. Одноименные артборды при экспорте автоматически заменяют друг друга, однако, если название экспортируемого артборда будет отличаться от ранее загруженного в Zeplin, в приложение этот артборд экспортируется как новый, а не заменит неактуальную версию. Невнимательность при экспорте артбордов может отнять время
на проверку соответствия названий артбордов;
Работать над одним и тем же файлом в Sketch и экспортировать артборды в Zeplin можно, только создав копию этого файла. В этом случае придется просматривать каждую копию (версию), изучать изменения, внесенные разными дизайнерами (каждым в свою копию), выбирать наиболее подходящие изменения, а затем копировать их в основной Sketch-файл, содержащий актуальные артборды;
Работая таким образом, возникает сложность в понимании внесенных изменений
и объединение их в один файл с актуальными артбордами для последующего экспорта в Zeplin;
Нельзя автоматически зафиксировать, кто именно работал с файлом, когда и какие изменения были внесены;
Проект в Zeplin можно создать только через приложение, установленное на ПК,
но не через Zeplin в браузере;
Экспортировать артборды из Sketch в Zeplin может только owner.

Figma
Figma активно внедряется в работу дизайнеров за счет привлекательной функциональности. Этот инструмент универсален — здесь и создание дизайна, и прототипирование, и контроль версий.
Что же она может в плане версионирования?

Figma поддерживает одновременную работу нескольких дизайнеров над одним проектом. Открыв нужный проект, пользователь может увидеть рядом с артбордом/отдельными элементами имена коллег, которые в то же самое время вносят правки, просматривают проект;
История версий (или же History Version), благодаря чему можно увидеть, кто и когда вносил изменения, вернуться к более ранней версии, а также отредактировать информацию
о выбранной версии;
Комментирование, описание компонентов;
Figma можно использовать как приложение на ПК и в браузере.

Минусов у Figma слишком мало, но ключевые это:

История версий (та самая информация о версионировании) в бесплатном аккаунте предоставляется только на 30 дней;
Нет режимов сравнения, как, например, в Abstract.

Abstract + Sketch
Abstract, как и Zeplin, работает вместе с Sketch, и предназначен именно для версионирования,
в отличие, например, от Figma.
Преимуществ у Abstract достаточно:

Совместная работа нескольких дизайнеров над одним файлом одновременно;
Облачное хранение файлов;
Использование как в виде программы, установленной на MacOS, так и в браузере
на любом ПК;
Синхронизированная работа с участниками команды, что позволяет отправлять
внесенные изменения на ревью. Изменения можно принять или отклонить;
Возможность оставлять комментарии и аннотации, получать уведомления о них;
Возможность сравнивать файлы между собой — Abstract предусматривает 2 режима сравнения;
Лента активности, позволяющая просматривать кто, что и когда изменил.

Из недостатков я бы выделила следующие:

Платное использование. Abstract предоставляет пробный бесплатный период (только 30 дней для использования с Sketch) и 14 дней демо-версию для Adobe XD. Но этого времени достаточно, чтобы познакомиться с инструментом, поработать совместно с командой и понять, удобен Abstract или нет;
На данный момент полноценная версия для работы предусмотрена только для Sketch + Abstract, то есть он подходит для MacOS. Как было упомянуто ранее, Abstract расширяется
до Adobe XD, но пока что есть только бета-версия.

Что выбрать для контроля версий
Это зависит от инструмента, в котором дизайнер работает над проектом. В своей работе
я использую и Sketch, и Figma. Однако, рассмотрев 3 разных варианта контроля версий,
а именно Sketch + Zeplin, Figma, Sketch + Abstract, наиболее функциональным я нахожу Abstract, поэтому рассмотрю версионирование в нем подробнее.
Волшебная ли таблетка Abstract
Abstract — это, своего рода, GitHub для дизайнеров. Принцип работы заключается в том,
что дизайнер загружает в Abstract ранее созданный Sketch-файл (этот файл является
мастер-файлом, то есть содержит наиболее актуальные артборды/элементы и информацию
о проекте). Над одним мастер-файлом одновременно могут работать несколько дизайнеров. Если быть точнее, каждый дизайнер работает в своей копии (ветке) мастер-файла. Закончив работу, ветку нужно закоммитить в Abstract. Коммит ветки является обязательным действием, потому что только так можно сохранить внесенные в ветку изменения и добавить их в Abstract. Коммит никак не повлияет на содержимое мастер-файла до тех пор, пока не произойдет слияние (иными словами, мерж). Мержить можно не только ветку с мастер-файлом, но и ветку с веткой.

В Abstract, как в Zeplin и Figma, доступен просмотр стилей элементов, а также возможность скачать используемые иконки и картинки.
Кроме этого, в разделе Properties показано, какой стиль у выбранного элемента на текущий момент в мастер-файле, и какой стиль у того же самого, но измененного элемента,
в просматриваемом коммите.

Мастер-файл может содержать несколько артбордов. При внесении правок, все изменения сохраняются в фоновом режиме. Достаточно просто закоммитить ветку, с которой работал дизайнер, и все изменения отобразятся в Abstract. Измененные артборды или отдельные измененные элементы отмечены значком Edited. Благодаря этому, дизайнеру не нужно создавать большое количество файлов с разными версиями проекта, поскольку все наглядно сохраняется и отображается в одном месте.

Как было упомянуто ранее, в Abstract предусмотрены режимы сравнения.
Первый режим сравнения — side by side — когда артборд из мастер-файла и измененный артборд из ветки расположены рядом друг с другом.

Cледующий режим сравнения — overlay — когда артборд из мастер-файла и измененный артборд из ветки накладываются друг на друга, и все изменения отображаются на белом фоне.

Кроме перечисленного, Abstract обладает и другими полезными функциями, например, можно синхронизировать Sketch-библиотеки, создавать коллекции — наборы нужных артбордов
для презентации коллегам.
Лента активности содержит внесенные изменения, комментарии, создание веток, коммиты, мержи и прочие обновления. Она показывает кто, когда и что именно изменил, добавил, прокомментировал, одобрил или не одобрил, смержил и тд.

Zeplin, Figma и Abstract ускоряют и упрощают работу над проектами не только для дизайнеров, но и для всех участников команды. Но наиболее успешными, на мой взгляд, являются Figma и Abstract (Abstract в большей степени за счет функциональности и информативности в плане контроля версий). Используя их, участникам команды не нужно тратить много времени на митинги, обсуждения в чате, чтобы выяснить, какие изменения в макеты были внесены и куда нужно смотреть, чтобы их увидеть. Использование контроля версий в любом его проявлении улучшает сотрудничество между участниками команды, понимание проекта и, в лучшем случае, ускоряет его разработку.
В данной статье я рассмотрела далеко не все существующие варианты контроля версий
в дизайне, но наиболее известные и чаще используемые. Если над проектом работает команда из нескольких дизайнеров, стоит рассмотреть версионирование в Abstract или Figma, а Zeplin больше подходит для одиночной работы, когда не требуется совместная и одновременная деятельность с другими коллегами над одним файлом. В любом случае, не будет лишним попробовать каждый из этих инструментов.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_dizajn (Дизайн), #_interfejsy (Интерфейсы), #_sistemy_upravlenija_versijami (Системы управления версиями), #_dizajn_interfejsov (дизайн интерфейсов), #_abstract, #_sketch, #_zeplin, #_figma, #_figma (фигма), #_kontrol_versij (контроль версий), #_versionirovanie (версионирование), #_dizajn (дизайн), #_blog_kompanii_auriga (
Блог компании Auriga
), #_dizajn (
Дизайн
), #_interfejsy (
Интерфейсы
), #_sistemy_upravlenija_versijami (
Системы управления версиями
)

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 23-Ноя 00:42
Часовой пояс: UTC + 5