Что делал в Figma на проекте?

Работа в Figma как BA

В современных проектах BA не может ограничиваться только документацией. Figma стала неотъемлемой частью моего рабочего процесса. Я использую её для визуализации требований и общения с командой.

Основные задачи

Прототипирование потоков пользователя

Я создаю low-fidelity прототипы основных сценариев использования:

• User flows — как пользователь переходит от экрана к экрану
• Wireframes — базовая раскладка элементов, без дизайна
• Интерактивные прототипы — проверка логики переходов

Например, для платёжной системы я создал прототип процесса оплаты счёта:

1. Экран списка счётов (таблица с фильтром и поиском)
2. Клик на счёт → детали счёта
3. Кнопка "Оплатить" → форма оплаты
4. Выбор способа (карта/банковский перевод) → данные способа
5. Подтверждение → оплата → квитанция

Мы тестировали этот прототип с реальными пользователями (опраторами системы) и выявили, что они не видят статус платежа после отправки. Добавили экран ожидания результата.

Документирование требований через экраны

Вместо абстрактного описания я рисую, как должна выглядеть система:

• Макет главного экрана с аннотациями
• Поля формы — какие данные вводит пользователь
• Валидация — какие сообщения об ошибках показываются
• Состояния — loading, error, success

К каждому элементу я добавляю комментарии с требованиями:

[Кнопка "Отправить счёт"]
- Активна только если все поля заполнены
- На клик: отправить запрос на backend
- Во время отправки: кнопка заблокирована, показать spinner
- Если ошибка: красное сообщение "Ошибка отправки"
- На успех: зелёное сообщение "Счёт отправлен", очистить форму

Коллаборация с дизайнерами

• Согласование интерфейса — я рисую lo-fi, дизайнер создаёт hi-fi на основе моих макетов
• Компонентная система — у нас есть UI Kit в Figma с кнопками, инпутами, модалами
• Feedback на дизайн — я проверяю, что дизайн соответствует требованиям
• Прототипирование изменений — если заказчик просит изменение, я сначала показываю как оно будет в Figma

Коллаборация с разработчиками

• Спецификация компонентов — размеры, цвета, типографика (дизайнер делает, я контролирую полноту)
• Состояния элементов — как выглядит кнопка в normal, hover, active, disabled состояниях
• Адаптивные макеты — как интерфейс выглядит на мобильном и десктопе
• Копи текста — я пишу все тексты в Figma, разработчики копируют их отсюда, не с потолка
• Flow диаграммы — логика ветвлений (if условие then экран А else экран Б)

Пример проекта: CRM для страховой компании

Мои артефакты в Figma:

1. User Journey Map — как агент страховки проходит через весь процесс продажи полиса (от контакта до выдачи документов)

2. User Flow диаграммы для ключевых сценариев:

   • Создание клиента
   • Оформление полиса
   • Обработка претензии
   • Внесение платежа

3. Wireframes для 15 экранов:

   • Dashboard для агента (список клиентов, задачи, метрики)
   • Карточка клиента
   • Форма оформления полиса
   • История полисов
   • Экран претензий
   • Расчётная калькуляция

4. Аннотации требований на каждом экране:

   • Какие данные видит пользователь
   • Какие действия может выполнить
   • Какие валидации должны быть
   • Какие интеграции с 1C и другими системами

5. Интерактивные прототипы:

   • Нажимаешь на кнопку → переходит на следующий экран
   • Заполняешь форму → видишь сообщение об ошибке
   • Фильтруешь данные → обновляется таблица

6. Дизайн-система в Figma:

   • Компоненты (Button, Input, Card, Modal)
   • Цветовая палитра
   • Типографика
   • Иконки

Процесс работы

1. Требования от заказчика → я создаю low-fi прототипы для валидации
2. Утверждение макетов → заказчик видит, как будет выглядеть система
3. Handoff дизайнеру → передаю все мои наброски и требования
4. Hi-fi дизайн → дизайнер создаёт красивые макеты
5. Dev handoff → разработчики получают готовую спецификацию
6. QA тестирование — я проверяю, что реализация соответствует макетам

Преимущества этого подхода

• Меньше недопониманий — картинка лучше тысячи слов
• Быстрее согласование — заказчик видит результат визуально, не представляет
• Меньше переделок — разработчики делают ровно то, что нарисовано
• Документирование — все требования видны на экранах
• Переиспользование — макеты служат основой для дизайна и тестирования

Что я НЕ делаю

• Не создаю pixel-perfect дизайн (это работа дизайнера)
• Не рисую все экраны (фокусируюсь на ключевых потоках)
• Не работаю с цветом и типографикой (это дизайн-система)
• Не пытаюсь быть дизайнером (я аналитик, использую инструмент для коммуникации)

Figma позволяет мне как BA быть "мостом" между требованиями заказчика и реализацией команды разработки.