sketch cloud что это
Последние шесть месяцев были одними из самых загруженных и захватывающих в истории Sketch. Мы впервые получили финансирование, анонсировали наше самое большое обновление, и путешествовали по всему миру, чтобы показать то, что будет введено в платформу в будущем. И после напряженного лета наконец-то пришло время поделиться тем, над чем мы работали, со всеми вами: от больших улучшений приложения для Mac до бета-версии Sketch for Teams.
Обновление Smart Distribute
В Sketch 55 мы представили Smart Distribute, чтобы упростить управление и создание сложных макетов. Мы пообещали, что сделаем Smart Distribute мощнее. И сегодня это произойдёт.
Изначально Smart Distribute работал только в одном направлении — контролировал расстояние между слоями в ряду или столбце. Но с этим обновлением он стал поддерживать сетки так, что теперь вы можете настроить горизонтальный интервал между каждым слоем в ряду, а также вертикальный интервал между самими строками.
Более того, теперь вы можете выставлять отрицательный интервал (чтобы слои могли перекрываться), и регулировать интервал между слоями внутри группы просто щелкнув мышкой по ней и, схватив ручку, перетащить.
Редактирование на холсте
Нас много об этом просили, поэтому мы очень рады сообщить, что теперь вы можете редактировать текст непосредственно на холсте. Просто дважды щелкните по любому тексту в любом экземпляре Symbol и начните писать. Таким образом вы можете печатать вне инспектора, ускоряя рабочий процесс.
Облачные документы!
Sketch Cloud отлично подходит для обмена проектами, обратной связи и распространения библиотек, но мы знаем, что загрузка и открытие документов могут иногда замедлять работу. Итак, мы запускаем Cloud Documents — новый способ создания, хранения и открытия документов из Sketch Cloud прямо в приложении Mac.
Старт происходит с новой вкладки Cloud в окне приветствия, где вы можете просматривать и открывать любые свои документы, сохраненные в Sketch Cloud. Ускорение вашего браузера и бесконечный скроллинг загрузок для поиска нужного файла — дело прошлого.
Вы можете выбрать, хотите ли вы создать облачные или локальные документы по умолчанию (и изменить этот параметр в любое время) в настройках. Облачные документы регулярно и автоматически сохраняются локально, поэтому вам не придется беспокоиться о том, что они могут потеряться. Если вы хотите сохранить последнюю версию в Sketch Cloud, просто нажмите «Сохранить».
Это только начало сближения Sketch Cloud с Mac. Если вы являетесь обычным пользователем Sketch Cloud, мы считаем, эти обновления значительно улучшат ваш рабочий процесс.
Улучшения и исправления в Sketch 56
Наряду с нашими изменениями в заголовках, последнее приложение для Mac поставляется с множеством небольших улучшений и исправлений:
• Добавлены новые внешние виды — если быть точнее, 102. Так что, если вы хотите, чтобы ваши дизайны выглядели свежо, а макеты были разнообразными, мы вам в этом поможем.
• Мы сделали вкладку «Общие» в настройках. Ничего не пропало, но в других вкладках теперь есть несколько других вещей.
• Обновление также включает в себя обычное исправление ошибок донастройку. Если вдруг у вас возникали проблемы с дублированием мастеров Symbol или с выделением нечетных хайлайтов в списке слоев, это обновление для вас.
Sketch fo Teams Бета
Мы еще не закончили. Сегодняшний день знаменует собой официальный запуск нашей бета-версии Sketch for Teams, и нам не терпится поделиться ею с вами. Как мы уже упоминали ранее, бета-версия — это ранний взгляд на то, что ожидает вас и вашу команду, так что мы будем регулярно выпускать обновления с этого момента и до полного запуска в конце этого года.
Вы можете зарегистрироваться сегодня и получить полнофункциональную 90-дневную бесплатную пробную версию для всей вашей команды. Мы надеемся, что эта возможность даст даже самым крупным командам достаточно времени, чтобы опробовать его и посмотреть, как Sketch for Teams упрощает работу в Sketch, делает её более быстрой и беспроблемной.
В бета-версии вы сможете:
• Приглашать всю свою команду в одно общее рабочее пространство в Sketch Cloud.
• Добавлять неограниченное количество зрителей для предварительного просмотра и комментирования дизайнов.
• Добавлять авторов, которые могут редактировать и обмениваться документами через приложение Mac.
• Получать полную историю каждого командного документа и откатываться до предыдущей версии в любое время.
• Легко управлять своей командой из новой панели администратора.
Мы обещали некоторые важные вещи, когда объявили о финансировании в начале этого года, и то, что вы видите сегодня, — это только начало. С помощью Cloud Documents и бета-версии Sketch for Teams мы закладываем основы для еще более интересных проектов, над которыми уже кипит работа. Скоро мы поделимся ими с вами.
Полное руководство по началу работы в Sketch с бесплатной шпаргалкой
Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, — это статья для вас.
Во-первых, мы немного познакомимся со Sketch — что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых, изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих, мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).
И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?
1. Почему Sketch
Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.
Сейчас Sketch гордо продается как визуальным, мобильным, иконочным, веб и продуктовым дизайнерам, и я думаю, это всего лишь вопрос времени, пока его разработчики, Bohemian Coding, с уверенностью не начнут ориентировать свой продукт и на иллюстраторов и художников.
Что такое Sketch?
Sketch — одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории — Adobe Illustrator, CorelDRAW и OpenOffice Draw.
Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:
Но в векторном редакторе вроде Sketch сохраняется только математическая основа самой фигуры. На практике это означает, что вы можете масштабировать вектор, сколько угодно и никогда не увидите никакой потери в качестве изображения. Дизайнеры и иллюстраторы обычно отдают предпочтение исключительно векторам, потому что их всегда можно конвертировать в пиксели. Куда сложнее пойти обратным путем.
В Sketch, только если вы не вставите пиксельную графику, например, фото, все слои векторные. Каждый объект состоит из опорных точек и кривых, которые можно просмотреть и отредактировать, кликнув дважды на фигуре. Но мы к этому еще вернемся!
Все хорошее — компактно
Более того, постоянная программа Bohemian Coding по улучшению ПО означает, что, когда появляются баги, их довольно быстро фиксят.
Официальный соперник Sketch, Adobe Illustrator, существует на рынке с 1987 года (!) и остается стандартом в индустрии традиционных дизайн-студий. Но для дизайнеров новой генерации Sketch дает огромную возможность изучить основы и достичь отличных результатов.
Учиться дизайну в Sketch быстро, окупаемо, и весело!
2. Начало работы в Sketch
Сначала скачайте Sketch
Если вы совсем новичок, посетите страничку Getting Started на официальном сайте Sketch. Sketch будет работать на любом Mac-е с OS X El Capitan (10.11) или выше, и вы можете скачать бесплатную 30-дневную триал-версию.
Постарайтесь не заблудиться в интерфейсе
Когда работаете в Sketch, большую часть времени вам придется смотреть на вот такой экран. Это скриншот с надписями на основных разделах интерфейса и пояснением, что они делают.
Далее, ознакомьтесь с некоторыми важными командами
a. Создание артбордов
Когда вы открываете Sketch первый раз, у вас будет пустой канвас. Первым делом, вам наверняка захочется создать артборд, что позволит держать дизайны в порядке. Вы можете создавать столько артбордов, сколько хотите, на одной странице.
Чтобы создать новый артборд, нажмите “Insert” на панели инструментов, затем выделите “Artboard”, кликните на прямоугольник и перетяните мышкой на холст. Или же можете просто нажать “A” на клавиатуре, а затем кликнуть и потянуть.
b. Рисование фигур
С помощью кнопки “Insert” в панели инструментов вы можете получить доступ к большему набору разных фигур типа звезды, многоугольника, треугольника и т.д. Вот тут я рисую звезду:
с. Выравнивание и распределение объектов
Когда я только начал работать в Sketch, я влюбился в их кнопки выравнивания и распределения, которые живут вверху панели Инспектора. Вот что они делают:
Распределить по горизонтали
Уравнивает горизонтальные отступы между выделением из 3 или более объектов.
Распределить по вертикали
Уравнивает вертикальные отступы между выделением из 3 или более объектов.
Выравнивание по левому краю
Выравнивает левые края 2 или более выделенных объектов.
Выравнивание по горизонтали
Выравнивает горизонтальные центры выделения из 2 или более объектов.
Выравнивание по правому краю
Выравнивает правые края 2 или более выделенных объектов.
Выравнивание по верху
Выравнивает верхние края 2 или более выделенных объектов.
Выравнивание по вертикали
Выравнивает вертикальные центры выделения 2 или более объектов.
Выравнивание по низу
Выравнивает нижние края 2 или более выделенных объектов
Эти команды выполняют две критически важные функции. Во-первых, они помогают вам работать эффективно, так как вы можете быстро создать кучу объектов и затем выровнять и распределить их равномерно всего за пару кликов. Теперь никаких отчаянных перетаскиваний объектов точно в нужных пиксель! И, во-вторых, они помогают очистить композицию в конце дизайн-процесса, так как вы точно знаете, что все элементы точно позиционированы и распределены, все на своих местах.
Вот пример, как я использую выравнивание по левому краю (кнопка “Align left”):
d. Дублирование слоев и артбордов
В Sketch очень легко дублировать слои и артборды. Кликните правой кнопкой мышкой на любом объекте, выберите опцию “Duplicate”, чтобы создать копию поверх оригинала. Как вариант, просто выделите объект и нажмите команду + D, или просто удерживайте alt, а затем перетяните объект, который хотите скопировать. Вот я дублирую свою звезду:
Дублирование артбордов также важно в налаживании продуктивного дизайн-процесса. Дублируя артборд после каждого важного изменения, вы всегда можете легко вернуться на более раннюю версию без необходимости пользоваться опцией “Undo” сотни раз:
e. Еще несколько подсказок по главным опциям в Sketch
Эта серия советов по Sketch поможет освоить программу и улучшить свою продуктивность:
И, наконец проработайте эти уроки по Sketch. Они на русском языке
Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.
3. Более продвинутые приемы работы в Sketch
Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!
Освоение кривых Безье
Питер Новел написал шикарную статью о работе с кривыми Безье. Он описывает важные принципы работы с этим видом объектов, поясняет разницу между разными элементами управления, дает практические советы по работе с этим векторным инструментом в Sketch. Ознакомьтесь!
Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.
Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:
Продвинутые опции ресайза
Когда работаете с сгруппированными объектами, может понадобиться, чтобы объекты в группе вели себя по-разному при ресайзе. Для каждого объекта внутри группы Sketch позволяет выбрать свой метод ресайза.
Детальнее о режимах блендинга
Использование Sketch для печатного дизайна!
Для тех, кто быстрее и более продуктивно работает в Sketch, имеет смысл подготавливать и печатные документы в этой программе вместо какого-то специализированного пакета вроде Adobe InDesign. В этой потрясающей статье Питер Новелл поясняет, как использовать Illustrator для подготовки PDF, который был создан в Sketch для печати.
Испытайте свои навыки в этих мини-проектах
Скачайте шпаргалку из 99 горячих клавиш для Sketch!
Если эта статья показалась вам полезной, почему бы не скачать эту шпаргалку? Сохраните эту PDF-ку на компьютере для быстрых справок, или ее можно распечатать и прикрепить на стене у монитора.
Как вам Sketch? Как ваши успехи в работе с этой программой? Делитесь в комментариях!
Прототипирование, Libraries в Sketch Cloud и официальный UI Kit iOS в Sketch 49
А вот и Sketch 49, выходящий по горячим следам предыдущего обновления, добавившего Libraries. На этот раз Sketch обзавелся еще одной важной и долгожданной функцией. Мы понимаем тонкости дизайна, поэтому знаем, что вы не всегда можете сказать, работает ли что-то на основе одних лишь статических экранов. Иногда вам нужно увидеть весь процесс в действии, и лучший способ сделать это – превратить дизайн в интерактивные прототипы. Теперь у вас не возникнет с этим проблем – приветствуйте прототипирование в Sketch.
Это еще не все. Наряду с прототипированием мы добавили новый способ обмена библиотеками посредством Sketch Cloud, а официальный iOS 11 Apple Design Resource теперь встроен прямо в Sketch, как общая библиотека. Вот обзор основных функций Sketch 49:
Прототипирование в Sketch
В Sketch 49 мы добавляем прототипирование, позволяя преобразовывать ваши проекты в интерактивные прототипы и просматривать их, не покидая приложения.
Этот новый набор инструментов позволяет вам подключать артборды, применять переходы, а затем просматривать ваши проекты прямо в Sketch, на мобильных устройствах с помощью Mirror или в Sketch Cloud, где вы можете поделиться своими прототипами с коллегами, клиентами и остальным миром.
Чтобы превратить ваши статичные дизайны в интерактивные прототипы, просто выберите слой и добавьте ссылку на артборд. После того, как вы соедините два артборда, вы можете добавить простую анимацию для плавного перехода из одного состояния в другое. Вы сможете быстро и без труда создать легкий, рабочий прототип своего приложения или веб-сайта. Отлично, если вы работаете над проектом и вам нужно быстро продемонстрировать его или вы хотите проверить юзабилити конкретного сценария.
Чтобы просмотреть свой прототип в действии, просто нажмите кнопку «Предварительный просмотр» (Preview) на панели инструментов, и ваш прототип будет запущен в отдельном окне, что позволит вам взаимодействовать с вашим приложением или веб-дизайном, как если бы они были реальными.
Если вы хотите поделиться рабочим прототипом с разработчиком, коллегой или клиентом, просто загрузите его в Sketch Cloud, отправьте им ссылку, и они смогут взаимодействовать с вашими проектами и комментировать их прямо в браузере. Вы даже можете создать стартовые точки (Start Points), которые позволяют запускать превью с определенного артборда, чтобы они точно знали, с чего начать.
Если вы работаете над проектами для iPhone или iPad, мы добавили поддержку прототипирования в Sketch Mirror для iOS, поэтому вы можете просмотреть свои прототипы на экранах, для которых они разрабатывались. Не забудьте скачать последнее обновление для Sketch Mirror, чтобы попробовать свои прототипы.
С прототипированием в Sketch, теперь проще, чем когда-либо, реализовывать ваши идеи и делиться своими концепциями с нужными людьми.
Вы можете узнать больше о том, как использовать прототипирование в нашей документации [En].
Общие библиотеки в Sketch
В Sketch 47 мы представили Libraries, что улучшило совместную работу в команде. В Sketch 49 мы предоставляем вам новый способ обмена и доступа к библиотекам.
Теперь с помощью общих библиотек вы можете скачивать и подписываться на библиотеки, которые были загружены в Sketch Cloud и, поскольку все это основано на открытых веб-технологиях, эти библиотеки могут быть сохранены и доступны из любого места в Интернете. Мы рады сообщить, что мы воспользовались этой функцией и объединились с Apple, чтобы добавить их официальный iOS 11 UI kit прямо в Sketch, в качестве общей библиотеки.
Общие библиотеки в Sketch Cloud
С помощью Sketch Cloud вы уже можете загрузить документ и поделиться своими проектами с коллегами или клиентами внутри приложения. С последним обновлением вы сможете подписаться на документы, загруженные в Sketch Cloud, и они будут добавлены непосредственно в Sketch, в виде общих библиотек.
Когда вы подписываетесь на общую библиотеку, ваш файл библиотеки остается связанным с исходным документом Sketch Cloud, поэтому, если создатель загрузит новую версию, вы получите уведомление, и сможете обновить свою локальную библиотеку. Это действительно полезно, если вы работаете с командой и нуждаетесь в единственном источнике для своей системы дизайна или руководства по стилю. Работаете над бесплатным набором пользовательского интерфейса или другим крутым проектом, о котором вы хотите рассказать? Теперь Sketch Cloud является самым простым местом для обмена библиотекой с сообществом.
Если вы хотите, чтобы ваши документы были добавлены в виде общих библиотек, просто при загрузке файла в Sketch Cloud выберите параметр «Разрешить другим пользователям загружать этот документ» (Allow others to download this Document).
Если вы хотите добавить документ из Sketch Cloud в качестве общей библиотеки, просто нажмите Download › Add Library to Sketch, и документ будет добавлен на вкладку «Библиотеки» в разделе «Настройки», и вы будете уведомлены, если исходный документ будет обновлен.
Встроенная библиотека интерфейса iOS
Шаблоны дизайна Apple всегда были золотым стандартом, когда речь заходила о ресурсах дизайна iOS и очевидным ориентиром при проектировании для iPhone или iPad.
Мы очень рады сообщить, что мы добавили в Sketch UI kit iOS 11 от Apple, и теперь можем предложить этот бесценный ресурс, как встроенную библиотеку.
В библиотеке интерфейса iOS от Apple (Apple iOS UI library) есть все компоненты, необходимые для начала работы над следующим проектом. Эта обширная библиотека включает в себя все: от панелей вкладок и строк состояния до кнопок и переключателей, готовых к интеграции в ваши последние проекты.
Вы можете загрузить Apple iOS UI Library с вкладки «Библиотеки» в разделе «Настройки», а когда Apple обновит свой документ, вы получите уведомление и сможете обновить свои проекты до последней версии.
Более 60 других улучшений и исправлений ошибок
Как обычно, с момента релиза предыдущей версии мы сделали небольшие улучшения и исправления ошибок на основе ваших отзывов. Вот наиболее важные из них:
Sketch 49 – это бесплатное обновление для всех пользователей Sketch с активной лицензией. Если вам нужно продлить лицензию, вы получите Sketch 49 и после этого целый год будете получать обновления.
Нам нравится видеть, что вы создаете с помощью Sketch, поэтому, если вы создали потрясающую библиотеку и загрузили ее в Sketch Cloud, сообщите нам об этом – мы можем добавить ее в нашу информационную рассылку. Если у вас есть вопросы, предложения или замечания, то вы можете связаться с нами через нашу страницу поддержки или присоединиться к обсуждению в Twitter, или в нашей группе в Facebook.
Мы уже работаем над Sketch 50 и вскоре расскажем вам о нем.
Оптимизация работы портальной дизайн-команды с помощью Sketch и облака — опыт Mail.Ru Group Статьи редакции
Андрей Сундиев из отдела дизайна Mail.Ru Group поделился опытом того, как можно оптимизировать работу команды над постоянно обновляющимися файлами и проектами при помощи облачных систем хранения.
Работая в продуктовой команде над одним или несколькими проектами, мы неизбежно приходим к необходимости организовать общий процесс и рабочее пространство. Кто-то решает этот вопрос через добавление инструментов для коллаборации, кто-то даже строит вокруг этого свой продукт.
Однако мы обратились к опыту наших ближайших коллег — разработчиков. Они умеют оптимизировать свою работу и взаимодействие как никто другой, и потому являются отличным примером для вдохновения.
А что нам, собственно, требуется для эффективной совместной работы? Прежде всего, необходимо пространство для хранения рабочих материалов, организованное по понятной для всех участников процесса схеме. Во-вторых, возможность нескольким людям работать над одним проектом (в том числе над одним файлом), имея перед глазами всегда актуальную версию и не опасаясь что-нибудь сломать.
Хранение и именование файлов
Когда над продуктом работают несколько дизайнеров, то им просто необходимо выстроить общее пространство, чтобы ничто не препятствовало эффективной работе. Как часто вы слышите: «Эй, а где у нас лежит этот макет?», «Как мне найти макеты по такому-то проекту?», «А где лежат ассеты, использованные в макете?». Немножко занудства и педантичности позволили нам почти забыть про эти вопросы.
Все дизайнеры нашей портальной команды работают в общем облаке, разбитом на папки проектов:
Однако до момента унификации внутри этих папок каждая команда распоряжалась по-своему. Каждый дизайнер или группа дизайнеров использовали свою схему организации и именования файлов. В результате разобраться в этой системе могли только сами авторы, а поиски нужного превращались в пытку.
Очевидно, что некоторые вариации неизбежны в силу платформенных отличий (дизайн мобильных приложений и веб-интерфейсов) или проектной специфики (продукт в стадии большого редизайна или итеративно улучшающийся сервис), однако нам просто необходимо было навести порядок хотя бы на базовых уровнях.
Собрав всю команду, мы в течение нескольких необычайно шумных сессий договорились до следующего формата:
В корне папки продукта идёт разбивка на используемые в проекте платформы. Основные портальные проекты Mail.Ru пережили несколько заметных редизайнов, поэтому следующий уровень мы разбили на «поколения» продуктов. Этот базовый этап позволил нам разложить по полочкам основу и отделить актуальные материалы от заведомо устаревших.
Отмечу, что устаревшие макеты мы, не кривя душой, отправили в папку «Arсhive» (у каждого проекта своя), так как практика показывает, что обращаемся мы к ним крайне редко и не видим смысла инвестировать время в наведение там полного порядка.
На следующем уровне, как я уже упоминал, возможны вариации, но в общем виде это выглядит так:
В нашей команде исторически сложились два паттерна организации файлов: мобильные дизайнеры раскладывали файлы по экранам, а те, кто занимался вебом — по фичам или задачам.
С приходом Sketch у мобильных дизайнеров отпала необходимость так сильно дробить структуру, поэтому разбиение по экранам стало для них опциональным. В веб-проектах мы остановились на разбиении по названию задач (опционально к этому можно добавлять номер задачи). Это оказалось достаточно информативным и существенно упростило поиск нужного.
Внутри папки с задачей есть несколько обязательных разделов:
Договорившись до этой схемы, мы провели несколько плановых «субботников», довольно быстро разобрав скопившиеся за годы завалы.
Теперь, приступая к работе над проектом, дизайнеру не приходится с болью в сердце смотреть на папки «_final», «_final-ok», «_new» и так далее. Теперь мы всегда знаем, где брать материалы по проекту, а также какой макет наиболее актуален. В этом нам здорово помогает Sketch.
Организация макетов
Sketch кардинально изменил то, как мы можем структурировать свои макеты. В прошлом остались авгиевы конюшни из 50 PSD- «ver.1, ver.2,… ver.90» и заставлявшие дымиться мой Mak файлы со всеми состояниями в скрытых папках или layer comps. Всё стало гораздо проще.
Сочетание Artboards и Pages в Sketch позволяет без особых проблем и ущерба производительности хранить весь интерфейс в одном мастер-файле. Схема при этом довольно проста:
Возьмем, к примеру, интерфейс «Почты» Mail.Ru:
По страницам у нас разложены основные экраны «Почты»: список писем, письмо, написание письма, настройки. По артбордам состояния: поиск, нотификации, выпадающие меню и тому подобное.
При необходимости отдельные страницы можно зарезервировать под черновые промежуточные варианты или версии интерфейса — это позволит держать их под рукой и быстро найти в процессе работы. Таким образом, мы формируем мастер-файл — основной макет, содержащий самое актуальное состояние интерфейса.
Мастер-файлы и шаблоны
Я упомянул ранее, что нас вдохновил опыт коллег-разработчиков, и вот мы подошли к этапу, где это наиболее выражено. Разработчики — прекрасные оптимизаторы. Они чертовски не любят тратить время впустую. А ещё на их плечах лежит большая ответственность — ведь они постоянно вносят изменения в код продукта, причём делают это одновременно множество человек, порой не связанных друг с другом напрямую.
В каждом проекте существует «мастер» — весь актуальный набор файлов проекта, которые сейчас в разработке. Было бы слишком рискованно вносить изменения сразу в «мастер», так как это может непредсказуемо отразиться на проекте.
В связи с этим появился Git как система контроля изменений и версий. Разработчики вносят изменения в отдельные ветки, и после прохождения проверок эти изменения принимаются и добавляются к «мастеру». В результате множество людей, работая одновременно, безопасно и контролируемо обновляют продукт.
Чем это может помочь нам? Нет, мы не стали использовать Git (хотя могли бы, и некоторые идут именно этим путем), но немного пересмотрели уже имеющиеся инструменты. Если оперировать понятиями разработчиков, то и у нас есть свой «мастер» — основной Sketch-файл со всеми экранами и состояниями интерфейса.
Он должен храниться в корне папки проекта и быть максимально актуальным. Он неприкасаем, вносить в него изменения напрямую может лишь несколько людей в команде. Также есть «ветки» — отдельные файлы-копии основного документа, в которые вы вносите любые изменения в рамках выполнения той или иной задачи. Каждая задача — своя ветка. Как только задача завершена, а изменения согласованы — можно взять исправленную часть из ветки и внести в мастер-файл.
Чтобы быстро создавать ветки, не трогая «мастер», мы используем шаблоны Sketch (идеей поделился с нами в своё время Олег Андрианов, применивший это в команде «Однокласников»).
Для этого необходимо создать ярлык (hard-link) на мастер-файл в папке шаблонов Sketch. Мастер-файл лежит на нашем общем облаке, а ярлык на него у каждого дизайнера на машине.
Для того чтобы создать связь, нужно прописать одну простую команду в терминале (terminal.app):
Теперь вы можете через меню шаблонов получить копию именно того самого актуального мастера и работать с ней без какого-либо вреда. Так как мастер хранится в общей папке, то при его обновлении все дизайнеры видят актуальную версию моментально. В шаблонах мы по той же схеме разместили и UI Kit для быстрого доступа к компонентам.
Этот прием, разумеется, работает для любых Sketch-файлов, поэтому мы не остановились на UI Kit и добавили в шаблоны другие часто используемые файлы, например, пак с иконками и иллюстрациями. Теперь при необходимости добавить в макет интерфейсную иконку или небольшую иллюстрацию мы обращаемся к этому шаблону, где они лежат в svg, готовые к экспорту.
В таком большом (и постоянно расширяющемся) документе можно было бы запутаться, однако тут выручает поиск Sketch. Если слои логично проименованы, то найти нужный не составляет труда. А сочетание клавиш «cmd + 2» переносит тебя к выбранному элементу.
Описанная выше схема позволяет нашей портальной команде работать над группой проектов, всегда используя актуальные версии файлов, которые находятся под рукой, и вносить изменения не деструктивно. Процесс изначально не работает сам собой и требует от участников некоторой сознательности, но на практике за пару недель вырабатывается привычка и наступает счастье.