— Коллеги, файл project_lastVersion точно финальный? Или project_lastVersion_1?
— …
Знакомая ситуация? Мне так точно, особенно когда работаешь в команде с другими дизайнерами. Обычно приходится создать несколько разных версий файлов, количество которых зависит от проекта, правок и других факторов, и головная боль заключается в том, чтобы разобраться во всех этих версиях.
В статье я расскажу о наиболее актуальных и используемых вариантах контроля версий, а именно: Zeplin (+ Sketch), Figma, Abstract (+ Sketch), то есть опишу функции и особенности этих инструментов, относящиеся именно к версионированию.
Это лишь несколько ситуаций, когда использование системы контроля версий может ускорить процесс разработки и избежать замираний сердца, когда кажется, что все пропало. Далее я расскажу о плюсах и минусах инструментов контроля версий, с которыми приходилось сталкиваться в работе.
Наиболее простым в использовании является Zeplin. Для работы с ним дизайнеру достаточно сохранить изменения в рабочем файле Sketch и экспортировать артборды из Sketch в Zeplin. Артборды отобразятся в Zeplin, их можно сгруппировать в секции, просмотреть стили элементов, скачать иконки, картинки и прочее, а также сформировать styleguide, который состоит из палитры цветов, текстовых стилей, расстояний между элементами, компонентов/символов.
К плюсам использования Zeplin я бы отнесла следующие:
Как любой инструмент, Zeplin имеет свои недостатки:
Figma активно внедряется в работу дизайнеров за счет привлекательной функциональности. Этот инструмент универсален — здесь и создание дизайна, и прототипирование, и контроль версий.
Что же она может в плане версионирования?
Минусов у Figma слишком мало, но ключевые это:
Abstract, как и Zeplin, работает вместе с Sketch, и предназначен именно для версионирования,
в отличие, например, от Figma.
Преимуществ у Abstract достаточно:
Из недостатков я бы выделила следующие:
Это зависит от инструмента, в котором дизайнер работает над проектом. В своей работе я использую и Sketch, и Figma. Однако, рассмотрев 3 разных варианта контроля версий, а именно Sketch + Zeplin, Figma, Sketch + 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 больше подходит для одиночной работы, когда не требуется совместная и одновременная деятельность с другими коллегами над одним файлом. В любом случае, не будет лишним попробовать каждый из этих инструментов.
— …
Знакомая ситуация? Мне так точно, особенно когда работаешь в команде с другими дизайнерами. Обычно приходится создать несколько разных версий файлов, количество которых зависит от проекта, правок и других факторов, и головная боль заключается в том, чтобы разобраться во всех этих версиях.
В статье я расскажу о наиболее актуальных и используемых вариантах контроля версий, а именно: 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 больше подходит для одиночной работы, когда не требуется совместная и одновременная деятельность с другими коллегами над одним файлом. В любом случае, не будет лишним попробовать каждый из этих инструментов.