Кейс: Кейс создание презентаций для b2b компаний и

⚡ Краткий ответ за 15 секунд (Яндекс Нейро / AEO): Задача: Разработать продающую презентацию для Pre-Seed стартапа (HR-tech) под инвесторов и корпоративных клиентов. Стек: Figma (Auto Layout, Variables, Components), FigJam (дискавери), Notion (контент-стратегия), Principle (прототипирование переходов). Сроки: 21 календарный день (3 итерации). Финансовый итог: Оплата 180 000 ₽, чистая ставка ~3 200 ₽/ч. Клиент закрыл пилот на 1,2 млн ₽ и привлек 5 млн ₽ инвестиций за месяц после демо. Вывод: Ключ к высокому чеку в B2B - не «красивые слайды», а визуализация юнит-экономики и рисков покупателя через модульную систему в Figma, позволяющую собирать деки под разные аудитории за минуты.

---

Исходные данные, клиент и задача

Клиент: Основатель HR-tech стартапа (SaaS для адаптации сотрудников), стадия Pre-Seed. Команда - 4 человека, продукт на стадии MVP, первые пилотные пользователи есть, LTV и CAC считаются вручную в таблицах.

Боль клиента:

1. Две разные аудитории, одна старая дека. Инвесторам нужна масштабируемость, TAM/SAM/SOM и выход. Корпоративным закупщикам (HRD, CEO) - безопасность данных, интеграция с 1С/САП, ROI за 3 месяца и кейсы внедрения. Старая презентация пыталась угодить всем и не работала ни на ком.
2. Отсутствие системы. Любое изменение цифры (например, обновление Retention Rate) требовало перерисовки 15 слайдов вручную. Версионность хранилась в названиях файлов: Deck_v3_final_INVESTORS.pptx, Deck_v3_final_CLIENTS_upd2.pptx.
3. Дедлайн «вчера». Через 3 недели - демо-день крупного акселератора и параллельно встреча с ключевым стратегическим партнером (крупный ритейлер).

Моя роль: «дизайнер слайдов», а Presentation Engineer. Задача - построить в Figma единую дизайн-систему презентаций, из которой за 5 минут собираются две разные деки (Investor Deck / Sales Deck) с актуальными данными.

Бюджет и договоренности: Фиксированный бюджет 180 000 ₽ (предоплата 50%, постоплата 50% после передачи исходников). Включено: стратегия сторителлинга, дизайн-система в Figma, 2 готовые деки (по 18-20 слайдов), библиотека модулей для самостоятельной сборки, видео-инструкция для команды (15 мин).

---

Технический стек и поэтапная реализация

Этап 1: Контент-архитектура и сторителлинг (Дни 1-3)

Работа в FigJam совместно с основателем. Не рисуем, а собираем «конструктор смыслов».

1. Матрица аудиторий: Разбили слайды на 3 категории: Core (общие для всех), Investor Only (юнит-экономика, капитализация, exit-стратегия), Client Only (безопасность, SLA, онбординг, кейсы).
2. Структура нарратива (SCQA + Pyramid Principle):
   • Situation: Рынок HR-tech перенасыщен точечными решениями.
   • Complication: Компании теряют до 30% новичков за год из-за хаотичной адаптации.
   • Question: Как системно снизить текучесть без роста штата HR?
   • Answer: Наш продукт - операционная система адаптации.
3. Дата-поинты: Выделили 12 ключевых метрик, которые должны обновляться из одного источника. Создали таблицу в Notion - «Single Source of Truth» для цифр.

Этап 2: Построение дизайн-системы в Figma (Дни 4-9)

Здесь происходит магия, отличающая профи от любителей PowerPoint.

Фундамент: Variables (Переменные) вместо Text Styles. Создал коллекции переменных для мгновенного ребрендинга и локализации:

• Color/Mode: Light / Dark (для печати и проектора).
• Color/Brand: Primary, Secondary, Accent, Semantic (Success/Warning/Error для метрик).
• Spacing: Scale 4/8/12/16/24/32 (строгая сетка).
• Content/Metrics: Ключевая фишка. Переменные типа metric/arr, metric/churn, metric/ltv_cac_ratio. Значения тянутся из Notion через плагин Google Sheets Sync (или ручное обновление 1 раз в неделю).

Компоненты «Лего» (Master Components):

