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

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

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

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

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

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

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

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

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

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

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

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

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