Figma: что это, где применяется и как освоить

Слово «Figma» в вакансиях давно встречается не только у дизайнеров: его пишут в требованиях к маркетологам, контент-менеджерам, аналитикам и фронтенд-разработчикам, и каждый понимает под ним своё. Одному достаточно открыть ссылку, найти нужный экран и скопировать цвет кнопки. Другому нужно самому собрать карточку так, чтобы коллега поменял в ней текст и ничего не разъехалось. Начинать стоит с вопроса, какой из этих уровней нужен именно вам.

Чем Figma отличается от других редакторов

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

В одной учётной записи несколько продуктов. Figma Design — основной редактор макетов. FigJam — доска для схем и стикеров, которой часто пользуются менеджеры и преподаватели. Figma Slides — презентации. Dev Mode — режим для разработчиков, где удобно смотреть отступы, свойства элементов и выгружать ресурсы.

Дизайнеры тоже работают в Figma, но их задача — придумать и проверить решение; статья о профессии UX/UI-дизайнера на сайте разбирает исследования и прототипы. Здесь речь о другом: как человеку с иной основной работой пользоваться Figma так, чтобы она экономила время.

Кому и зачем нужна Figma

Маркетолог и SMM-специалист правят баннеры и карточки товаров по готовым шаблонам, меняют тексты и цены, выгружают картинки нужных размеров. Для них важнее всего компоненты, автолэйаут и экспорт.

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

Разработчик переносит макет в код: находит экран, смотрит размеры и отступы, копирует значения цветов и шрифтов, выгружает иконки в SVG. Рисовать ему обычно не нужно, но понимать компоненты и переменные полезно: они подсказывают, какие элементы в коде тоже стоит сделать переиспользуемыми.

Преподаватель и методист готовят рабочие листы, карточки и обложки уроков. На доске FigJam ученики пишут одновременно, а шаблон рабочего листа экономит время при подготовке каждого занятия.

Учебный пример: шаблон анонса вебинара

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

Сначала он создаёт фрейм — рабочую область размером 1080 × 1350 пикселей — и располагает в нём заголовок, дату, фото и плашку «Прямой эфир». Затем включает для текстовых блоков автолэйаут: элементы стоят друг под другом с заданным отступом, и если заголовок займёт три строки вместо двух, дата сама сдвинется вниз, а не наедет на него.

Дальше карточка становится компонентом — главным образцом, с которым связаны все копии. Если поменять шрифт заголовка в образце, он поменяется во всех анонсах сразу. Для плашки методист делает варианты «Прямой эфир» и «Запись», а цвета бренда сохраняет как стили или переменные, чтобы не подбирать оттенок пипеткой. Остаётся настроить экспорт в PNG и JPG.

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

Права доступа: что можно делать бесплатно

Для первых шагов хватает бесплатного плана Starter, но его ограничения обычно обнаруживаются в самый неудобный момент. По справке Figma о плане Starter, черновиков — файлов, не перенесённых в папку команды, — может быть сколько угодно. А в папке команды действует лимит: три файла Figma Design и Figma Sites в сумме, три доски FigJam и три файла Figma Slides. История версий хранится 30 дней, Dev Mode недоступен. Пригласить коллегу к черновику можно только с правом просмотра: совместно редактировать черновики на Starter нельзя, для этого файл придётся перенести в папку команды.

На платных планах доступ определяет тип места (seat), и здесь легко ошибиться, выбирая вариант подешевле. В справке о местах их четыре. Full даёт полный доступ ко всем продуктам, включая редактор Figma Design и Dev Mode. Dev открывает Dev Mode, FigJam и Slides, но в файлах Figma Design позволяет только смотреть и комментировать. Collab даёт FigJam и Slides, а в макетах — просмотр с комментариями и базовый осмотр свойств, без Dev Mode. View — только просмотр и комментарии.

Практический вывод: маркетологу, который сам правит шаблоны баннеров, нужно место Full — с местом Collab он сможет обсуждать макеты, но не менять их. Разработчику хватит места Dev, менеджеру, который только комментирует, — Collab или View. Места назначает администратор команды, поэтому до начала обучения стоит выяснить, какой доступ вам выдадут на работе.