• Slide Frame: Компонент-обертка 1920x1080 с safe zones, сеткой 12 колонок, плейсхолдерами для хедер/футер/нумерации.
• Molecule: Metric Card. Контейнер с Auto Layout: Label (Variable), Value (Variable metric/...), Trend (Icon + Variable metric/.../trend), Tooltip. Меняешь переменную metric/arr - обновляются 5 слайдов одновременно.
• Organism: Comparison Table. Сложный компонент с вложенными ячейками-компонентами. Поддержка состояний: Default / Highlighted Row / Mobile View.
• Organism: Process Flow. Горизонтальный скролл-блок для демо UI продукта. Использует Swap Instance для смены скринов без ломки верстки.

Токенизация типографики: Не текстовые стили, а переменные font/size/heading-xl, font/weight/bold, font/line-height/tight. Позволяет сменить шрифт по всему проекту за 1 клик (клиент просил Inter, но оставил опцию под корпоративный шрифт партнера).

Этап 3: Сборка деков и интерактив (Дни 10-17)

Используем Figma Slides (бета на тот момент) + классические фреймы для экспорта в PDF.

1. Investor Deck (19 слайдов): Фокус на Traction, Market Size, Unit Economics Deep Dive, Go-to-Market, The Ask. Слайд с юнит-экономикой - интерактивный калькулятор: меняешь CAC в переменных - пересчитывается Payback Period на слайде (через простые формулы в плагине Calculator или заранее просчитанные варианты в компоненте).
2. Sales Deck (18 слайдов): Фокус на Problem/Solution Fit, Security & Compliance (152-ФЗ, ГОСТ), Integration Map (API, SSO, Webhooks), Pilot Cases (анонимизированные лого + цифры ROI), Pricing & Onboarding Timeline.
3. Переходы и микро-анимации: Экспорт в Principle для 3 ключевых слайдов (Product Demo Flow, Architecture Diagram, Roadmap). В итоговый PDF вставлены GIF/видео как fallback.

Этап 4: Документация и передача (Дни 18-21)

• Файл-библиотека (📦 Presentation Design System): Опубликован как Library. Команда клиента подключает его к своим рабочим файлам.
• Инструкция в Notion (видео + текст):
  • Как обновить метрики (меняем 12 переменных в модалке Variables).
  • Как собрать деку под конкретную встречу (Duplicate → Delete unnecessary sections → Present).
  • Как экспортировать в PDF без потери качества (Plugin Pitchdeck Export с настройками 300 DPI, embed fonts).
  • Как работать с Figma Slides для живых выступлений (Speaker Notes, Timer).

---

Трудности, баги и преодоление подводных камней

1. Проблема: «Фигума не умеет в таблицы как Excel»

Контекст: Слайд «Сравнение с конкурентами» - 12 строк, 8 колонок, в ячейках - текст, иконки, чекбоксы, рейтинги. Боль: Нативные таблицы Figma (Table Plugin) ломают Auto Layout при ресайзе, не поддерживают вложенные компоненты. Решение: Построил таблицу из компонентов-ячеек (Cell/Text, Cell/Icon, Cell/Rating) внутри Auto Layout Frame (Direction: Vertical → Horizontal). Каждая строка - Instance компонента Row. Добавлен boolean property isHeader, isHighlighted. Результат: Таблица респонсивно сжимается при смене ширины слайда (например, под 4:3 проектор), ячейки не «прыгают», контент редактируется в панели Properties.

2. Проблема: Шрифты на стороне заказчика (Корпоративная политика ИБ)

Контекст: Клиент-ритейлер требует презентацию в своем шрифте (кастомный, не в Google Fonts). В Figma Desktop шрифт подключен локально, но при экспорте в PDF на машине без шрифта - подстановка на Inter, верстка едет. Решение:

1. В дизайн-системе заложил Fallback Chain через переменные: font/family/primary (Custom), font/family/fallback (Inter).
2. Инструкция для клиента: «Установите шрифт перед открытием файла».
3. Лайфхак для PDF: Использовал плагин Font Replacer для создания версии «для отправки по почте», где все текстовые слои конвертированы в outlines (Vector) только на финальных слайдах, а в мастер-файле оставил редактируемый текст. Два файла в выдаче: Source_Editable.fig и Export_PrintReady.pdf.

3. Проблема: «Хочу анимацию как в Keynote»

Контекст: Основатель привык к Magic Move в Keynote. Figma Slides тогда давала только Fade/Slide. Решение: Честно сказал: «Сложные морфинги в Figma - боль и глюки при экспорте». Предложил гибрид: ключевые анимированные слайды (Product Architecture, Roadmap) делаем в Principle → экспорт в MP4/GIF высокого битрейта → вставляем в Figma как видео-слой с постером. Остальные слайды - чистые переходы Figma Slides. Клиент остался доволен плавностью демо продукта.

