Figma
Figma — облачный редактор интерфейсов для дизайна и прототипирования. Работает в браузере, хранит файлы на сервере, позволяет нескольким дизайнерам править макет одновременно и отдавать разработчику дев-режим со стилями.
Определение Figma
Figma — векторный редактор для проектирования интерфейсов сайтов и приложений, запущенный в 2016 году и работающий прямо в браузере без установки. В отличие от Photoshop, который создан для растровой обработки фотографий, Figma заточена под UI: артборды-фреймы под разные экраны, переиспользуемые компоненты, авто-лейаут и кликабельные прототипы. Файл хранится в облаке, поэтому над одним макетом одновременно работают дизайнер, арт-директор и разработчик. В 2022 году Adobe объявила о покупке Figma за 20 млрд долларов, но в 2023-м сделку отменили из-за претензий регуляторов.
Как работает и где применяется
Дизайнер собирает экран из фреймов и компонентов, связывает их стрелками-переходами и получает прототип, который кликается как живой продукт. Разработчик открывает тот же файл в дев-режиме и видит размеры в пикселях, отступы, цвета в HEX, толщину шрифта и готовый CSS — переснимать макет линейкой не нужно. По опросу Design Tools Survey, Figma использует около 80% продуктовых команд. На таком файле строится прототип и согласуется с заказчиком до начала вёрстки, что экономит 2-3 недели правок. Связка с разработкой сайта и брендингом делает Figma точкой передачи макета от дизайна к коду.
| Возможность | Что даёт |
|---|---|
| Дев-режим (Dev Mode) | Размеры, отступы, CSS и токены для разработчика |
| Компоненты и варианты | Один элемент меняется во всём макете сразу |
| Авто-лейаут | Адаптивные блоки, которые тянутся под контент |
| Совместное редактирование | Несколько человек в файле в реальном времени |
Figma против Photoshop и других редакторов
Photoshop остаётся инструментом ретуши и растровой графики, Illustrator — векторной иллюстрации, а Figma закрывает именно проектирование интерфейсов. Главные отличия: облако вместо локальных PSD-файлов, версии без ручного сохранения копий, бесплатный тариф для одного проекта и плагины для иконок, контента и проверки контраста. Прямые конкуренты — Sketch (только macOS, без онлайн-совместности из коробки) и Adobe XD, развитие которого Adobe фактически свернула. Для статичной отрисовки баннеров Figma слабее Photoshop, для интерфейсов — наоборот.
Инструменты и пример
Базовый набор: компоненты, стили цвета и текста, авто-лейаут, переменные и плагины (Iconify, Content Reel, Stark для доступности). На практике из стилей и компонентов вырастает дизайн-система. Мини-кейс: команда из 3 дизайнеров переносит проект интернет-магазина из локальных PSD в Figma с библиотекой компонентов — время сборки нового шаблона страницы падает с 6 часов до 1,5, а число расхождений между макетом и вёрсткой на приёмке снижается примерно на 40%, потому что разработчик берёт значения из дев-режима, а не на глаз.
Связанные концепции
- Прототип — кликабельная модель интерфейса, которую в Figma собирают из фреймов и переходов.
- Wireframe — схематичный каркас экрана без цвета и графики, первый шаг перед дизайном.
- Дизайн-система — библиотека компонентов и токенов, которая в Figma хранится как общая команда-библиотека.
- UI — визуальный слой продукта, который и проектируют в Figma.
- Дев-режим — отдельный режим файла со стилями и CSS для разработчика.
Частые ошибки
- Рисуют каждый экран с нуля вместо компонентов — правка кнопки превращается в час ручной работы по всему макету.
- Не используют авто-лейаут, из-за чего блоки разъезжаются при смене текста и адаптив приходится собирать заново.
- Отдают разработчику картинку PNG вместо доступа к файлу — теряется дев-режим и точные значения отступов.
- Хранят финальные макеты без структуры страниц и фреймов, и через месяц никто не находит актуальную версию.
Частые вопросы
Чем Figma отличается от Photoshop?
Photoshop создан для растровой обработки фотографий и графики, Figma — для проектирования интерфейсов. В Figma есть компоненты, авто-лейаут, кликабельные прототипы и дев-режим с CSS, файл хранится в облаке и редактируется командой одновременно. Для ретуши фото берут Photoshop, для дизайна сайта и приложения — Figma.
Figma платная?
Есть бесплатный тариф: один черновой проект, базовые функции и совместная работа с ограничениями. Платные планы открывают неограниченное число проектов, общие библиотеки компонентов, расширенный дев-режим и управление правами команды. Большинству небольших проектов хватает бесплатного или стартового тарифа на одного-двух дизайнеров.
Что такое дев-режим в Figma?
Дев-режим (Dev Mode) — это вид файла для разработчика. Он показывает точные размеры элементов, отступы, цвета в HEX, параметры шрифтов и готовые куски CSS, а также токены дизайн-системы. Благодаря ему верстальщик не снимает значения на глаз, что снижает расхождения между макетом и сайтом примерно на 40%.
Можно ли по макету Figma сразу сверстать сайт?
Макет — это спецификация, но не код. По нему разработчик вручную или с помощью плагинов собирает адаптивную вёрстку и связывает её с CMS. Прямая автогенерация кода даёт черновой результат, который всё равно дорабатывают. Чистый макет с компонентами и авто-лейаутом ускоряет вёрстку, но не заменяет её.
Нужен ли заказчику доступ к Figma?
Достаточно ссылки на просмотр или прототип — устанавливать ничего не нужно, файл открывается в браузере. Заказчик кликает по прототипу как по готовому продукту и оставляет комментарии прямо на макете. Это ускоряет согласование и убирает переписку с правками в мессенджере. Заказать дизайн и разработку можно в BigPanda.