Что осваивать и в каком порядке

Пункты идут так же, как собирался шаблон в учебном примере: сначала фреймы и текст, потом автолэйаут, чтобы блоки не разъезжались, затем компоненты и стили, которые держат копии в порядке. Прототип и передачу в разработку оставляют на конец: они опираются на уже аккуратно собранный файл.

1. Интерфейс: фреймы, слои, страницы, поиск нужного экрана.
2. Текст и фигуры: стили текста, выравнивание, простая векторная графика.
3. Автолэйаут: отступы, направление, поведение при изменении содержимого.
4. Компоненты и варианты: образец и копии, которые не теряют с ним связь.
5. Стили и переменные: цвета, шрифты и размеры, заданные один раз.
6. Прототип и комментарии: связи между экранами, обсуждение правок в файле.
7. Экспорт и передача: форматы, масштаб, Dev Mode.

Разработчику можно начать с седьмого пункта и вернуться к четвёртому и пятому. Маркетологу важнее третий и четвёртый. Менеджеру продукта хватит первых двух, шестого и схем в FigJam.

Пройти эту последовательность целиком с проверкой работ можно на онлайн-курсе «Figma с нуля» Бруноям. В программе семь модулей — от интерфейса и векторной графики до автолэйаута, вариантов компонентов и адаптивных макетов, практика после каждой темы и итоговый макет сайта под разные экраны. Среди адресатов прямо названы маркетологи, менеджеры продуктов и разработчики, которые получают макеты от дизайнеров.

Упражнения и частые ошибки

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

Новички чаще всего ошибаются в одном и том же: расставляют элементы вручную, и шаблон разваливается при первом длинном тексте; копируют элемент обычным копированием вместо копии компонента и потом правят двадцать карточек по одной; отсоединяют копию от образца ради быстрой правки; оставляют слоям имена вроде «Frame 208», и коллеги не могут найти нужный элемент. Проверить себя можно, передав файл коллеге без объяснений: если он за пять минут сделал из шаблона новую картинку, файл устроен правильно.

Тем, кто будет вести в Figma материалы для всей команды, пригодится опыт дизайн-системы — набора компонентов, стилей и правил, по которым собираются все макеты. На курсе Synergy Academy «Figma с нуля до PRO» создание дизайн-системы вынесено в отдельный модуль; из 34 часов программы 24 отведено практике, а в портфолио входят лендинг с дизайн-системой, карточки товаров для маркетплейса и деловая презентация.

Как навык влияет на доход

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

Есть и расход. Если вы работаете самостоятельно на платном плане, место Full на тарифе Professional, по справке Figma об изменении цен, с марта 2025 года стоит 16 евро в месяц при годовой оплате и 20 евро при помесячной, место Dev — 12 и 15 евро, Collab — 3 и 5 евро. Figma — зарубежный сервис, поэтому способ оплаты стоит выяснить заранее.

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

Как выбрать обучение

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

Короткий формат подходит тем, кому Figma нужна для оформления материалов, а не для интерфейсов. Программа Bonnie & Slide «Основы дизайна в Figma» рассчитана на четыре недели и около 16 часов: работа с фото и фоном, компоненты и таблицы, графики, плагины и анимация, домашние задания с проверкой куратора, но без итогового проекта. В обзоре отмечено, что названия модулей не всегда совпадают с содержанием, поэтому программу лучше уточнить у школы до оплаты.

При выборе проверьте три вещи. Есть ли задание, похожее на вашу реальную задачу: шаблон баннера, схема экрана, передача макета в разработку. Проверяет ли работы живой человек и как быстро приходит ответ. Учат ли работать с чужими файлами — находить компоненты, не ломать связи, оставлять понятные комментарии, — а не только рисовать с нуля.

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

Если после первых шаблонов захочется проектировать интерфейсы целиком, дальше логичен путь к веб-дизайну или профессии UX/UI-дизайнера. Но для большинства тех, кто не работает дизайнером, Figma остаётся рабочим инструментом: важнее уверенно собирать и читать макеты, чем знать каждую кнопку редактора.