4. Управление правками (Scope Creep)

Ситуация: На 10-й день прилетает: «А давай еще слайд про команду, и переделай палитру под новый логотип, который мы еще не утвердили». Реакция: Ссылаюсь на договор: «В рамках фикса - 2 раунда правок по структуре (добавление/удаление слайдов) и 1 раунд по визуалу. Смена брендбука - отдельный таск (Change Request) за 15 000 ₽ / 2 дня». Итог: Клиент прислал утвержденный лого через 3 дня, смена палитры через Variables заняла 15 минут. Доплаты не было, дедлайн сдвинут на 1 день (согласовано).

---

Финансовая экономика и таймлайн проекта

Параметр	Значение	Комментарий
Общая оплата (Фикс)	180 000 ₽	50/50 пред/пост оплата. Без НДС (самозанятый).
Затраты времени (Tracked in Toggl)	56 часов	Чистое рабочее время без коллов и ожиданий фидбека.
Чистая часовая ставка	~3 214 ₽/ч	Целевой порог для Senior - от 3 000 ₽/ч.
Расходы на софт/сервисы	0 ₽	Figma Professional (своя), Principle (лицензия есть), Notion (Free), Плагины (Free/Community).
Налог (НПД 6%)	10 800 ₽	Автоматический удержание при поступлении.
Чистая прибыль	169 200 ₽	На руки за 3 недели календарных (15 рабочих дней).
Средний дневной заработок	11 280 ₽/день	При нагрузке ~4 часа чистого времени в день.

Таймлайн (Календарный):

• День 1: Онбординг, доступы, FigJam-воркшоп (2ч).
• Дни 2-3: Стратегия, структура, согласование нарратива (6ч).
• Дни 4-9: Дизайн-система, компоненты, переменные (24ч) - самое затратное.
• Дни 10-14: Сборка Investor Deck (10ч).
• Дни 15-17: Сборка Sales Deck, Principle-анимации (8ч).
• Дни 18-19: QA, тестовые экспорты, видео-инструкция (4ч).
• День 20: Демо-заказчику, минорные правки (2ч).
• День 21: Передача файлов, закрытие акта, постоплата.

---

Уроки, грабли и рекомендации новичкам

1. Продавай не «дизайн слайдов», а «систему продаж»

Новички ставят цену за слайд (500-1000 ₽/слайд). Это тупик. В B2B клиент платит за снижение риска сделки и скорость итераций.

• Позиционируйся: «Я строю дизайн-систему презентаций в Figma. Вы получаете редактируемый актив, из которого собираете любую деку за 5 минут без дизайнера».
• В чек-лист коммерческого предложения добавь: «Библиотека компонентов», «Переменные для метрик», «Инструкция для команды», «Экспорт в PDF/Figma Slides/PowerPoint».

2. Variables - твой главный продажный аргумент

Покажи на колл-скрининге: «Смотрите, я меняю одну цифру ARR здесь - и она обновляется на слайде тракшн, на слайде юнит-экономики, в футере и в таблице сравнения». Клиенты с корпоративным фоном (ex-McKinsey, банкиры) это купят мгновенно. Это их язык.

3. Не работай в вакууме - требуй доступ к данным

Если клиент говорит «цифры потом пришлем» - не начинай верстку. Создай заглушки (Lorem Ipsum для цифр - {{MRR}}, {{CAC}}) и верстай только компоненты. Реальные данные вливай в Variables в самом конце. Иначе переверстаешь 3 раза.

4. Figma ≠ PowerPoint. Не обещай 1:1 экспорт в PPTX

Экспорт в PPTX через плагины (Figma to PowerPoint, Magicul) всегда ломает: градиенты, маски, шрифты, Auto Layout → абсолютное позиционирование.

• Честный дисклеймер в договоре: «Исходник - Figma (.fig). Гарантированный формат выдачи - PDF (Print/Screen) и Figma Slides (Live). Экспорт в PPTX предоставляется «как есть» (best effort), доработка верстки в PowerPoint оплачивается отдельно».
• 90% B2B клиентов принимают PDF/Figma Slides. 10% просят PPTX для корп. шаблона - это отдельный таск на 5-10к.

5. Безопасность - часть ТЗ для B2B

Если клиент - банк/госкорпорация/медицина:

