Flipper One User Interface & Graphics

This repository is part of the Flipper One — User Interface & Graphics sub-project and contains task tracking for FlipCTL interface development, as well as design assets, illustrations, and source graphics files.

How to contribute

TODO: guide how to contribute

Figma

Flipper One UI asset library

Use components from the asset library to build UI mockups and test your hypotheses in Figma.

If you have a paid Figma plan, you can add these assets to your libraries. Check official Figma guide

Flipper One UI — Main board

Ready-to-use screens and visuals board includes the following pages:

1. Documentation — Illustrations and technical drawings
2. UI OUT — Development-ready, assembled UI layouts

How to clone board:

Select Duplicate to your drafts inside the dropdown menu next to the board name.

ProtoPie GUI Demo

You can run the interactive Flipper One interface demo on the ProtoPie platform.
We use the ProtoPie demo as our main UI concept verification tool.

It works best via the mobile app, but it can also run in a browser without installing the app.

How to run the ProtoPie demo

1. Install ProtoPie Player for Android or iOS.

2. Open the following link on your mobile device:
   https://cloud.protopie.io/p/8b3ce95e854c87471d14d3a0
   OR scan the QR code using the ProtoPie mobile app:

Scan the QR code with the ProtoPie Player app

ProtoPie settings tips

Double-tap with two fingers to access Protopie menu:

• If ProtoPie Player freezes, tap restart the prototype.
• Scene list allows you to switch between different scenes.

In the application settings, you can disable touch highlights and purple hint overlays to prevent them from interfering with the UI preview.