Неделю назад в nFactorial School завершилась неделя дизайна, где каждый участник вместе с 4 дизайн-менторами должен был не только усвоить основы UI/UX дизайна, но и создать законченный high-fidelity дизайн первой версии своего iOS или React приложения. Это значит, что всю неделю мы провели в Figma.

Figma - это браузерный дизайн-инструмент векторной графики и прототипирования. Популярен для создания пользовательских интерфейсов. Сильно упрощая и учитывая коллаборативные функции, Figm’у можно назвать Google Docs для UI/UX дизайна.

Чтобы лучше объяснить, что такое Figma, расскажу в формате “до и после”.

До Figmы: дизайнеры интерфейсов работали в своем необлачном desktop-клиенте (например, Sketch), загружали файлы в Dropbox, после этого их коллеги-дизайнеры открывали этот файл в Dropbox, зачастую создавали свою копию для избежания конфликтов и после этого делали изменения в новом файле. После Figmы: все дизайны хранятся в облаке, все дизайнеры компании работают над одним дизайном и могут редактировать его напрямую в браузере. Также можно комментировать дизайны коллег прямо в Figma. Больше не нужно писать email’ы и создавать дизайн-файлы с длиннющими названиями типа “homepage_design_aug23-2020_version_5_really_really_final_final_2”.

До Figmы: мы в разных компаниях (Zero To One Labs, nFactorial Incubator, Hora.ai) использовали 5 инструментов. Sketch - для создания дизайнов. Invision или Principle - для создания анимаций и кликабельных прототипов. Zeplin - для developer handoff: передачи спеков дизайна разработчикам. Dropbox - для хранения файлов. После Figmы: эти 5 инструментов заменяются одним инструментов - Figm’ой.

До Figmы: дизайнер создавал дизайн в Sketch, экспортировал его в .png и делился с PM’ом. Далее PM делал замечания через Slack/email. После Figmы: как дизайнер, так и PM/CEO/инженеры - все используют Figmу. Figma - полноценный инструмент для всей команды, не только для дизайнеров. Figma создала не просто инструмент, который любят дизайнеры, но и инструмент, с помощью которого не-дизайнеры становятся участниками дизайн-процесса.

До Figmы: дизайнеры делились дизайнами с онлайн-сообществом через такие сайты, как Dribbble или Behance. При этом эти дизайны показывают лишь конечный результат работы, поэтому они не пригодны для прямого использования. Невозможно посмотреть контекст, слои или компоненты. После Figmы: делясь ссылкой в Figma, вы делитесь всем: компонентами, assetами, анимациями, переходами и т.д.

Итак, Figma - это Sketch + Invision + Principle + Zeplin + Dropbox. Благодаря истории версий и полноценной возможности делиться своими дизайн-библиотеками с другими компаниями, это также и Github для дизайна. Благодаря огромной Вселенной созданных сообществом всевозможных плагинов на все случаи жизни - это еще и некий Chrome для дизайна.

Потрясающий инструмент. Выше я сфокусировался на самом продукте. Если интересен экономический анализ компании и обсуждение ее будущего, рекомендую следующую статью: https://kwokchain.com/2020/06/19/why-figma-wins/

Мой Telegram: https://t.me/armansu_live

‍