Главная » Hi-Tech » Sketch или Figma

Sketch или Figma

Sketch или Figma

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

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

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

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

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

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

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

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

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

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

Павел Шумаков

дизайнер Badoo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сергей Кондауров

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

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

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

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

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

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

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

Валерий Назаров

арт-директор Aviasales

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

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

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

Илья Гришин

дизайнер «ВКонтакте»

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

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

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

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

Константин Аверьянов

дизайн-директор продукта «Рокетбанка»

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

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

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

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

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

Константин Замуренко

дизайнер Skyeng

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

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

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

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

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

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

Дмитрий Коваленко

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

#дизайн #инструменты #sketch #figma


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Цифры: сколько Amazon тратит на питание и проживание для стажёров

Цифры: сколько Amazon тратит на питание и проживание для стажёров Поиск Написать Войти Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Интернет-ритейлер Amazon ежегодно принимает на летнюю стажировку в Сиэтле 900 человек. Четвёртый год подряд их ...

10 самых дорогих стартапов, основанных студентами

10 самых дорогих стартапов, основанных студентами Поиск Написать Войти Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто