Дизайн в Figma: экономия времени и улучшение качества

Долгое время основным инструментом создания дизайнов сайтов или мобильных приложений во всем мире был Photoshop. Не имея альтернативы, дизайнерам приходилось мириться со многими неудобствами продукта от компании Adobe. Лишь владельцы операционных систем MacOs могли позволить себе более приспособленный к созданию дизайна web и mobile интерфейсов инструмент Sketch. До 2019 года наша компания использовала именно его в дизайне продуктов. Но мы решили попробовать, уже набравшую популярность, Figma. И не прогадали, облегчив работу не только себе, но и разработчикам, менеджерам и даже клиентам. Как и почему? Читайте в материале ниже.

Дизайн в Figma: экономия времени и улучшение качества

Почему мы выбрали Figma?

Сразу стоит отметить, что данный инструмент очень прост в освоении. В помощь на официальном канале Figma собраны короткие видеоуроки. Нам потребовалось всего пару дней, чтобы разобраться в несложном интерфейсе и приступить к работе. Мы получили множество новых возможностей благодаря особенностям Figma.

Облачное хранение файлов

Первым приятным сюрпризом для нас стал отказ от распространения макетов в png и psd форматах. Все дизайны, сделанные в Figma, хранятся в облаке. Благодаря этому для передачи макетов клиенту или разработчику мы просто указываем ссылку на проект, которая открывается прямо в браузере.

Теперь наши заказчики не теряются в архиве с огромным числом png-файлов. За счет встроенного функционала для комментирования прямо на макетах выросло качество обратной связи. А мы, дизайнеры, получили возможность совместно работать над проектом в едином пространстве, где все внесенные изменения сохраняются и отображаются в режиме реального времени.

Дизайн в Figma: экономия времени и улучшение качества

Удобное ведение стилей проекта

С помощью Figma мы улучшили процесс ведения дизайн-систем. В ней очень удобно создавать и вести стили дизайна всего проекта. Мы стали на постоянной основе использовать Компоненты (родственные элементы) и возможность сохранять стили текстов и цветов. Все это вывело процесс создания дизайна интерфейсов на новый уровень по сравнению с Photoshop. В Figma дочерние элементы привязаны к родительским. Кнопки, иконки, тексты и даже целые блоки в макетах мы меняем всего в несколько кликов. Теперь, чтобы внести правки, не нужно открывать множество psd-файлов. Это сильно ускоряет работу всего дизайн отдела.

Мы в ZeBrains используем коммерческую версию Figma. Это позволяет нам создавать динамическую библиотеку стилей, которую можно использовать в нескольких файлах и проектах.

Легкость в масштабировании

Одним из главных помощников в Figma является функция Constraints. С ее помощью можно зафиксировать позиции и масштаб элементов. Когда мы меняем размеры всего блока, все составляющие его будут изменяться по заданным ранее настройкам. Это не дает возможности делать мгновенные адаптивы целых страниц, но позволяет делать перекомпоновку отдельных блоков под разные разрешения в кратчайшие сроки. Поэтому мы можем уверенно сказать, что процесс создания адаптивного дизайна стал намного проще и приятнее.

Прототипирование

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

Множество плагинов и интеграций

Плагины в Figma позволяют решать самые разные проблемы. Например, все наши дизайнеры пользуются одноименным плагином от сервиса Unsplash, который позволяет всего в пару кликов размещать тестовые изображения в хорошем качестве и экономить лишние минуты. Кроме того, мы используем плагины, когда нужно быстро отобразить дизайн в мокапе, сгенерировать карту, сделать легкую анимацию интерфейса, создать диаграмму, а также для многого другого.

Макеты можно переносить и в другие инструменты. Например, любителям MacOS очень помогает интеграция Figma с Principle для создания качественной анимации интерфейса. Также часто мы используем возможность переноса макетов GoogleSlides, что позволяет поднять качество визуального оформления презентаций на другой уровень. По запросу разработчиков мы делаем интеграцию с сервисами Avocode и Zeplin.

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

Результат удивил нас самих: время работы над большинством задач сократилось на 40% по сравнению со временем выполнения подобных задач ранее. Знакомство нового дизайнера с макетной базой долговременного проекта сжалось с 4 дней до 6-8 часов. Благодаря этому у ребят высвободилось время на более осознанную проектную работу. Количество технического долга тоже уменьшилось.

Олег Ровный, Руководитель отдела дизайна в ZeBrains

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

Надеемся, что все читатели этой статьи: дизайнеры, разработчики, менеджеры и многие другие получили ответ на вопрос: «Почему именно Figma?!».

1515
5 комментариев

Часто встречаются подобные посты от компаний, которые перешли со скетча на фигму, все пишут примерное одно и то же) Мне кажется что уже давно всем понятны плюсы фигмы перед скетчом (хотя свои плюсы у него тоже есть).

1
Ответить

Какая-то компания в 20 году: а вы знали что в фигме есть плагины и компоненты?
Спасибо за актуальный, а главное уникальный контент!!!

1
Ответить
Комментарий удалён модератором

Лично я в кореле даже вектор не редактирую, переношу в люстру.

1
Ответить

Набредал на исходник в Корале в прошлом году у одной IT!!! компании из Краснодара 

Ответить

Давно пользуюсь фигмой)

Ответить