Sketch или Figma Статьи редакции

У нашей команды простой набор инструментов «как у всех», но, возможно, используем мы их не как все. Дизайн рисуем в Sketch, перешли на него три года назад и пока не планируем менять.

Плюс использования Sketch — в кастомизации плагинов под нужды команды и компании. Один из наших плагинов помогает адаптировать скриншоты продуктов под 20 языков — плагин пробегает по таблице, заменяет текст в макетах и нарезает ассеты.

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

В связке со Sketch используем Sympli для передачи макетов разработчикам. Одно время думали о переходе на Figma из-за шума вокруг API, но пока продукт ограничен в возможностях по сравнению с Sketch и не работает в офлайне.

С темпами как у Figma, Sketch в ближайшее время сильно отстанет, как это произошло у Adobe, когда появился Sketch, и все перейдут на Figma.

Анимацию и интерактив собираем в Principle. В 9 из 10 случаев инструмент покрывает нужные кейсы. Также собираем полноценные прототипы, что позволяет лучше понять новый флоу, протестировать внутри команды и объяснить детали разработчику перед началом работы.

Аналоги (Framer, Origami, Kite) не оправдывают себя из-за времени, которое приходится тратить на создание такого же прототипа в Principle. С микроанимациями помогает After Effect и крутой плагин Airbnb — Lottie. Сильно сокращает время работы над анимацией разработчику, так как Lottie генерирует JSON, который в приложении превращается в векторную анимацию. Разработчику достаточно один раз подключить библиотеку.

Файлы храним в Dropbox, а заметки и документы храним в Paper — он намного проще Google Doc, без лишней функциональности и удобен для совместной работы. Не хватает инструментов для работы с библиотекой и дизайн-системой. Приходится кастомизировать под себя.

Наверное, каждая третья продуктовая команда работает над дизайн-системой и у всех похожие потребности и проблемы. Пока еще мало кто работает над инструментами, которые упростят работу с системой, а если и работает, то делает только для себя. Думаем, в ближайшее время таких инструментов будет появляться больше и больше.

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

Павел Шумаков, руководитель продуктовой дизайн команды Badoo

Расскажу только про базовые инструменты, так как нишевых разработок слишком много и если описывать все, получится многотомное сочинение.

Визуализация интерфейса

Почти все макеты у нас отрисованы в Sketch. Не вижу смысла подробно его описывать — это стандарт индустрии.

Figma работает в облаке, поэтому отлично подходит для совместной работы и комментирования. Мы иногда используем её в распределённых командах, когда в проекте участвует несколько дизайнеров: удобно видеть, кто над какой частью работает, перед глазами всегда находится самая свежая версия дизайна, а обсуждение с командой идёт прямо в макетах. Инструмент молодой, по функциональности пока отстаёт от Sketch, но развивается в правильном направлении.

Лично мне недостаточно отзывчивости интерфейса Figma, свойственного десктопному программному обеспечению, и возможности поработать без интернета — например, в самолёте.

Photoshop до сих пор является лучшим редактором растровой графики. Иногда используем в промопроектах, где этой графики много. Многообещающе выглядит Invision Studio — жду, когда инструмент выйдет из беты.

C Adobe XD революции не случилось. Знаю, что его любят студенты, так как можно использовать бесплатно на Windows.

Прототипирование и анимация

Invision — для быстрого прототипирования, чтобы посмотреть прохождение основного сценария, слинковать группу картинок. Подходит, чтобы составить общее впечатление о дизайне, провести коридорное тестирование, опрос.

After Effects используем для быстрых набросков анимаций, для создания анимации, которую нет в планах переводить в код.

Principle, Flinto, Webflow, Origami — основные инструменты для прототипирования. У всех есть свои плюсы и минусы, про это можно отдельную статью написать. В целом ребята вокруг пользуются теми продуктами, чьи интерфейсные решения кажутся качественнее, и здесь нет явного лидера. Все инструменты подходят, чтобы провести тестирование простой функциональности и пользовательского сценария из небольшого количества шагов.

Framer — тяжёлая артиллерия. Когда надо создать детализированный прототип, возможно, с подключением реальных данных. Подходит для тестирования большей части интерфейсных решений, но на создание и поддержку такого решения уходит много времени.

Обмен наработками

Zeplin — для передачи макетов в разработку. Abstract — для шеринга макетов и контроля их версий. Wake — чтобы все дизайнеры были в курсе, в каком продукте над чем работают, такой Pinterest для дизайнеров «Яндекса», куда они выкладывают финальные макеты, концепты и наброски. Там же идут обсуждения и брейнштормы.

Сергей Кондауров, руководитель службы дизайна сервисов поискового портала «Яндекса»

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

Скажем, ребята из нашей партнерской сети Travelpayouts остановились на Figma, а десктопные сервисы делаются в Sketch. При этом у маркетинга в ходу еще и Photoshop с Illustrator.

В целом и Figma и Sketch прекрасные инструменты для проектирования интерфейсов. Figma, будучи браузерным продуктом, подкупает простотой совместной работы и кроссплатформенностью.

Моя команда решила пока использовать Sketch, потому что перенос библиотеки компонентов может занять слишком много времени, которого нет. Кроме того, некоторые интерфейсные решения в Figma немного непривычны — что вызывает дискомфорт, но это дело привычки.

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

Figma недавно выпустила свой Web API, что может дать интересное развитие этому продукту. Мне бы хотелось видеть на этой платформе больше решений для анимаций и генерации готовых HTML- и CSS-шаблонов.

