Figma UI Resource Pack

The UNA Watch UI Resource Pack is the design source behind the watch GUI, shipped as a single Figma file: Docs/Templates/Figma-UI-Kit/UNA-Watch-UI-Resource-Pack.fig.

It contains the watch mockups, the round screen frame with the four button labels in place, brand assets, and the UI elements the built-in apps are drawn from. Designing an app screen on top of these keeps a third-party app visually consistent with the pre-installed ones — same screen geometry, same button semantics, same visual language.

Download the resource pack

Importing the pack

  1. Open Figma (a free account is enough — no paid tier or plugin is required).

  2. Go to the File browser and choose Import, or drag the .fig file onto an open Figma project.

  3. Duplicate the frame you want to start from and lay out your own screen inside it.

From Figma to the app

The watch renders what the TouchGFX Designer generates, so a Figma screen is a layout reference, not an asset that ships as-is. Two rules keep the hand-off cheap:

  • Draw in Figma, rebuild in Designer. Text, boxes, lines, and arcs are cheaper and sharper as TouchGFX primitives than as exported bitmaps, and they can be moved or recolored at runtime. Export a bitmap only for artwork that primitives cannot express.

  • Export bitmaps at 1x, PNG. Keep the pixel size the screen actually uses; the color format is picked when the image is imported into Designer. See Images - Working with Graphics and Assets for how images are added to an app.

Ready-made TouchGFX containers that already implement several of these UI patterns in code are documented in TouchGFX Widgets.