Что использовал для создания компонента в Figma?

Работа с Figma компонентами

Это хороший вопрос — он показывает что я не просто писатель requirements, но и вовлечён в актуальный процесс дизайна. Хотя BA это не дизайнер, понимание Figma критично для современного аналитика.

Контекст: почему BA нужна Figma?

В моей практике я использую Figma для:

• Валидации требований — проверить что дизайн соответствует требованиям
• Документирования — показать разработчикам как должно работать
• Коммуникации — обсудить UI/UX с дизайнерами
• Прототипирования — быстро показать идею стейкхолдерам

Но я не создаю полноценные дизайны — это работа UX/UI дизайнера. Я создаю простые компоненты для уточнения требований.

Инструменты в Figma которые я использую

1. Фреймы (Frames)

Фрейм — это контейнер для компонента. Я создаю отдельный фрейм для каждого варианта:

Frame: "Button - Primary - Default"
  └─ Rectangle (background)
  └─ Text (label)

Почему frames? Потому что они:

• Автоматически масштабируются
• Можно легко экспортировать
• Легко выровнять друг относительно друга

2. Компоненты (Components)

Это переиспользуемые элементы. Когда я создаю компонент (правый клик → Create component):

• Он получает фиолетовый ромб
• Я могу создать варианты (variants)
• Изменение главного компонента обновляет все копии

Пример компонента Button:

Button (главный компонент)
  ├─ Variant: Type = Primary / Secondary / Tertiary
  ├─ Variant: Size = Small / Medium / Large
  ├─ Variant: State = Default / Hover / Disabled

Так я создаю 9 вариантов кнопки в одном компоненте.

3. Auto Layout

Это мощный инструмент для создания отзывчивых компонентов:

Button (Frame с Auto Layout)
  ├─ Direction: Horizontal
  ├─ Gap: 8px (между иконкой и текстом)
  ├─ Padding: 12px 16px
  └─ Alignment: Center

Eсли я изменю текст — кнопка автоматически расширится. Не нужно вручную ресайзить.

4. Constraints

Это определяет как компонент должен масштабироваться:

Text (внутри кнопки):
  ├─ Horizontal: Fill (растягивается по ширине)
  └─ Vertical: Center (остаётся по центру)

Реальный пример: создание компонента Price Badge

Образ: стейкхолдер просит отобразить цену со скидкой. Нужно быстро показать как это может выглядеть.

Шаг 1: Создаю фрейм

Frame: "Price Badge - Variant 1"
  Width: Auto
  Height: 32px
  Background: rgba(255, 235, 59, 0.1)  // yellow background
  Border Radius: 4px
  Padding: 8px 12px

Шаг 2: Добавляю текст

Text: "$99.99"
  Font: Inter
  Size: 14px
  Weight: 600
  Color: #F59E0B  // Amber

Text: "was $199.99"
  Font: Inter
  Size: 12px
  Weight: 400
  Color: #9CA3AF  // Gray
  TextDecoration: line-through

Шаг 3: Группирую и создаю компонент

Select all → Right click → Create component
Name it: "PriceBadge"

Шаг 4: Добавляю варианты

Right click component → Add boolean property "With Strikethrough"
Right click component → Add variant for "Size: Small / Medium / Large"

Теперь я могу:

• Показать как выглядит с разными ценами
• Показать разные размеры
• Показать с зачёркиванием и без

Шаг 5: Документирую

Оставляю комментарий:

💬 BA Comment:
Этот компонент используется для отображения скидок.
- Фон: жёлтый (warning color)
- Зачёркивание: старая цена всегда зачёркивается
- Размер: зависит от контекста (в карточке товара = Medium, в списке = Small)
- Требование: обязательно показывать процент скидки в title при hover

Компоненты которые я часто создаю

1. Кнопка (Button)

Button
  ├─ Type: Primary / Secondary / Danger
  ├─ Size: Small / Medium / Large
  ├─ State: Default / Hover / Disabled / Loading
  └─ Icon: With / Without

2. Карточка (Card)

Card
  ├─ Variant: Product / Article / Review
  ├─ Has Image: Yes / No
  ├─ Has Description: Yes / No
  └─ Interactive: Yes / No

3. Инпут (Input Field)

Input
  ├─ Type: Text / Email / Password / Search
  ├─ State: Default / Focused / Error / Disabled
  ├─ With Icon: Yes / No
  └─ With Label: Yes / No

Когда я делегирую работу дизайнеру

Я создаю простые wireframes и компоненты, но для полноценного дизайна работаю с дизайнером:

Моя роль                         | Роль дизайнера
─────────────────────────────────┼──────────────────────────
Валидация требований             | Красивый дизайн
Удобство использования           | Визуальная иерархия
Учёт разных state'ов             | Animation & microinteraction
Документирование для разработки  | Брендинг и стиль

Лучшие практики в Figma

1. Именование

❌ Плохо: Button, Button Copy, Button Copy 1
✅ Хорошо: Button / Primary / Medium / Default
         Button / Secondary / Small / Hover

2. Организация

✅ Структура папок:
Components/
  ├─ Buttons/
  │  ├─ Primary
  │  ├─ Secondary
  │  └─ Tertiary
  ├─ Cards/
  ├─ Forms/
  └─ Navigation/

3. Auto Layout everywhere

✅ Используй Auto Layout для:
- Кнопок с иконками
- Списков элементов
- Headers (логотип + навигация)
- Модальных окон

4. Цветовые переменные

✅ Правильно:
Color: primary-500 (переменная)
Color: error-600 (переменная)

❌ Неправильно:
Color: #FF6B6B (hardcode)
Color: #1E40AF (hardcode)

Почему это важно для BA?

Понимание Figma делает меня лучшим аналитиком:

1. Я могу быстро валидировать идеи — не нужно ждать дизайнера
2. Я понимаю ограничения дизайна — не буду требовать невозможное
3. Я могу общаться с дизайнерами — на их языке, не через переводчика
4. Я создаю лучшую документацию — с примерами из реального UI
5. Я вижу corner cases — что если текст будет длинный? Картинка не загружена?

Вывод

Я не создаю финальные дизайны в Figma — это работа дизайнера. Но я создаю:

• Компоненты для валидации идей
• Wireframes для обсуждения структуры
• Примеры для документирования требований
• Варианты для выявления corner cases

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