Figma

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

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

Что умеет Figma

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

Кроме основного редактора, в Figma входят онлайн-доска FigJam для мозговых штурмов и схем, Figma Slides для презентаций и инструменты с ИИ, которые собирают прототип по текстовому описанию. Экспортировать макет можно в PNG, JPG, SVG и PDF.

Кому подходит

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

Сколько стоит

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

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

Как начать пользоваться

1. Откройте figma.com и зарегистрируйтесь через почту или аккаунт Google.
2. Работайте в браузере или скачайте приложение для Windows или macOS с официального сайта: в нём удобнее горячие клавиши и сразу доступны шрифты, установленные на компьютере.
3. Создайте новый файл дизайна, добавьте фрейм нужного размера, например под экран телефона, и начинайте рисовать.
4. Чтобы показать работу, нажмите кнопку совместного доступа и отправьте ссылку с правами на просмотр или правку.
5. Для просмотра макетов и прототипов на телефоне установите приложение Figma из App Store или Google Play.

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