Что такое Figma

Изучаем Figma: рассматриваем преимущества, недостатки, полезные функции, способы применения и освоения самого популярного приложения среди дизайнеров.

Figma — это онлайн-редактор для создания дизайна цифровых продуктов. За время своего существования она стала общепринятым инструментом для работы над графическими проектами. Давайте познакомимся с ней поближе↓

Зачем нужна Figma

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

* В 2022 среди пользователей Figma прошла волна беспокойств, связанных с желанием компании Adobe приобрести востребованное приложение и ограничить его бесплатное использование. Однако сделка в последний момент сорвалась (и пользователи с облегчением выдохнули).

Кто использует этот редактор

Чаще всего онлайн-редактор используют дизайнеры. С помощью Figma:

• Веб-дизайнеры работают над макетами веб-приложений и сайтов
• Графические дизайнеры создают визуальные элементы, логотипы, иллюстрации, афиши
• Промышленные дизайнеры прорабатывают внешний вид изделия, например, этикеток
• UI/UX-дизайнеры разрабатывают и тестируют пользовательский интерфейс сайтов, мобильных и веб-приложений, игр и их информационную архитектуру.

* Подробнее, чем занимается UI/UX-дизайнер смотрите здесь.

Умение пользоваться Figma полезно не только специалистам дизайн-профессий. Оно помогает:

• Product-менеджерам сотрудничать с дизайнерами и разработчиками, выстраивать рабочий процесс и визуализировать идеи в виде схем, макетов и диаграмм
• Контент-мейкерам оформлять текстовые материалы и информационные посты.
• Маркетологам делать баннеры и другие визуальные рекламные элементы
• Преподавателям создавать интересные презентации для лучшего усвоения учебного материала студентами
• Разработчикам упрощать взаимодействие с дизайнерами и процесс переноса дизайна в код.

Что можно создавать в Figma

• Прототипы дизайна цифровых продуктов: веб-сайтов, мобильных и веб-приложений и лендингов
• Отдельные компоненты интерфейса: иконки, кнопки, анимации, фоны, иллюстрации, меню сайтов
• Другие цифровые продукты: stories, цифровые открытки, логотипы, слайды презентаций, рекламные материалы, email-шаблоны и инфографику для визуализации данных
• Макеты полиграфических изделий: упаковок продуктов, журналов и книг, афиш и плакатов, брошюр, буклетов, листовок и визиток, а также меню общепитов, а также визуал для сувенирной продукции.

Полезные особенности и функции

Облачное хранение файлов — функция, благодаря которой в процессе работы над проектом все изменения автоматически сохраняются в облаке. Вы можете продолжить работу с того же момента, на котором остановились с любого другого устройства.

Поддержка векторной графики — особенность, позволяющая создавать не только растровые, но и векторные изображения, а также импортировать их из других программ, например, Sketch и Adobe Illustrator.

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

Компоненты — повторяющиеся элементы, связанные между собой. Любые изменения, внесенные в один экземпляр компонента, автоматически применяются ко всем остальным экземплярам в данном проекте. Это позволяет экономить время на создании однотипных элементов: кнопок, заголовков, полей ввода.

Модульная сетка — инструмент, разделяющий фрейм вертикальными и горизонтальными полосами на равные секции. Они помогают выравнивать элементы, эффективнее распределять контент по макету и упрощают процесс адаптации дизайна для разных устройств.

FigJam — цифровая доска в Figma для командной работы над проектом, мозгового штурма, создания mind map и коллективного обсуждения идей, скетчей и макетов в реальном времени.

Dev Mode — режим разработки, предназначенный для быстрого превращения дизайна в код. Он позволяет получать всю необходимую информацию об объекте, автоматически создавать фрагменты кода CSS на основе дизайна и даже перенести файл в текстовый редактор.

Почему выбирают Figma

Кроссплатформенность. Figma доступна в веб-браузере и имеет приложения для различных операционных систем, таких как Windows, macOS, Linux.

Бесплатность. Базовая версия приложения доступна бесплатно для индивидуальных пользователей и команд до 5 человек. Поэтому начать обучение или работу в онлайн-редакторе можно в любой момент без дополнительных затрат.

Многопользовательский режим. Figma предоставляет возможность совместной работы нескольких пользователей над одним проектом в режиме online.

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

Шаблоны для UX и командной работы. Приложение предоставляет шаблоны для создания карт пользовательского опыта, Product Roadmap для планирования этапов разработки продукта и готовые схемы для продуктивного мозгового штурма.

Большое разнообразие плагинов. Онлайн-редактор поддерживает модули, расширяющие его функциональность. Есть плагины для создания 3D-моделей, перевода растрового изображения в векторное, проверки грамматики текстов, поиска недостающих стилей на разных слоях проекта. Есть даже встроенный бесплатный аналог Photoshop для работы с изображениями — Photopea.

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

Material Design от Google. Доступ к библиотеке Material Design от Google позволяет быстро создавать дизайны, соответствующие стандартам Material Design, и улучшает совместимость с экосистемой Google.

Недостатки редактора

• Зависимость от интернета: отсутствие связи или плохое соединение могут замедлить или полностью остановить процесс работы.
• Не поддерживает русский язык: интерфейс программы и вся документация к ней есть только на английском языке, а обновления в Figma выходят довольно часто.

* Но вы можете называть элементы и фреймы на русском языке и использовать большинство шрифтов.

• Ограниченность бесплатной версии: она выражается, например, в том, что вы можете создать только 3 проекта, у вас нет доступа к Dev Mode, а история версий макета хранится не более 30 дней.
• Нельзя купить платную версию в России: для удобной и безопасной покупки Figma нужна зарубежная банковская карта.
• Нет защиты от копирования: недобросовестный клиент может скопировать созданный вами дизайн. Так может поступить любой пользователь, у которого есть ссылка на ваш проект, если вы работаете в бесплатной версии.

Где изучать основы Figma

На официальных ресурсах: figma.com.

На бесплатных мастер-классах: Эльбрус Буткемп проводит встречи и вебинары на самые разные темы. В том числе, мастер-классы по основам Figma.

* Информацию о всех предстоящих событиях IT-буткемпа вы найдете здесь.

На курсах: например, на курсе UI/UX-дизайна от Эльбрус Буткемп. Изучите Figma на профессиональном уровне и освойте другие необходимые инструменты для разработки дизайна цифровых продуктов. После курса вы сможете работать UI/UX-дизайнером или Product-дизайнером на выбор. Вы создадите 3 проекта для своего портфолио. Подробнее о курсе читайте тут.