{"id":50474027,"url":"https://github.com/flipperdevices/flipperone-ui","last_synced_at":"2026-06-01T12:01:49.918Z","repository":{"id":360183044,"uuid":"1158700042","full_name":"flipperdevices/flipperone-ui","owner":"flipperdevices","description":"Flipper One User Interface ","archived":false,"fork":false,"pushed_at":"2026-03-03T17:54:48.000Z","size":12285,"stargazers_count":55,"open_issues_count":10,"forks_count":3,"subscribers_count":6,"default_branch":"dev","last_synced_at":"2026-05-25T12:07:07.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flipperdevices.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-15T19:33:27.000Z","updated_at":"2026-05-23T14:54:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/flipperdevices/flipperone-ui","commit_stats":null,"previous_names":["flipperdevices/flipperone-ui"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/flipperdevices/flipperone-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipperdevices%2Fflipperone-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipperdevices%2Fflipperone-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipperdevices%2Fflipperone-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipperdevices%2Fflipperone-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flipperdevices","download_url":"https://codeload.github.com/flipperdevices/flipperone-ui/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flipperdevices%2Fflipperone-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33773782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-01T12:01:49.087Z","updated_at":"2026-06-01T12:01:49.908Z","avatar_url":"https://github.com/flipperdevices.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flipper One User Interface \u0026 Graphics\n\nThis repository is part of the [Flipper One — User Interface \u0026 Graphics](https://github.com/orgs/flipperdevices/projects/12) sub-project, which covers FlipCTL interface development, as well as design assets, illustrations, and source graphics files.\n\n![About User Interface](files/pics/flipper-one-flipctl.jpg)\n\n\n\u003eFor now, this repository hosts this README with an overview of the sub-project and its design resources.\n\n## Links\n\n- **Developer Portal:** [docs.flipper.net/one](https://docs.flipper.net/one)\n- [**Sub-project overview**](https://docs.flipper.net/one/user-interface/about)\n- [**Task tracker**](https://github.com/orgs/flipperdevices/projects/12)\n- [**Assets library in Figma**](https://www.figma.com/design/U4k0qHkl9JdCu17MEtLFdI/Flipper-One-UI-Assets-library?node-id=0-1\u0026t=zfmlKGksE4iBQ57H-1)\n- [**Main board in Figma**](https://www.figma.com/design/PhlEqdtgjFfcizdVV0qNSR/Flipper-One-UI---Main-board?node-id=368-270\u0026t=YcLCv1SFsc4TCTiV-1)\n- [**UI demo in ProtoPie**](https://cloud.protopie.io/p/8b3ce95e854c87471d14d3a0)\n\n## How to contribute\n\nThe User Interface sub-project accepts contributions through comments on open tasks. Anyone can submit design proposals as comments on tasks with the **help wanted** label.\n\n1. Read [How to contribute](https://docs.flipper.net/one/user-interface/about#how-to-contribute).\n2. Browse the [Task tracker](https://github.com/orgs/flipperdevices/projects/12) and pick a task labeled **help wanted**.\n3. Create your design using the [Asset library](https://www.figma.com/design/U4k0qHkl9JdCu17MEtLFdI/Flipper-One-UI-Assets-library?node-id=0-1\u0026t=zfmlKGksE4iBQ57H-1).\n4. Set your Figma board to **Anyone can view**.\n5. Enable **Viewers can copy, save, and export**.\n6. Comment on the task with a detailed description, a screenshot, and a link to your Figma source file.\n\n\n## Assets library in Figma\nThe [Assets library](https://www.figma.com/design/U4k0qHkl9JdCu17MEtLFdI/Flipper-One-UI-Assets-library?node-id=0-1\u0026t=zfmlKGksE4iBQ57H-1) hosts the components used to build Flipper One's user interface. You can browse the library in your browser without a paid Figma plan.\n\n\u003eIf you have a paid Figma plan, you can add the assets to your libraries. Check the [official Figma guide](https://help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma).\n\n![Flipper One Asset library on Figma](files/pics/figma-library-overview.jpg)\n\nThe library has two pages:\n\n- **UI - Prototype Assets:** components for mockups and hypothesis testing inside Figma. Uses orange and black screen-like colors that mimic the Flipper One display.\n- **UI - Dev ready:** components for building UI that will be shipped to the Flipper One screen.\n\n## Main board in Figma\n\nThe [Main board](https://www.figma.com/design/PhlEqdtgjFfcizdVV0qNSR/Flipper-One-UI---Main-board?node-id=368-270\u0026t=YcLCv1SFsc4TCTiV-1) hosts interface development, design assets, illustrations, and source graphics files.\n\n![Flipper One Main board on Figma](files/pics/figma-main-board-overview.png)\n\nThe board has three pages:\n\n- **Documentation:** illustrations and technical drawings.\n- **UI OUT:** development-ready, assembled UI layouts.\n- **UI Live Preview:** pre-assembled UI layouts for look-and-feel tests on the device.\n\n## UI demo in ProtoPie\n\n![flipper_one_protopie_demo](https://github.com/user-attachments/assets/572014cd-5c9a-4f6a-9c9d-10d30fdd12d6)\n\n[ProtoPie](https://www.protopie.io/) is a prototyping tool for building interactive prototypes of apps and devices. We relied on it before we could prototype directly on the Flipper One screen. While it's now deprecated for our workflow, you can still run the interactive Flipper One interface. ProtoPie works best via the mobile app, but it can also run in a browser without installing the app.\n\n### Launch the ProtoPie demo on your phone\n\n1. Install **ProtoPie Player** on your [Android](https://play.google.com/store/apps/details?id=io.protopie.companion\u0026hl=en\u0026pli=1) or [iOS](https://apps.apple.com/us/app/protopie-player/id1015837511) phone.\n\n2. Open the link on your phone:\n   https://cloud.protopie.io/p/8b3ce95e854c87471d14d3a0\n   \n   or\n   \n   Scan the QR code using the **ProtoPie Player** app:\n\n    \u003cp align=\"left\"\u003e\n    \u003cimg width=\"150\" height=\"150\" alt=\"Flipper One ProtoPie interface demo QR Code\" src=\"https://github.com/user-attachments/assets/b02d27f7-1690-4072-8038-fe4582ff8d0b\" /\u003e\n    \u003c/p\u003e\n\n### ProtoPie settings tips\n\nIn ProtoPie Player, double-tap with two fingers to access the menu, where you can:\n\n- Tap **Restart** if ProtoPie Player freezes.\n- Switch between different scenes.\n\n![ProtoPie Player menu and tips](files/pics/protopie-tips.jpg)\n\nIn **Settings**, you can disable touch highlights and purple hint overlays to prevent them from interfering with the UI preview.\n\n![ProtoPie Player settings](files/pics/protopie-settings.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflipperdevices%2Fflipperone-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflipperdevices%2Fflipperone-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflipperdevices%2Fflipperone-ui/lists"}