Як налаштувати дизайн‑ту‑код процес з Uno Platform for Figma

У статті розбирається підхід Метью Маттея та команди Uno Platform до спільної роботи дизайнерів і .NET‑розробників через плагін Uno Platform for Figma.

Проблема: класичний handoff гальмує команду

У звичному сценарії дизайн‑handoff виглядає так: дизайнер(ка) допрацьовує макети до ідеалу, збирає специфікації, експортує ассети й передає все це розробникам. Далі команда розробки в IDE вручну відтворює інтерфейс, аналізуючи:

відступи, сітку, вирівнювання
типи контролів
усі стани UI (loading, empty/partial, error тощо)

Маттей описує типові наслідки такого підходу:

немає єдиного джерела правди — макети оновлюються, але зміни не завжди доходять до коду
дизайнери рухаються «великими блоками» макетів і можуть пропускати окремі стани/ассети
розробники працюють за гранульним беклогом і не завжди бачать загальну картину, що веде до дубльованої або зайвої роботи
на будь‑яку зміну в дизайні потрібні додаткові кола уточнень, редизайну й верстки

У підсумку багато часу йде не на створення продукту, а на синхронізацію між інструментами й ролями.

Концепція Uno: Figma як єдине джерело правди

Команда Uno Platform пропонує інший підхід: зробити сам Figma‑файл базовим джерелом правди для всіх сторін, а з нього вже одразу отримувати робочий код інтерфейсу для Uno Platform.

Ключові принципи, які вони від цього відштовхують:

дизайн і розробка рухаються не каскадом, а паралельними потоками
макет не «заморожується» раз і назавжди — зміни в дизайні можна регулярно знову експортувати в код
менше текстової документації, більше формалізованих компонентів (Design System Packages, Uno Toolkit)
дизайнер працює в знайомому Figma, розробник — у знайомому C#/XAML‑стеку

