Дизайн мобильных приложений в Figma с нуля: пайплайн, гайдлайны и проекты от 50 000 ₽

TL;DR: В 2026 году разработка дизайна мобильного приложения в Figma стоит от 35 000 - 60 000 ₽ за MVP (10-15 экранов) до 100 000 - 250 000 ₽ за полноценный продукт с проработанной дизайн-системой, UI Kit и интерактивным прототипом. Бизнес платит не за «красивые картинки», а за готовность макета к разработке: строгая 8-пиксельная сетка, адаптивный Auto Layout, поддержка темной и светлой темы через Figma Variables, учет зон Safe Area и правильные размеры тач-таргетов (44 pt в iOS, 48 dp в Android).

1. Сколько платят за мобильный дизайн в 2026 году: сегменты и сметы

Мобильный интерфейс оценивается дороже лендинга по простой причине. Здесь глубже логика, больше состояний экранов и жесткие системные ограничения платформ. Ошибка в размере тач-таргета или игнорирование Safe Area сразу бьет по удобству и конверсии.

Реальные вилки цен выглядят так.

Экспресс-редизайн или концепт MVP.
35 000 - 60 000 ₽. 10-15 основных экранов. Срок 7-10 дней. Обычно это проверка гипотезы или быстрый старт для инвесторов.

Полноценный запуск приложения.
80 000 - 150 000 ₽. 25-45 экранов, основные пользовательские сценарии, состояния ошибок и Empty State. Срок 3-4 недели.

Крупный FinTech или E-commerce сервис.
180 000 - 300 000 ₽ и выше. 60+ экранов, кастомные анимации, полноценная дизайн-система на токенах, поддержка темной темы. Срок от 6 недель.

Поэкранная ставка на доработках.
От 2 500 до 5 000 ₽ за сложный интерактивный экран с несколькими состояниями.

Финансовая модель проекта на 90 000 ₽:
Разбивка на три этапа по 30%. Налог самозанятого 4-6% в зависимости от статуса клиента. Подписка Figma Professional около 12-15 долларов в месяц. При комфортной работе в течение трех недель чистая прибыль составляет примерно 82 000 ₽.

2. Разница между iOS и Android: что обязан знать каждый UI-дизайнер

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

Apple Human Interface Guidelines.
Базовый фрейм для современных устройств - 393×852 pt (iPhone 15/16 Pro). Navigation Bar и Tab Bar учитывают Home Bar (общая высота нижней зоны часто 49-83 pt). Сверху нужно оставлять место под Dynamic Island. Системный шрифт - SF Pro. Минимальная интерактивная область - строго 44×44 pt. Иконки внутри тач-таргета обычно 24×24 pt.

Google Material Design 3.
Базовые фреймы - 360×800 dp или 412×915 dp. Используются Top App Bar, Navigation Bar и Floating Action Button. Шрифт - Roboto или Roboto Flex. Минимальная область клика - 48×48 dp.

Полностью разные приложения рисовать не обязательно. При кроссплатформенной разработке (Flutter, React Native) создают единую логику и компоненты, а платформенные отличия закладывают через небольшие вариации отступов, высот баров и поведения навигации. Главное - заранее зафиксировать, какие элементы будут нативными, а какие кастомными.

3. Полный технический пайплайн проектирования с нуля в Figma

Рабочий цикл, который позволяет сдавать макеты без бесконечных правок.

1. Аналитика и User Flow.
В FigJam строится карта путей пользователя. Определяются ключевые User Stories. На этом этапе фиксируются основные сценарии: регистрация, основной action, оплата, профиль, обработка ошибок. Без согласованного флоу дальше двигаться нельзя.

2. Wireframing.
Создаются низкодетализированные черно-белые прототипы. Проверяется кликабельность сценариев и логика переходов. Здесь еще нет цветов и сложных теней - только структура и иерархия.

3. Модульная 8-точечная сетка.
Все отступы, gap и margin кратны 4 или 8 (4, 8, 16, 24, 32, 48). Это базовое правило, которое упрощает верстку и делает интерфейс предсказуемым. Мелкие элементы иногда используют шаг 4, крупные блоки - 8 и выше.

4. Auto Layout.
Это встроенный инструмент фреймов (Shift+A). Карточки, списки и кнопки собираются в режиме Hug Contents, Fill Container или Fixed. Правильный Auto Layout позволяет менять контент без ручного перетаскивания элементов и сразу показывает, как интерфейс поведет себя при разной длине текста.

5. Библиотека компонентов и свойства.
Создаются компоненты с Component Properties: Boolean, Instance Swap, Text. Для кнопок и инпутов делаются Variants (Default, Pressed, Disabled, Loading). Это убирает хаос из файла и ускоряет работу над однотипными экранами.

6. Figma Variables.
Настраиваются цветовые токены и режимы (светлая / темная тема). Строковые переменные помогают готовить интерфейс к мультиязычности. Переключение темы происходит одним кликом и сразу применяется ко всем экранам, которые используют эти переменные.

7. Проектирование всех состояний.
Каждый важный экран имеет несколько состояний: Default, Loading (Skeleton), Empty State с понятным призывом к действию, Error State (нет сети, ошибка авторизации, пустой результат поиска). Без этих состояний разработчик начинает додумывать логику сам.

8. Интерактивное прототипирование.
Используются Smart Animate, симуляция Bottom Sheet, кликабельные инпуты и переходы между основными сценариями. Прототип должен позволять пройти ключевой пользовательский путь без пояснений.

