Главная » 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 Интересное!

Аккаунт в Instagram: венчурный инвестор из Лондона каждый день пишет об одном новом стартапе

Аккаунт в Instagram: венчурный инвестор из Лондона каждый день пишет об одном новом стартапе Например, Birchbox присылает каждый месяц коробочку с пятью пробниками косметики, подходящими персонально каждому клиенту: Система защиты от уличных грабителей Stilla Motion: Или известный «заменитель еды» Soylent: ...

Lockheed Martin показал, где астронавты будут жить во время миссий в глубокий космос

Lockheed Martin показал, как могли бы выглядеть такие жилища, в четверг в Космическом центре им. Массивное цилиндрическое жилье может однажды приютить четырех астронавтов, отправленных в глубокий космос. Lockheed — один из шести подрядчиков (включая Boeing, Sierra Nevada Space Systems, Orbital ...