Что такое Figma и зачем она нужна

Figma — это облачный редактор интерфейсов, в котором сегодня работает почти вся индустрия дизайна продуктов.

Если Photoshop про пиксели и фотографии, то Figma — про экраны, кнопки и логику интерфейса. Это рабочий инструмент дизайнера приложений и сайтов.

Представьте, что вам нужно нарисовать экран мобильного приложения: список товаров, кнопку «Купить», нижнее меню. В графическом редакторе для фото вы бы мучились с растровыми слоями. В Figma всё это — векторные объекты, которые легко двигать, копировать и превращать в переиспользуемые компоненты. А главное — файл живёт в браузере, и над ним одновременно может работать целая команда, как в Google Документах.

Figma родилась как браузерное приложение, и это её суперсила. Не нужно ничего скачивать (хотя есть и десктоп-приложение), не нужно пересылать файлы по почте — вы просто отправляете ссылку. В 2024 году Figma обновила интерфейс до версии UI3: тулбар переехал вниз экрана, освободив холст, а доступ к ИИ-инструментам и действиям вынесли в отдельное меню Actions.

Первые шаги: создаём аккаунт и файл

Чтобы начать, выполните по шагам:

1. Откройте figma.com и нажмите Sign up. Зарегистрируйтесь через Google или почту — бесплатного тарифа Starter хватит на весь курс.
2. После входа вы попадёте в файловый браузер — это список ваших проектов и файлов, а не сам редактор.
3. Нажмите большую кнопку Design file (или + в правом верхнем углу). Откроется новый пустой файл с бесконечным холстом.
4. Сверху по центру вы увидите имя файла — кликните по нему и переименуйте, например, в «Мой первый макет».

Поздравляю — вы внутри редактора. Дальше весь курс мы проведём именно здесь.

Дизайн-файлы и FigJam

Figma предлагает два типа файлов. Design file — для макетов интерфейсов, это наш основной инструмент. FigJam — онлайн-доска для мозговых штурмов, схем и стикеров. В этом курсе мы работаем только с дизайн-файлами.

Файловый браузер Figma
  Проект «Учёба»
    +-- Мой первый макет   (design file)
    +-- Идеи приложения    (FigJam доска)
  Проект «Работа»
    +-- Лендинг компании
    +-- Дизайн-система

Бесплатно и в команде

Тариф Starter бесплатный и щедрый: до трёх дизайн-файлов и неограниченное число личных черновиков. Этого хватит, чтобы пройти весь курс и собрать портфолио. Когда понадобится больше файлов и совместная работа без ограничений — есть платные тарифы Professional и Organization, но спешить с ними не нужно.

Главная причина, почему индустрия выбрала именно Figma, — совместная работа в реальном времени. Откройте файл, нажмите Share в правом верхнем углу, скопируйте ссылку и отправьте коллеге. Он увидит ваш курсор, изменения появятся мгновенно, а в режиме комментариев (клавиша C) можно оставлять заметки прямо на макете. Это превращает дизайн из одиночной работы в общий процесс, где участвуют разработчики, менеджеры и заказчики.

Ещё одно преимущество — платформонезависимость. Файл живёт в облаке и открывается в любом современном браузере на Windows, macOS или Linux. Есть и десктоп-приложение — оно работает быстрее и поддерживает локальные шрифты, но формат файла тот же. Вы можете начать дома в браузере, а продолжить на работе в приложении — это один и тот же файл.

Горячие клавиши

Частые ошибки

• Ищут кнопку «Сохранить». Её нет — Figma сохраняет всё автоматически в облако каждую секунду. Это нормально.
• Путают файловый браузер и редактор. Список файлов — это ещё не рисование. Чтобы рисовать, нужно открыть конкретный файл.
• Создают FigJam вместо Design file. Для макетов всегда выбирайте именно Design file.

Совет профи: продумайте структуру проектов заранее

Не складывайте все файлы в один общий список — заведите проекты по смыслу: «Учёба», «Личные эксперименты», «Портфолио». В файловом браузере проекты группируют файлы как папки, и через полгода вы скажете себе спасибо за порядок. Внутри одного дизайн-файла можно держать несколько страниц, поэтому маленький проект — это один файл с несколькими страницами, а большой — несколько файлов в проекте. Ещё привычка, которая окупается: давайте файлам и страницам понятные имена сразу, а не «Untitled». Figma запоминает последние открытые файлы и показывает их на стартовом экране, так что осмысленные имена ускоряют возврат к работе.

Чек-лист

• Зарегистрировался на figma.com и вошёл в аккаунт.
• Создал и переименовал первый дизайн-файл.
• Понимаю разницу между файловым браузером и редактором.
• Знаю, что такое FigJam и почему мы его пока не используем.

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