MCU Treadmill

MCU Treadmill overview

MCU Treadmill is designed in Figma. You can bring the design to Qt Design Studio and create a responsive MCU Treadmill application.

You should have these prerequisites available:

  • Qt Design Studio Enterprise license.
  • Qt Design Studio 4.7 or above.

Getting the MCU Treadmill design to Figma

  1. Get the optimized MCU Treadmill for Figma design from here.
  2. Go to Figma and log in.
  3. Open the downloaded MCU Treadmill design in Figma.

Importing the MCU Treadmill design from Figma

To import the MCU Treadmill design for Qt Design Studio, first set up Qt Bridge for Figma.

  1. Select the MCU Trademill project in Figma.
  2. Select Main Menu > Plugins > Qt Bridge for Figma.

    Qt Bridge for Figma plugin

    .

  3. Select Export, then Save. By default, the .qtbridge file is saved as mcuDemo.qtbridge.

    Export Figma design with Qt Bridge for Figma

  4. Select Close, then exit Figma.

Getting the MCU Treadmill design in Qt Design Studio

After importing the MCU Treadmill design from Figma:

  1. Create a new Qt Design Studio project for MCU.

    Create new MCU project in Qt Design Studio

  2. Drag the .qtbridge file (mcuDemo.qtbridge) to the 2D view.

    Qt Bridge asset import warning in Qt Design Studio

  3. Select Yes, then select Import.

    Qt Bridge asset import in Qt Design Studio

  4. In the following notification, select No. This replaces the existing Screen01.ui.qml file with the imported file.

    Import file conflict notifcation

  5. After a successful import, select Close.

Note: Install this font on your system to match the font used in the Figma design.

With the design in place, you can now add desired functionalities to the imported components with connection, state, timeline animation, QML, and Javascript. Find a fully functional example in the Examples section on the Qt Design Studio homepage.

Running the MCU Treadmill example

  1. Open Qt Design Studio, then select Examples.
  2. Download the MCU Treadmill example.
  3. Select the downloaded project to open it in Qt Design Studio.
  4. Select Run App, then select the Run Project button .

    MCU Treadmill demo running

To find the logic and animations of this example, check these files in the Code view:

File nameDescription
SplashScreen.ui.qmlDefines the home screen animation of the MCU Treadmill example.
TrackView.ui.qmlDefines the track animation of the MCU Treadmill example.
TreadmillMcuDemo.qmlDefines the logical functionalities of the MCU Treadmill example.

Available under certain Qt licenses.
Find out more.