Prog Academy
RU UA
UI/UX дизайн

Что такое Figma?

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

Совместная работа — главное отличие Figma от прежних редакторов. Файл живёт в облаке, ссылка всегда ведёт на актуальную версию, комментарии остаются прямо на макете, и вопрос «где последний вариант?» просто исчезает.

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

Где применяется

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

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

Пример

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

Частые вопросы

Figma бесплатная?

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

Чем Figma отличается от Photoshop?

Photoshop создан для работы с растровыми изображениями и фотографией. Figma — для интерфейсов: в ней есть компоненты, авто-макет, прототипирование и совместное редактирование в браузере. Обработать снимок в Figma не выйдет, зато собрать экран приложения — в разы быстрее.

Можно ли из Figma получить готовый код?

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

Нужен ли для Figma мощный компьютер?

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

Подробная статья в блоге →

Связанные термины