Технічно це реалізовано через плагін Uno Platform (Figma to C# or XAML) і спеціальний дизайн‑файл Uno Platform Material Toolkit.

Чому саме Figma і Material Toolkit

У якості базового редактора команда Uno обрала Figma замість, наприклад, звʼязки Sketch + Zeplin. Мотивація, наведена в матеріалі:

Figma працює в браузері й крос‑платформна; Sketch обмежений macOS і вимагає сторонніх рішень для шерингу
вбудована система плагінів (у тому числі плагіни для handoff, як‑от «Clippy — add attachments»)
можливість тримати дизайн‑систему, прототипи й специфікації в одному середовищі

Під Uno Platform створено окремий Figma‑файл Uno Material Toolkit з готовими компонентами й шаблонами. Важливе обмеження від автора: плагін Uno генерує код тільки для дизайнів, зроблених усередині цього toolkit‑файлу з використанням його компонентів. Існуючі «довільні» Figma‑макети він у код не перекладе.

Це обмеження змушує трохи змінити звичку: замість вільного малювання фреймів дизайнер працює в межах бібліотеки Uno Toolkit. Натомість отримує:

узгоджену з Uno Platform структуру шарів і автолейаутів
компоненти з варіантами станів (наприклад, кнопки з/без іконки)
гарантію, що плагін зможе згенерувати коректний XAML або C# markup

Налаштування дизайн‑файлу під Uno Platform

1. Встановити плагін і відкрити Material Toolkit

встановити Uno Platform (Figma to C# or XAML) із Figma Community
відкрити Uno Platform Material Toolkit у Figma та створити свій файл на його основі

Матеріальний toolkit уже містить базову сторінку налаштувань, компоненти й сторінку з інструкцією.

Примітка автора: якщо не проєктувати всередині цього файлу й не використовувати його компоненти, плагін не згенерує жодного вихідного коду.

2. Задати тему, кольори й шрифти

У файл вбудована сторінка Getting Started. Її завдання — допомогти швидко:

налаштувати кольорову палітру
задати типографіку
побачити превʼю теми в основних компонентах

The Getting Started page in the Material Toolkit file. (Large preview)

Додатково для Uno Platform підтримуються DSP Tooling in Uno.Material. DSP (Design System Package) в контексті статті — це набір UI‑ассетів плюс JSON‑опис дизайн‑системи (кольори, токени, стилі). Дизайнер або команда може:

зібрати власний DSP під бренд
імпортувати його в Uno.Material
розшарити між кількома проєктами й командами

Так підтримується консистентність без ручного дублювання палітр і стилів.

3. Стартовий шаблон сторінки

Після налаштування теми рекомендований флоу такий:

створити нову сторінку у Figma‑файлі
через вкладку Resources → Components вставити Standard Page Template із Uno Toolkit
правою кнопкою по інстансу вибрати Detach instance, щоб мати можливість змінювати вміст

To get started with the Page Template, first, you need to detach the instance from the template. (Large preview)

Standard Page Template уже містить базову структуру, наприклад Content.Scrollable, нижню навігацію тощо, які співвідносяться з елементами Uno Toolkit у коді.

Робота з компонентами Uno Toolkit у Figma

Uno Toolkit дає велику бібліотеку заздалегідь підготовлених контролів, оптимізованих під багатоплатформений UI (мобільні, десктоп, WebAssembly). Важливі властивості з точки зору handoff:

компоненти мають варіанти (states/variants) — наприклад, кнопки з leading icon чи без
іменування й структура шарів підігнані під генерацію XAML / C#
будова компонентів повторюється в коді через Uno Toolkit, з докладною документацією для розробників

Button components with a Leading Icon variant: you can use the same element with or without icons in your design. (Large preview)

Завдяки цьому дизайнер може збирати складні екрани, а розробник отримує добре структурований код, а не «плоску» верстку з випадковими фреймами.

Як працює превʼю й експорт коду

1. Live‑превʼю в плагіні

У плагіні Uno Platform є вкладка Preview, яка показує інтерактивний превʼю згенерованого UI:

у Figma виділити потрібний екран
правою кнопкою вибрати Plugins → Uno Platform (Figma to C# or XAML)
перейти на вкладку Preview
натиснути Refresh

У такому режимі можна скролити вміст, натискати кнопки й бачити, як поводяться компоненти в «живій» верстці, ще до участі розробника. Це зменшує кількість ітерацій після handoff.

2. Огляд і експорт коду

На вкладці Export плагін показує згенерований код. У випадаючому списку згори можна обрати:

C# (C# markup)
XAML
Color Override File
Fonts Override File

Далі код копіюється в буфер і вставляється в IDE (Visual Studio чи іншу, на вибір команди).

Важливий момент з матеріалу: дизайнер не обовʼязково має займатися цим сам. У Figma є Dev Mode, тож будь‑який учасник команди, навіть без платної ролі editor, може:

відкрити потрібний екран
запустити плагін Uno Platform
перейти на Export і скопіювати код

Передача в Visual Studio й Uno‑проєкт

Коли дизайн стабілізовано, код можна перенести у справжній Uno‑проєкт під .NET.

1. Створення рішення в Uno Solution Template Wizard

У статті використовується Uno Solution Template Wizard for Visual Studio. Він генерує багатоплатформений проєкт із обраними опціями:

використовувати XAML чи C# markup для UI
яку тему застосувати (наприклад, Uno.Material або Fluent)

За замовчуванням Figma‑toolkit орієнтований на Material, але Uno Platform підтримує overrides — тож розробник може налаштувати стилі так, щоб UI відповідав, наприклад, Fluent.

2. Інтеграція XAML‑коду

Для сценарію з XAML автор описує базові кроки:

у плагіні на вкладці Properties (якщо потрібно) змінити namespace застосунку
перейти на Export, скопіювати XAML (кнопка Copy to Clipboard)
у Visual Studio створити новий Uno‑проєкт через Wizard
відкрити MainPage.xaml, видалити стартовий вміст і вставити згенерований XAML
відкоригувати x:class і xmlns:local під свій namespace
експортувати з плагіна файл Color Override і вставити в ColorPaletteOverride.xaml (як описано в документації Uno Material → Customize Color Palette)

3. Інтеграція C# markup

Для C# markup у загальних рисах послідовність інша:

на вкладці Export вибрати режим C# і виділити вміст від виклику this до фінальної крапки з комою ; (автор показує це на скріншоті)
скопіювати фрагмент
у Visual Studio створити Uno‑проєкт (із опцією C# markup для UI)
у файлі MainPage.cs повністю замінити вміст сторінки вставленим кодом
для узгоджених шрифтів відкрити MaterialFontsOverride.cs у папці Style і вставити туди ресурсний словник зі шрифтами, згенерований плагіном як Fonts Override File

Міні‑кейс: конструювання мобільного UI «Flights» у Figma

Щоб показати реальний флоу, автор використовує навчальний приклад — мобільний інтерфейс застосунку для пошуку авіаквитків (Uno Flights). На Figma Community доступний Uno Flights file template, який можна використати як референс.

Ключове правило для цього та подібних проєктів: при побудові UI використовуються лише компоненти з Material Toolkit. Це забезпечує коректну генерацію коду.

Фрагмент 1: пошук, сортування та фільтри

Перший блок екрану — зона пошуку й дій:

TextBox із заданим placeholderʼом і, за потреби, leading/trailing icon
рядок з кількістю знайдених рейсів (текстові елементи, обгорнуті в Auto Layout)
дві кнопки‑дії (IconButton + текст) у горизонтальному Auto Layout
усі ці елементи вкладаються в Content.Scrollable базового шаблону сторінки

Step 1: Adding the Result Actions. (Large preview)

Фрагмент 2: картка рейсу

Картка “Flight Itinerary” ділиться на три логічні частини, кожна з яких збирається через Auto Layout:

час вильоту/прильоту та ProgressBar на часовій шкалі
кодові позначення аеропортів, тривалість рейсу, статус
інформація про авіакомпанію та вартість

Тут активно використовуються:

горизонтальні й вертикальні Auto Layoutʼи
іконки з абсолютним позиціонуванням над ProgressBar (наприклад, значок літака)
групування текстових елементів у блоки з режимом заповнення Fill для адаптивної ширини

The results after completing Step 2. (Large preview)

Фрагмент 3: Bottom TabBar

Нижня панель навігації входить у стандартний шаблон сторінки. Її кастомізація зводиться до:

перебору кожного пункту TabBar
розгортання до шару з іконкою
заміни інстансу іконки на потрібний через панель Design
оновлення тексту під іконкою

Step 3: Swapping icon instances in the Bottom TabBar (Swap instance → Local components → Icons). (Large preview)

Превʼю й генерація коду для Flights

Після збирання екрану Flights у Figma дизайнер може:

запустити Uno Figma Plugin на цьому екрані
перевірити інтерактивний превʼю у вкладці Preview
перейти на Export, скопіювати XAML чи C# markup
перенести код у MainPage.xaml або MainPage.cs у Visual Studio

Step 4: The result in the Plugin Previewer. (Large preview)

Автор надає приклади фінального коду в окремих файлах:

flightXAML.txt (XAML)
flightCsharp.txt (C# markup)

Design-to-code results: exported XAML code. (Large preview)

Що в підсумку дає цей підхід

З того, що описує Маттей, Uno Platform for Figma вирішує кілька конкретних задач:

зменшує кількість ручної роботи при відтворенні UI розробником
знімає частину «специфікаційної» роботи з дизайнерів — багато нюансів зашито в самі компоненти й код
полегшує підтримку узгодженого вигляду через DSP, Color/Fonts Override файли
дає можливість швидко проганяти ітерації дизайну й одразу дивитися на них «очима коду»

При цьому є й обмеження, які важливо враховувати, якщо ви плануєте спробувати подібний процес:

плагін працює лише з Uno Material Toolkit — існуючі довільні макети не конвертуються автоматично
дизайнерам потрібно працювати в межах бібліотеки компонентів, а не малювати «з нуля»
згенерований код — це стартова точка, а не повноцінний застосунок; бізнес‑логіку, навігацію, стан тощо команда додає вже в IDE

Якщо команда готова підлаштувати процес під ці умови, описаний у статті підхід може суттєво скоротити розрив між Figma й робочим .NET‑кодом, особливо в проєктах, де багато схожих екранів і сувора дизайн‑система.

Джерело: Matthew Mattei — Smashing Magazine: Figma