Перешел в Figma и не жалею

Есть пословица о том, что ложка хороша к обеду, но к определенному обеду нужен подходящий столовый прибор. Кушать бульон палочками неэффективно, а суши вилкой - некрасиво. Так и с инструментами для задачи: нужно подобрать подходящий. Сегодня мы стартуем серию статей по Figma статьёй нового автора нашего блога. Борис поделится опытом прототипирования в разных инструментах и освоением Figma, на которую уже как пять лет перевели всех аналитиков компании.

Этот блок временно не поддерживается

Испугаться Figma

Привет, меня зовут Борис.

До 2020 года работал в сфере кадастра и геодезии в должности кадастрового инженера. В тот период разрабатывал дизайн в стандартном Paint компании Microsoft, расширенном Paint.NET, а также изучал GIMP. Ввиду профессиональной деятельности возникла необходимость использования более продвинутого редактора, который обладал бы широкой функциональностью, например, наличием слоев у проекта, возможностью детального редактирования изображений. Мной был выбран Adobe Photoshop, который включал нужные функции.

В 2020 году решил попробовать себя в IT-сфере и начал со специалиста службы технической поддержки СЭД Directum 5. Тогда первый раз столкнулся с понятием прототипов интерфейса, но такого опыта не было. С осени 2021 года перешел на должность консультанта на Directum RX и впервые стал подключаться на проекты внедрения, где одной из задач консультанта являлась разработка прототипов системы. Руководитель поставил задачу разработать прототипы карточек документа, справочника и задачи для заказчика. Я решил использовать знакомый мне Paint.NET, но сразу же столкнулся с трудностью, когда после разработки сложного прототипа забыл сохранить его и все пришлось делать заново. Так как время поджимало, было принято решение попробовать старый добрый Adobe Photoshop, у которого имелись возможности автосохранения проекта, деления проекта на слои, большое количество разных инструментов. В итоге задача была выполнена.

Тот самый прототип в Paint.NET
Тот самый прототип в Paint.NET

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

Приручить Figma

В феврале 2023 года я пришёл работать в IT-компанию на должность консультанта, где в качестве инструмента для разработки прототипов интерфейсов использовалась Figma. Знание Figma являлось обязательным для всех аналитиков и консультантов компании, и я начал углубленно изучать инструмент.

Компетенция состояла из теоретических материалов по Figma, примеров прототипов интерфейсов и практического задания. Вначале изучил теорию, посмотрел различные видеоролики, ознакомился с готовым набором прототипов и элементов UI-Kit и приступил к выполнению практической части.

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

Вместе с изучением теории на разработку прототипов у меня ушло два с половиной дня.

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

Пример прототипа на пресейл в Figma
Пример прототипа на пресейл в Figma

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

Влюбиться в Figma

Немного расскажу о преимуществах Figma, которые я для себя отметил при освоении:

  1. Векторный формат изображений. Фото можно сжать или увеличить в 100 раз, но при этом качество изображения не изменится. За счет этого обеспечивается реалистичность прототипов.
  2. Готовая библиотека компонентов. Наличие готового набора компонентов UI-Kit позволяет сократить время.
  3. Работа в облаке. Обеспечивается возможность совместной работы над одним проектом, не требуется сохранение проекта.
  4. Быстродействие. Figma менее требовательна к производительности ПК, может работать через браузер.

Сравнение инструментов

Важное значение имеет сравнение продуктов, которые мне довелось использовать при разработке прототипов. Ниже в таблице приведены субъективные критерии сравнения инструментов, которые лежат на поверхности.

Перешел в Figma и не жалею

Заключение

Не бойтесь осваивать новые инструменты, выбирать для себя тот, в котором будет не только удобно, но и интересно работать.

Хоть и Figma уже широко распространена, но в некоторых компаниях наблюдаем сложности во внедрении и освоении инструмента. Хотим поделиться своим опытом и приглашаем на курс “Проектирование интерфейсов Directum RX в Figma”, который наиболее будет интересен внедренцам корпоративных решений на базе платформы Directum RX.

303303 показа
201201 открытие
Начать дискуссию