4. Подготовка макета к передаче разработчикам

Режим Dev Mode дает разработчикам возможность инспектировать размеры, отступы и примерно понимать, как элемент будет выглядеть в коде (в том числе ориентиры для SwiftUI и Compose).

Структура файла должна быть понятной с первого взгляда:

• обложка с названием проекта и версией;
• страница User Flow;
• страница UI Kit / Design System;
• чистовые экраны по сценариям;
• архив черновиков.

Иконки экспортируются в чистый SVG без лишних групп и обводок. Растровая графика отдается в 1x, 2x и 3x. Сложные анимации и краевые случаи описываются текстовыми комментариями прямо на полях экрана. Чем меньше устных пояснений требуется на созвоне, тем выше воспринимаемое качество работы.

5. Где искать платежеспособных заказчиков на мобильный дизайн

Прямой аутрич в агентства мобильной разработки работает стабильно. Большинство студий держат внешних UI/UX-дизайнеров на проектной основе и постоянно ищут тех, кто сдает чистые файлы с Auto Layout и Variables.

На биржах (Хабр Фриланс, FL.ru, Kwork) нужно жестко фильтровать бюджет. Запросы «дизайн приложения за 15 000 ₽» обычно означают отсутствие понимания объема работы. Смотрите на проекты с бюджетом от 50 000 ₽ и четким описанием платформы.

Профильные Telegram-сообщества (@uxui_jobs, каналы мобильных разработчиков и продакт-менеджеров) дают более качественные лиды. Там чаще пишут люди, которые уже понимают стоимость нормального мобильного дизайна.

Для быстрого реагирования используйте Telegram-бота @Freelance_Flowbot, который мониторит биржи и каналы по ключевым словам «Figma», «мобильное приложение», «UI/UX», «дизайн приложения» и присылает уведомление в первые минуты.

6. Регламент согласования и защита от бесконечных правок

Проект делится на три этапа:

• Этап 1: User Flow и wireframes - 30% предоплата.
• Этап 2: Концепт главного экрана и UI Kit - 30%.
• Этап 3: Отрисовка всех экранов, состояний и интерактивный прототип - 40%.

После утверждения wireframes изменение структуры экранов на этапе чистового UI оплачивается отдельно (обычно +30% от стоимости затронутых экранов). Это правило прописывается в договоре или в переписке до начала работы.

Исходный файл Figma передается клиенту только после подписания закрывающего акта и полной оплаты. До этого момента клиент работает с прототипом и экспортированными превью.

7. Боевой скрипт отклика на проект

Типичная ошибка новичка:
«Сделаю красивый дизайн приложения, работаю в Figma, посмотрите Behance...»

Такой отклик не отвечает на вопросы заказчика о сроках, платформе и готовности к разработке.

Рабочий шаблон:

«Добрый день.

Изучил задачу. Могу спроектировать мобильное приложение под iOS и Android (или кроссплатформенно под Flutter/React Native).

В работу входит:
• User Flow и wireframes;
• UI Kit на компонентах и Auto Layout;
• все ключевые состояния экранов (Loading, Empty, Error);
• поддержка светлой и темной темы через Variables;
• интерактивный прототип;
• подготовка файла к Dev Mode.

Ориентировочный объем: [число] экранов.
Срок: [срок].
Стоимость: [сумма] ₽ (три этапа оплаты).

В портфолио есть близкий по сложности кейс: [ссылка].
Готов обсудить детали и приступить после предоплаты первого этапа.»

Текст показывает понимание процесса и сразу задает рамки.

8. Часто задаваемые вопросы (FAQ)

Нужно ли дизайнеру уметь программировать на Swift или Kotlin?
Нет. Достаточно понимать ограничения платформ, размеры тач-таргетов, поведение системных баров и уметь готовить файл так, чтобы разработчик тратил минимум времени на уточнения. Знание основ верстки помогает, но не является обязательным.

Как создать сильное мобильное портфолио без реальных заказчиков?
Взять существующее приложение с слабым UX, сделать редизайн 8-12 ключевых экранов с полным соблюдением гайдлайнов, Auto Layout, Variables и всеми состояниями. Оформить кейс с User Flow, обоснованием решений и интерактивным прототипом. Один такой качественный кейс работает лучше десяти разрозненных красивых картинок.

Как тестировать прототипы на реальном смартфоне?
Через Figma Mirror. Прототип открывается на телефоне, и можно проверять размеры тач-таргетов, читаемость текста и удобство жестов в реальных условиях. Это обязательный этап перед сдачей.

Что делать, если заказчик требует «сделайте как в Тинькофф, но за 20 000 ₽»?
Честно озвучить объем. Приложение уровня Тинькофф содержит сотни экранов и зрелую дизайн-систему. Предложить реалистичный MVP на 12-15 экранов с основными сценариями и объяснить, почему полноценная копия стоит в разы дороже. Если клиент настаивает на низкой цене - отказаться. Такие проекты почти всегда заканчиваются конфликтом.

Мобильный дизайн в Figma в 2026 году остается одной из самых понятных и высокооплачиваемых ниш для UI/UX-специалиста. Заказчик платит за макет, который можно сразу отдавать в разработку: с правильной сеткой, Auto Layout, переменными, всеми состояниями и учетом платформенных ограничений. Тот, кто закрывает полный пайплайн от User Flow до Dev Mode, стабильно берет проекты от 50 000 ₽ и выше.