Figma: инструмент для сотрудничества дизайнеров и разработчиков

Почему большинство дизайнеров работают в Figma? Эта платформа изменила общий концепт. Теперь команды могут работать над проектами одновременно в облачном редакторе.

Figma — что это? Это инструмент, который позволяет редактировать один макет одновременно, как в Google Docs. Сейчас ею пользуется более 10 миллионов специалистов, компания занимает 40,65% рынка.

В этой статье расскажем, что такое Figma как работать в программе, какие преимущества она дает дизайнерам и разработчикам, и почему именно этот инструмент избрали ведущие IT-компании мира.

Что такое Figma и чем она отличается от аналогов

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

Чем Figma отличается от Photoshop или Sketch? Photoshop создавался для отделки фото, дизайн интерфейсов там, «сбоку». Sketch — файл лежит на Mac, поделиться сложнее, доступный только для macOS.

У Figma все хранится в облаке, все работают одновременно, нет проблем с версиями файлов.

Мы сделали вам простую таблицу сравнения основных редакторов.

Figma не привязывает вас к конкретной операционной системе и позволяет работать откуда угодно. Это ее главное преимущество. Но есть и другие. 

Основные преимущества Figma

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

Один наш клиент рассказал, как их команда работала над редизайном сайта. Дизайнер в Киеве рисовал компоненты, разработчик во Львове сразу смотрел спецификации, а менеджер из Одессы комментировал изменения. Все это — в реальном времени, в одном файле.

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

Облачное хранение — еще одна сильная сторона. Файлы автоматически сохраняются в облаке. Ваш компьютер сломался? Не проблема. Заходите с другого устройства и все проекты на месте. Фигма — программа, которая ведет историю версий, всегда можно откатиться к предыдущей версии файла.

Кроссплатформенность. Работайте с Mac, Windows или даже с Linux через браузер.

И еще «ценовой момент». Бесплатная версия Figma позволяет создавать огромное количество файлов. Платить нужно только если вам нужна командная работа более трех человек или дополнительные фичи. Платные тарифы начинаются с $15 на пользователя в месяц для Professional плана и $45 для Organization.

Figma: как работать, первые шаги  

Регистрация занимает минуту. Заходите на figma.com, вводите почту и уже можете создавать первый проект. Можно войти даже через Google или Apple ID.

Создание проекта:

1. Открываем Figma.
2. Кликаем "New Design File".
3. Создаем фрейм (это как артборд в других приложениях).
4. Начинаем рисовать.

Фреймы — основа всего. Это контейнеры для вашего дизайна. Можно создать фрейм под экраны iPhone, iPad, Desktop или любой другой размер.

Компоненты — это элементы, которые можно использовать многократно. Сделали кнопку один раз, превратили ее в компонент и используйте везде. Изменили стиль компонента в одном месте? Он автоматически обновляется во всех местах проекта.

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

Кстати, у Figma очень удобные шрифты. Платформа имеет доступ к Google Fonts. Стили текста (Text Styles) позволяют сохранять настройки типографики. Создали стиль для заголовка H1 один раз — используйте везде. 

Основные функции Figma

Что можно сделать в Фигме? Если коротко, почти все, что нужно для дизайна интерфейсов:

• Дизайн UI/UX. Рисуйте экраны мобильных приложений, веб-сайтов, административных панелей. 

• Прототипирование мобильных приложений и сайтов. Создавайте интерактивные макеты. Клиент может потыкать кнопки, пройтись по меню, почувствовать, как будет работать будущий продукт.

• Работа над дизайн-системами. Большие компании создают библиотеки компонентов. Так гораздо проще поддерживать единый стиль во всех продуктах.

• Подготовка макетов для верстки. Разработчики могут заходить в макет, смотреть размеры элементов, отступы, цвета, шрифты. Есть даже функция Auto Layout, которая автоматически настраивает адаптивность элементов. Как Flexbox в CSS, только визуально.

Figma для разработчиков

Фигма — это не только о дизайнерах. Как, например, они передают макеты разработчикам? Просто дают ссылку. Разработчик открывает файл, выбирает элемент и видит всю техническую информацию: размеры, цвета в hex, отступы, CSS-свойства.

Команда стартапа Kasta говорит, что переход на Figma сократил время согласования макетов почти вдвое. Ajax Systems снизили время согласования дизайна с двух недель до трех дней.

Есть функция "Inspect" — специальный режим для девелоперов с CSS-кодом и возможностью экспорта. Экспорт элементов в разных форматах: PNG, JPG, SVG, PDF с множителями (@1x, @2x, @3x).

Плагины расширяют возможности: Content Reel для создания контента, Stark для проверки контраста цветов. Комментарии ускоряют коммуникацию — разработчик добавляет комментарий прямо на макет, дизайнер получает уведомление. 

Figma API: расширение возможностей

Что такое Figma API? Это интерфейс, позволяющий программно работать с файлами Figma. Звучит сложно? На самом деле, это простой способ автоматизировать рутинные операции.

Figma API дает возможность:

• Автоматически экспортировать изображения из макетов.

• Создавать интеграции с другими инструментами (Jira, Notion, Slack).

• Разрабатывать свои плагины для команды.

• Извлекать данные из дизайн-систем для документации.

Как подключиться к API? Вы идете в настройку аккаунта, генерируете токен доступа и используете его в запросах. Документация достаточно подробная, с примерами кода на JavaScript, Python, Ruby. 

Вывод

Figma — это синхронная работа команды, кроссплатформенность, бесплатный тариф, экосистема плагинов и AI-функции.

Хотите ввести Figma в свою команду или создать профессиональный дизайн продукта? Обратитесь в нашу команду — мы поможем настроить рабочие процессы, создать дизайн-систему и научить вашу команду эффективно работать с инструментом.

FAQ