Макет приложения в Figma и перенос в FireMonkey
Рабочий процесс кроссплатформенной разработки часто строится вокруг связки визуального прототипирования и последующей реализации интерфейса на целевой платформе. Для проектов на Delphi и FireMonkey первый шаг обычно происходит в Figma: дизайнер собирает экраны, компоненты и состояния, а затем разработчик переносит макет в код, сохраняя пропорции, отступы и логику взаимодействия. Такой подход помогает сократить разрыв между дизайн-командой и инженерной частью, особенно когда приложение должно одинаково выглядеть на Android, iOS, Windows и macOS.
Перенос графического проекта в FireMonkey имеет свои особенности: фреймворк использует собственные контролы, стили и механизм тем, поэтому прямого «импорта» макета не существует. Тем не менее при грамотной подготовке файла в Figma большинство экранов пересобирается в редакторе форм Delphi за считанные часы. Ниже разобраны ключевые этапы этого пути — от проектирования слоёв до проверки результата на реальных устройствах.
| Элемент интерфейса | Реализация в Figma | Аналог в FireMonkey |
|---|---|---|
| Прямоугольный блок с фоном | Frame + Fill | TRectangle или TLayout с Fill |
| Текстовая метка | Text-объект со стилями | TLabel или TText |
| Кнопка с состояниями | Component с variants | TButton + TStyleBook |
| Графический ресурс | Image (PNG/SVG) | TImage или MultiResBitmap |
| Список с прокруткой | Auto Layout + List | TListView / TScrollBox |
Проектирование слоёв и экранов в Figma
Перед тем как экспортировать графику, полезно привести файл к структуре, удобной именно программисту. Все экраны размещаются на отдельных артбордах фиксированного размера, кратного типовым разрешениям устройств: например, 360×800 для Android или 375×812 для iOS. Имена фреймов получают понятные идентификаторы — login_screen, profile_screen, order_list — чтобы при переносе в проект Delphi их сразу можно было сопоставить с формами TFrmLogin, TFrmProfile и так далее.
Очень помогает использование Auto Layout: контейнеры с автопозиционированием и фиксированными отступами пересобираются в TLayout с Align и Margins практически один к одному. У всех интерактивных элементов — кнопок, полей ввода, переключателей — задаются явные состояния (default, pressed, disabled, focused) с помощью свойств Component Variants. Эти состояния потом превращаются в стиль StyleBook FireMonkey, где каждому контролу сопоставлен собственный ресурс TStyle.
Важно заранее продумать сетку и шаг отступов. В Figma удобно задать 4-точечную или 8-точечную сетку и закрепить её как Variables, а позже те же значения перенести в константы или ресурсы проекта. Благодаря этому интерфейс остаётся консистентным и при изменении плотности экрана, и при смене ориентации устройства, что особенно критично для приложений, рассчитанных сразу на несколько операционных систем.
Экспорт графики и подготовка ресурсов
Когда макет готов, следующий шаг — извлечь из Figma всё, что нельзя описать стандартными контролами FireMonkey. Это иконки приложения, иллюстрации, фоновые изображения, нестандартные декоративные элементы. Для каждого артборда используется плагин или встроенный экспорт с указанием масштабов: 1x, 2x, 3x, что соответствует dpi ldpi, mdpi, hdpi, xhdpi, xxhdpi в Android-части проекта и @1x, @2x, @3x в iOS-части FireMonkey.
Отдельного внимания заслуживает работа с SVG. FireMonkey поддерживает векторные форматы ограниченно: лучше всего импортируются простые одноцветные иконки. Поэтому в Figma иконки создаются в виде плоских monochrome-компонентов размером 24×24 или 32×32 и экспортируются именно в SVG. При импорте в Delphi через TImage или Bitmap Designer они автоматически масштабируются под текущее разрешение экрана, что критично для кросс-платформенной сборки.
Если проект содержит много изображений, удобно сразу завести папку Resources в каталоге проекта и складывать туда PNG по принципу «одна логическая единица — несколько файлов под разные плотности». Это упрощает дальнейшее сопровождение: при обновлении графики в Figma достаточно переписать только нужные разрешения, не перекомпилируя ничего лишнего, а заодно упрощается дифф-анализ изменений в системе контроля версий.
Сборка форм в редакторе FireMonkey
Имея на руках набор PNG, SVG и извлечённые значения отступов и цветов, можно переходить к самому FireMonkey. На каждую форму TFrmXxx создаётся отдельный TForm с заранее установленным ClientWidth и ClientHeight, соответствующим базовому артборду в Figma. Корневой TLayout растягивается на весь клиент (Align = Client), а внутренние блоки получают фиксированные позиции или привязки к границам экрана через Anchors.
Текстовые метки превращаются в TLabel, у которого вручную прописываются Font.Size, Font.Family и Fill.Color. Тут есть тонкость: в Figma размер шрифта указывается в пикселях, а в Delphi — в условных единицах, которые при разных dpi дают разные физические размеры. Чтобы избежать расхождений, в обработчике формы OnCreate вызывается пересчёт размеров шрифта под текущий коэффициент масштабирования экрана.
Кнопки заменяются TSpeedButton или TButton, после чего к ним подключается стиль из StyleBook. Элементы списков реализуются через TListView с динамическими ItemAppearance, в которых задаются шрифт, цвет фона и иконка — параметры, как правило, повторяют то, что прописано в соответствующем компоненте Figma. Когда поля и кнопки выстроены, форма визуально приближается к макету; оставшиеся различия убираются точечной правкой отступов и закруглений в инспекторе объектов.
Кроссплатформенные нюансы стилей
FireMonkey рендерит интерфейс собственным движком, отличающимся от нативных контролов Android и iOS. Из-за этого кнопка, нарисованная в Figma «по гайдлайну Material», визуально отличается от того, что отобразит TButton на реальном устройстве. Решение — кастомный TStyleBook, который загружается на старте приложения и переопределяет внешний вид стандартных контролов. Цвета, радиусы и отступы берутся прямо из Variables Figma и вставляются в соответствующие секции стиля.
Под Windows и macOS стоит учитывать, что пользователи привыкли к системному виду окон и системным жестам. Здесь удобно использовать «гибридный» подход: фон и крупные блоки верстаются как в макете, а системные кнопки закрытия, разворачивания, заголовок остаются нативными. В Figma такие детали лучше помечать отдельным слоем-комментарием, чтобы при переносе не возникало путаницы между авторскими элементами и тем, что отдаёт платформа.
Не меньшую роль играет поддержка тёмной темы. В Figma создаётся второй вариант макета в режиме Dark, а в FireMonkey он подключается через переключение TStyleBook при смене системной темы либо через собственный флаг приложения. Так один набор форм обслуживает обе темы без дублирования контролов, а заодно появляется возможность A/B-тестирования палитры без правки разметки.
Сборка, проверка и итерации правок
Финальный этап — запуск приложения на физических устройствах и эмуляторах. На экранах с разной плотностью пикселей макет из Figma проверяется на реальных пропорциях: совпадают ли отступы, корректно ли обрезаются длинные тексты, не вылезают ли изображения за границы. Все найденные расхождения фиксируются в виде скриншотов и возвращаются в Figma как правки мастер-компонентов, откуда обновлённые ресурсы снова экспортируются в проект Delphi.
Чтобы процесс не превращался в бесконечный цикл, удобно сразу завести таблицу соответствий «Figma-элемент — FireMonkey-контрол» и обновлять её по мере появления новых шаблонов. Это ускоряет вход в проект для новых разработчиков и помогает дизайнеру понимать, какие идеи реализуются легко, а какие требуют пересборки макета. Со временем вокруг такого файла формируется полноценная дизайн-система проекта, в которой Figma и FireMonkey работают как единое целое и позволяют выпускать релизы для нескольких платформ в одном темпе.