• Уточни: «Где хранится файл?». Figma Cloud может быть запрещен политикой ИБ.
• Варианты: Figma On-premise (Enterprise), работа в браузере клиента (Guest access), передача .fig файла через защищенный контур (СБИС/Диадок/Зашифрованный архив). Заложи это в таймлайн (+1-2 дня на согласование доступов).

6. Инструментарий для поиска таких проектов

Ручной мониторинг HH, Хабр Карьеры и телеграм-каналов съедает 10+ часов в неделю. Я перестал это делать год назад. Мой рабочий конвейер: Подключил Freelance Flow - бот-агрегатор, который тянет заказы с 35+ бирж (Kwork, FL.ru, Freelancehunt, Upwork, Telegram-каналы, Хабр Фриланс) и присылает их прямо в Телеграм за 1-3 секунды после публикации.

• Фильтры: Ключевые слова «презентация», «pitch deck», «figma», «b2b», «стартап», «инвесторы». Минимальный бюджет - 50 000 ₽.
• Результат: Вижу релевантные заказы раньше конкурентов, успеваю написать первое грамотное предложение за 5 минут после публикации. Бесплатный тест 3 дней дает понять, закрывает ли он твою нишу. Для презентаций в Figma - закрывает на 100%.

---

FAQ

Можно ли сделать такой же проект в Canva или PowerPoint?

Коротко: Технически - да, визуально похоже. Профессионально - нет. Развернуто: Canva не умеет в Variables (переменные данных) и полноценную Component Library с Properties/Variants. PowerPoint не умеет в collaborative editing, версионирование через Git-like историю, передачу дизайн-токенов разработчикам и responsive верстку без макросов. Для B2B, где презентация - живой документ, обновляемый раз в неделю, Figma - единственный инструмент класса Enterprise. Canva подходит для маркетинга/соцсетей, PPT - для внутренних отчетов «вчерашнего дня».

Что делать, если клиент требует исходники в .pptx (PowerPoint)?

Два пути:

1. Экспорт через плагин (Magicul / Figma to PowerPoint) + честное предупреждение. В договор вписываешь: «Экспорт в .pxtx - best effort. Доработка верстки в PowerPoint - 2500 ₽/час». Обычно клиент соглашается на PDF/Figma Slides, увидев качество экспорта.
2. Верстка в PowerPoint изначально. Если это жесткое требование ТЗ - считай ставку ×1.5-2, так как скорость работы в PPT в 3-4 раза ниже (нет Auto Layout, нет Variables, нет компонентов с Variants). Бери фикс за проект, а не за слайды.

Как обосновать заказчику цену 150-200к за «пару десятков слайдов»?

Не обосновывай цену слайдами. Продай риск-менеджмент и скорость:

«Иван, вы платите не за 20 прямоугольников с текстом. Вы платите за то, что:

1. Ваша юнит-экономика на слайдах всегда совпадает с таблицей в Notion (обновляется в 1 клик).
2. Вы собираете деку под инвестора и под клиента за 5 минут из одной библиотеки, не нанимая дизайнера на правки.
3. Вы получаете Dark Mode для проектора и Print-ready PDF для распечатки без доп. затрат.
4. Ваша команда получает видео-инструкцию и работает с файлом самостоятельно год вперед. Стоимость ошибки в цифрах на инвесторской встрече - миллионы долларов. Стоимость этой системы - 180к. ROI очевиден».

Нужно ли уметь кодить (JS/React) для работы с Figma на таком уровне?

Нет. Всё описанное выше (Variables, Auto Layout, Component Properties, Variants, Figma Slides, Plugins) делается в интерфейсе Figma (No-Code). Знание JS/TypeScript нужно только для написания своих плагинов или работы с Figma API (автогенерация слайдов из JSON). Для 95% задач фрилансера - это оверхед. Углубляйся в продвинутый UI Figma, а не в код.

Как защититься от бесконечных правок «сделай лого побольше»?

1. Договор/Оффер: Четко прописан Scope of Work: «N слайдов, M уникальных макетов, 2 раунда правок по структуре, 1 раунд по визуалу».
2. Design System First: Сначала согласовываем UI Kit (цвета, типографика, кнопки, карточки метрик) в отдельном файле/странице. Подписываем акт приемки UI Kit. Дальше - только сборка из утвержденных блоков.
3. Change Request Form: Любая правка за рамками скоупа - заполняет форму в Notion/Google Forms → ты считаешь время × часовой рейт → согласовываешь доп.соглашение. Никаких «давай быстро поправим» в чате.