Валерий Назаров, арт-директор Aviasales

Ещё в 2015 году мы всей командой быстро перешли с Photoshop на Sketch для дизайна интерфейсов и были безумно рады приросту производительности. Файлы меньше, а работа быстрее и удобнее. Редизайн веб-версии «ВКонтакте» рисовали уже в нём. В то время не хватало пары фич (тогда даже для примитивных переходов приходилось мучаться с InVision), но быстрая работа программы покрывала большинство минусов.

Теперь уже все процессы у нас построены вокруг Sketch. Однако время идёт, а лучше не становится. Несмотря на то, что функциональность растёт, сильно страдает производительность. И теперь даже тривиальные задачи делаются с задержкой. В этом плане Figma становится всё более привлекательна. Стабильная работа, текстовые стили, совместное редактирование, система контроля версий — это то, чего очень не хватает в Sketch, и то, что уже давно есть в Figma. Наверное, останавливает лишь отсутствие ряда плагинов, делающих работу удобнее.

Для проектирования сложных анимаций мы используем разные инструменты. Principle нужен для совсем простых штук, Framer и Origami уже на порядок сложнее. Framer привлекателен своей лёгкостью переиспользования разных кусков кода. Origami сложнее, но благодаря возможности интегрироваться в клиент на устройстве появляется доступ к такой функциональности, как Taptic Engine. Ожидаемо, производительности на сложных проектах не хватает и здесь. Для совсем простых переходов вполне достаточно внутренного инструментария Sketch.

Илья Гришин, дизайнер «ВКонтакте»

В работе над всеми нашими приложениями и сайтами используем Sketch и Zeplin — это давно уже знакомо многим настоящим дизайнерам и разработчикам.

Про Sketch рассказывать нет смысла, у них на сайте все с картинками, буквами и анимациями рассказано. Мы сами подписаны на RSS-канал создателей и следим за развитием и появлением новых фич.

Вот, интерактивное прототипирование появилось, чем бы это ни было. Из Sketch в Zeplin залили и всё — все в восторге, приложение почти готово, годик допилить по мелочам всяким.

Вопросы анимации доносим до разработчиков с помощью Flinto, предварительно потыкав и оценив красоту с удобством на устройстве. Идеи и походы на обед обсуждаем в Notion и Telegram. Конечно, главный инструмент — это наши головы. Sketch это или Hooetch — не так важно, если ты дурачок.

Константин Аверьянов, дизайн-директор продукта «Рокетбанка»

Продуктовые дизайнеры работают в Sketch, маркетинговые — в Photoshop и Illustrator. Не сговаривались, так вышло стихийно. Исходники и библиотеки храним на Dropbox. А еще носим Nike, пьём кофе в «Даблби» и сидим за икеевскими столами. Скучно живем.

Прототипы ребята собирают в InVision и Principle. Я весь интерактив собираю в Origami. Даже если на странице одно несчастное видео или простейшая анимация — всё нужно проверять в движении. Бывает, что думаешь «тут и так понятно, хватит и статичных макетов». Нет, ни черта не понятно, пока своими глазами не увидишь. Много раз обжигался. Но тут важно научиться в скорость.

Синхронизация исходников и общих компонентов в Sketch — дизайнерская боль. Но русский народ привык страдать, ведь деды воевали, и нам надо мужаться. Говорят, с этим помогают git-сервисы вроде Abstract, но у нас пока не дошли руки проверить.

Когда-нибудь, когда в Figma будут расширения, когда для выбора цвета тени не нужно будет открывать три диалоговых окна, а Роскомнадзор прекратит блокировать случайные IP-адреса, мы всерьез подумаем о переезде.

В связке Sketch + InVision, Principle, Origami дичайше неудобно переключаться между инструментами. Хочется бесшовной работы и полной синхронизации. И чтобы можно было рисовать кодом. В общем, нужен тот инструмент, который так долго обещали ребята из Framer, но так нормально и не сделали — их собственный графический редактор не дружит с редактором кода из соседней вкладки. Ну ничего, ещё лет пять подождём.

Константин Замуренко, дизайнер Skyeng

Все дизайнеры в Readdle в основном используют два пакета для работы: Sketch и Adobe Suite. Мы научились совмещать оба инструмента и не испытываем особых проблем с передачей друг другу тех или иных ресурсов, так как все они основаны на общем UIKit — по крайней мере, так сделано в b2b-департаменте, который я веду.

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

Для прототипирования работаем в основном с Principle. Я очень полюбил этот инструмент и все больше его использую для проверки своих идей. Сейчас, например, практически полностью рабочий прототип нового iOS-клиента для нашего b2b-продукта Fluix я сделал именно в Principle.

Он прост в использовании, очень гибок, и основную часть всего, что необходимо создать для интерфейса, можно создать имеющимися в нем средствами. Из недостатков — в Principle нет никаких опций для работы с текстом (только базовые: шрифт, размер, выравнивание). Поэтому в моем личном флоу он отлично работает в связке с Adobe Photoshop.

Есть вполне себе хороший импорт Sketch-исходников, но в нем больше недостатков и неудобств, чем плюсов, если необходимо сделать что-то больше, чем какой-то микроитерекшн.

Некоторые наши ребята используют InVision для проработки карты перемещений пользователя. Также иногда используем Framer и подумываем полноценно его внедрить в наш процесс работы в будущем. Раньше пробовали Origami, но не пошло.

Дмитрий Коваленко, руководитель продуктового дизайна Readdle