Using Figma Quick Control Template Components in Qt Design Studio

You can design with the template components created by Qt Design Studio in Figma and import them to Qt Design Studio with Qt Bridge for Figma. These template components are structured specifically for Figma. When you design in Figma using them, and import the design with Qt Bridge for Figma, they generate functional QML components for Qt Design Studio. So, you can edit components both in Qt Design Studio and Figma.

Using Figma Template Components

You should have these prerequisites available:

• A Figma professional account.
• Qt Design Studio Enterprise license.
• Qt Design Studio 3.9 or above.

  Note: You can try out the template features with a Figma starter account as well. However, if you want to publish template assets in Figma, you need a Figma professional account for that.

Creating Figma Design with Template Components

1. Sign in to Figma.
2. Go to the Template provided by Qt Design Studio team here.
3. Select Get a copy and then your account to have a copy on your Figma workspace.

   Note: From the Layers tab you can find pages of contents. Here, select Introduction to access all the knowledge about the templates workflow and key concepts.

4. There are templates for individual components in separate pages. Select the page you want to work on from template and copy all of its contents.
5. Create a new Figma design file. In Figma, select Menu > File > New design file.
6. Paste the copied content to this file and save. Here, do all the modification you need using Figma tools.
7. Next, publish this template assets. In Figma, select Menu > Libraries. Then select Publish. You don't need to publish the template itself, just publish the components. You can clear Template from the Changes section to have it removed from publishing assets.
8. Create another new project, where you would use this published component. Or, you can use this component in one of your existing projects in Figma.

   Note: In Figma, select Menu > Libraries to find the published components. You can find these components under Your teams. Toggle them active to use in a project.

Importing the Figma Design to Qt Design Studio with Qt Bridge for Figma

1. In Figma, do one of the following:
   • Select Menu > Plugins > Qt Bridge for Figma.
   • Select Resources (Shift + I) > Qt Bridge for Figma > Run.
2. Save the file to your local system.
3. Import the Qt Bridge for Figma file to a project in Qt Design Studio. You can drag the file to project. Then, select Import, and wait until the process is finished.
4. Drag the imported Qt Bridge for Figma file to the Qt Design Studio open project. Select Import, and wait until the process is finished.
5. You can find the imported design as QML files in Qt Design Studio. Figma assets are also imported as components in Qt Design Studio. You can manipulate states or properties natively.

   Note: You can also edit the design in Figma and bring it again to Qt Design Studio using Qt Bridge for Figma. However, you need to name this imported file exactly same as before. Then import it to the project in Qt Design Studio to have it synchronized. Qt Design Studio lets you have the updates you have made locally on top of the imported component updates.