Figma для начинающих: создание UI/UX дизайна

Этот урок посвящен знакомству с программой Figma и созданию базового дизайна. Вы научитесь работать с основными инструментами и создадите свой первый проект. Начнём с обзора Figma, её возможностей и причин популярности. Рассмотрим вопрос о возможности замены Photoshop.

Что такое Figma и почему она популярна?

Figma, появившаяся в 2012 году, быстро завоевала популярность, получив в 2013 году около 4 миллионов долларов инвестиций. Её успех обусловлен возможностью быстрой разработки дизайн-проектов и совместной работой над ними. В отличие от Photoshop или Illustrator, Figma позволяет одновременно работать над одним проектом нескольким дизайнерам. Это, вместе с мобильностью и простотой использования, делает её серьёзной альтернативой традиционным программам для дизайна.

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

Преимущества Figma

  • Векторный формат SVG: Все объекты создаются в векторном формате SVG, позволяющем масштабировать изображения без потери качества.
  • Совместная работа: Возможность одновременной работы над проектом нескольких дизайнеров.
  • Универсальность: Подходит для создания иконок, небольших картинок и крупных дизайн-проектов.
  • Простота освоения: Проще и быстрее в изучении, чем Photoshop.
  • Экспорт CSS: Позволяет экспортировать фрагменты CSS-кода, удобные для верстальщиков.

Хотя Photoshop остаётся широко распространённым, Figma представляет собой серьёзную конкуренцию, особенно для веб- и приложений. Несмотря на преобладание традиционных решений, Figma стремительно набирает популярность.

Начало работы с Figma

Для работы с Figma необходимо перейти на сайт figma.com и зарегистрироваться. Доступен бесплатный тариф, достаточный для начала работы. Помимо онлайн-версии, доступны приложения для macOS, Windows и онлайн-версия для Linux. Онлайн- и десктопные версии идентичны.

Интерфейс Figma и создание проекта

После авторизации вы попадёте в личный кабинет, где можно просматривать проекты, шаблоны, сообщество (с шаблонами, плагинами и шрифтами), управлять командами и проектами. Панель отображает все ваши дизайн-проекты. Для создания нового проекта нажмите «Создать новый файл» и задайте ему имя (например, «Мой первый проект»). В следующих уроках мы подробно разберём интерфейс и создадим дизайн-проект.

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

Что будем искать? Например,программа