Figma

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

Что можно делать в Figma

Платформа покрывает весь цикл создания интерфейсов — от идеи до готового макета и спецификаций для разработчиков.

• Проектирование экранов сайтов и мобильных приложений, работа с сетками и фреймами.
• Интерактивные прототипы с переходами, жестами и анимацией Smart Animate.
• Дизайн-системы на базе компонентов, вариантов и переменных.
• Командная работа в реальном времени с комментированием и историей версий.
• Подготовка ассетов и спецификаций для iOS, Android и Web.

Дизайн и прототипирование

Рабочее полотно строится на фреймах и автолэйауте — это ускоряет верстку интерфейсов и поддерживает единые отступы. Прототипы демонстрируют логику сценариев и переходов до начала разработки.

• Auto Layout — адаптивные блоки, кнопки и списки подстраиваются под контент.
• Компоненты и варианты — единые кнопки, поля, карточки со связанными состояниями.
• Переменные — цвета, размеры, токены и темы для быстрой смены состояния дизайна.
• Интерактивные компоненты и Smart Animate — реалистичное поведение и микровзаимодействия.
• Презентация прототипа по ссылке, просмотр на десктопе и мобильных устройствах.

Вектор и работа с изображениями

Редактор сочетает векторные инструменты и базовую растровую обработку, достаточную для макетирования.

• Перо, карандаш, фигуры, булевы операции, закругления и точное выравнивание.
• Экспорт SVG, PNG, JPG, PDF с настройкой масштабов и плотностей.
• Базовые эффекты для изображений — Fill, Crop, Tile, корректировки экспозиции, контраста, насыщенности.
• Удаление фона в базовом редакторе недоступно — эту задачу решают плагины и тестовые AI-функции.

Совместная работа и передача в разработку

Figma упрощает коммуникацию между дизайнерами, менеджерами и разработчиками, концентрируя все артефакты проекта в одном месте.

• Реальное время — несколько участников редактируют один файл, видят курсоры друг друга.
• Комментарии и упоминания — фиксация решений прямо на макете.
• Версионность — история изменений, в продвинутых тарифах ветвления и слияния.
• Developer Mode — инспекция размеров, отступов, переменных, стилей и кода для Web, iOS и Android.
• Экспорт ассетов и доступ к библиотекам компонентов по ссылке или в пределах рабочей области.

FigJam и Slides

Для стратегических сессий и презентаций Figma предлагает FigJam и слайды.

• FigJam — онлайн-доска для мозговых штурмов, карт опыта, диаграмм и ретроспектив, с доступом по ссылке и шаблонами.
• Slides — создание презентаций на основе макетов и компонентов, единый визуальный язык с продуктовым дизайном.

Инструменты организации макета

Чистая структура ускоряет работу команды и снижает количество ошибок.

• Сетки и направляющие — настройка колонок, рядов, отступов, пиксельная сетка.
• Слои и страницы — понятные названия, группы и иерархия.
• Стили — типографика, цвета, эффекты как единые пресеты.
• Компоненты — повторное использование и массовные правки без ручной рутины.
• Auto Layout и переменные — адаптивность и быстрое переключение тем.

Как начать

Регистрация занимает пару минут, после чего вы сразу попадаете в рабочую область.

1. Нажмите Get started for free, авторизуйтесь по почте или через Google.
2. Ответьте на короткие вопросы о роли и задачах, при необходимости пригласите коллег.
3. Создайте файл New design file и начните с фреймов, сетки и библиотеки стилей.

Плагины и сообщество

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

• Unsplash — быстрый подбор стоковых изображений прямо в макете.
• Magic Cut — автоматическое удаление фона из изображений.
• Charts — генерация диаграмм из данных.
• Table Creator — создание таблиц для интерфейсов и презентаций.
• Mockup — примерка дизайна на реалистичных носителях.

AI в Figma

Искусственный интеллект помогает ускорять рутину и поиск решений. На момент июля 2024 функции находятся в бета-тестировании, доступны не всем и могут работать нестабильно.

• Поиск похожих изображений и макетов внутри команды.
• Автопереименование и упорядочивание слоев по контексту.
• Генерация и замена текстов под задачу и язык.
• Мгновенное удаление фона из изображений.
• Перевод и переформулировка текстов с выбором тона.
• FigJam AI — обобщение, сортировка и визуализация идей в диаграммы.

Часть возможностей AI доступна в Figma Design, FigJam и Figma Slides. По итогам беты может появиться платная модель использования.

Тарифы и цены

Планы отличаются возможностями командной работы, администрированием и разработческими инструментами.

Кому полезна Figma

Инструмент удобен не только дизайнерам — он закрывает потребности всей продуктовой команды.

• Дизайнерам — прототипы, визуальный дизайн, дизайн-системы и иконки.
• Разработчикам — Developer Mode, спецификации, экспорты и переменные как токены.
• Блогерам и SMM — шаблоны для постов, сторис и презентаций.
• Менеджерам — дорожные карты, блок-схемы и диаграммы в FigJam.
• Редакторам — мудборды, схемы и иллюстрации для материалов.

Преимущества

Figma ускоряет командную работу и снижает стоимость согласований.

• Работа в облаке — доступ из любого места, автоматическое сохранение.
• Производительность — достаточно современного браузера, быстрый отклик в типовых проектах.
• Низкий порог входа — понятный интерфейс и горячие клавиши.
• Интерактивные прототипы — удобные презентации заказчикам и тестирование сценариев.
• Плагины и шаблоны — быстрое расширение возможностей под конкретные задачи.
• Кроссплатформенность — браузер плюс приложения для Windows и macOS.

Ограничения

Как и любой профессиональный инструмент, Figma имеет рамки применения.

• Зависимость от интернета — при нестабильной сети работа и синхронизация затруднены.
• Растровое редактирование базовое — для сложной обработки фото потребуется сторонний софт.
• Плагины могут ломаться после обновлений — требуется проверка совместимости.
• Инспекция сложных макетов с перекрытиями слоев иногда требует ручной проверки.
• Типографика покрывает основные потребности — опции тонкой полиграфической верстки ограничены.

Экспорт и форматы

Готовые экраны и ассеты экспортируются в один клик с нужными плотностями и форматами.

• Форматы — PNG, JPG, SVG, PDF для отдельных слоев, компонентов и фреймов.
• Пакетный экспорт — пресеты размеров для разных платформ и плотностей пикселей.
• Экспорт презентаций — кадры в PDF для печати и демонстраций.