Статья о том, как превратить конструкцию Figma в рабочий набор элементов управления без какого-либо кодирования.

Мы в Qt являемся большими поклонниками Figma. Их подход на основе системы проектирования наиболее близок к тому типу мышления разработчика, который требуется при создании полноценного пользовательского интерфейса рабочего приложения в Qt Design Studio. Благодаря такому существенному концептуальному совпадению и четко определенному API, предоставляемому для файлов Figma, мы можем охватить и преобразовать большую часть процесса проектирования в QML с помощью нашего плагина Qt Bridge exporter.

Но до сих пор существовала несостыковка, отсутствовал важный фрагмент пазла - элементы управления (Controls).

Конечно, вы могли разрабатывать и экспортировать визуальные части ваших Controls, но в итоге вам все равно приходилось каким-то образом преобразовывать этот дизайн в рабочий элемент управления, обычно повторяя лишь ту часть функциональности, которая доступна в стандартной версии Qt Quick Controls.

Данный проект призван решить эту проблему путем создания аналога процесса формирования стиля для Qt Quick Controls непосредственно из проекта Figma.

Внутри проекта находится набор файлов шаблонов, основанных на комплектах вариантов Figma, которые содержат дизайн и ограничения, необходимые для создания полностью рабочего набора Qt Quick Controls. Эта фича будет доступна в предстоящем выпуске Qt Design Studio 3.9.

В шаблоны включены запускаемые демо-версии, которые используют Figma-прототипирование для тестирования дизайна и ограничений. Эти демо-версии также экспортируются в Qt Design Studio и могут быть использованы в режиме предварительного просмотра в реальном времени (live preview) для проверки четности и точности процесса экспорта.

В некоторых случаях, таких как Slider и Spin Box, возможности прототипирования Figma с точки зрения взаимодействия не дотягивают до уровня Quick Controls.То есть прототип в Figma показывает только ограниченный набор полных функциональных возможностей управления, однако все же может считаться полезным для тестирования визуальных элементов дизайна, таких как внешний вид состояния Controls.

Шаблон кнопки в Figma Prototype и Qt Design Studio Live Preview

Целью здесь является поддержка полного командного рабочего процесса на основе системы проектирования. Мы предлагаем использовать этот шаблон в качестве опубликованной библиотеки, где публикуются только основные компоненты для каждого элемента управления, которые затем используются в новых файлах дизайна. В связи с предполагаемым поведением действий Figma по копированию и вставке опубликованных библиотечных файлов крайне важно сохранить копию этого шаблона неизмененной в ваших черновиках и произвести копипаст ваших компоненов в новый файл для публикации.

См. эту тему на форуме для более подробной информации: https://forum.figma.com/t/copied-components-pasted-as-instances/29904

Опубликованный рабочий процесс компонентов проектирования, используемый в Figma с поддержкой удаленных компонентов из Qt Bridge

В настоящее время этот проект следует логике Qt Quick Control Style, это означает, что как и Style в Qt Design Studio, существует только одна версия для каждого элемента управления. Значит вы не можете иметь несколько версий дизайна элемента управления в одном проекте. В будущих версиях мы надеемся решить эту проблему.

Также этот проект не содержит полного набора Quick Controls, доступных в QtDS. Для Qt Design Studio 3.9 будет доступна только избранная выборка из наиболее часто запрашиваемых. Этот выпуск — только первый шаг, и мы планируем добавить больше элементов управления и фич в ближайшем будущем, так что следите за новостями!

Вы можете найти все наши материалы по Figma на странице нашего сообщества здесь. Плагин Figma теперь можно найти здесь. А проект шаблона Quick Control можно найти здесь.

Вы также можете увидеть всё это в действии, ознакомившись с моей недавней презентацией на Qt World Summit здесь:

Qt Bridge Importer доступен только для клиентов Qt Design Studio с лицензией Enterprise. Вы можете получить ознакомительную лицензию, чтобы протестировать его самостоятельно, пройдя по этой ссылке.

ОС Аврора — это российская мобильная операционная система, под которую разрабатывается множество проектов-приложений B2B и B2G. Интересно узнать про возможности разработки под эту ОС? Тогда приходите на открытый урок, который пройдет 24 мая в 20:00.

На этом занятии посмотрим на среду разработки приложений Аврора IDE, на структуру и конфигурацию приложения. Для создания мобильных приложений под ОС Аврора используется технология Qt, для реализации графической части — QML.

В качестве примера будет продемонстрировано приложение, отправляющее уведомление в графическую подсистему Lipstick. Приложение будет связываться с системным сервисом с помощью технологии взаимодействия D-Bus. В коде приложения-примера будет подключаться и использоваться QML-плагин D-Bus, созданный для ОС Аврора.

Записаться на бесплатное занятие можно на странице онлайн-курса «Разработка прикладного ПО на Qt и ОС Аврора» по ссылке.

Создание элементов управления в Figma Design