About User Interface

this page explains the structure of the user interface sub project, provides links to its design resources, and outlines how to contribute to flipper one's ui development about user interface the user interface sub project covers the visual and interaction design of flipper one the on screen ui, graphic elements, icons, illustrations, and the design assets used to build them the user interface sub project consists of ✅ task tracker https //github com/orgs/flipperdevices/projects/12 🎨 asset library on figma https //www figma com/design/u4k0qhkl9jdcu17metlfdi/flipper one ui assets library?node id=0 1\&t=zfmlkgkse4ibq57h 1 — core components for building ui 🖼️ main board on figma https //www figma com/design/phleqdtgjffcizdvv0qnsr/flipper one ui main board?node id=368 270\&t=yclcv1sfsc4tctiv 1 — assembled ui layouts and design documentation 📁 github repository https //github com/flipperdevices/flipperone ui — currently contains only a readme we'd love your feedback — look for tasks tagged help wanted in the task tracker, share your designs in the comments, or contribute directly to the docs user interface sub project structure ✅ task tracker all user interface team tasks are tracked in the github project flipper one — user interface https //github com/orgs/flipperdevices/projects/12 there, you can see what the design team is working on and follow progress and discussions user interface task tracker some tasks are open to the community and marked with a help wanted label you're welcome to join the discussion on these tasks or submit your design proposals — just make sure to read the contribution guide docid\ llpzmovg4vdrsxdpqh6qq first 🎨 asset library on figma the asset library https //www figma com/design/u4k0qhkl9jdcu17metlfdi/flipper one ui assets library?node id=0 1\&t=zfmlkgkse4ibq57h 1 hosts the core figma components used to build flipper one's ui you can browse it in your browser without a paid figma plan — just open the link flipper one asset library on figma the library has two pages ui — prototype assets — components for mockups and hypothesis testing inside figma uses orange and black screen like colors that mimic the flipper one display ui — dev ready — components for building ui that will be shipped to the flipper one screen if you have a paid figma plan, you can add the asset library to your team libraries for use across projects see figma's guide to libraries https //help figma com/hc/en us/articles/360041051154 guide to libraries in figma 🖼️ main board on figma the main board https //www figma com/design/phleqdtgjffcizdvv0qnsr/flipper one ui main board?node id=368 270\&t=yclcv1sfsc4tctiv 1 hosts interface development, design assets, illustrations, and source graphics files flipper one main board on figma the main board has three pages documentation — illustrations and technical drawings ui out — development ready, assembled ui layouts ui live preview — pre assembled ui layouts for look and feel tests on the device display constraints flipper one's display has specific constraints all ui designs must follow resolution 256 × 144 px color depth 64 shades of black (6 bit grayscale) backlight orange lcd pixel perfect rendering ui elements must align to whole pixels — sub pixel rendering is not supported keep these in mind when designing screens, icons, or illustrations — anything that doesn't respect them won't render correctly on the device fonts the ui uses two fonts born2bsportyv2 https //github com/olikraus/u8g2/blob/master/tools/font/ttf/born2bsportyv2 ttf — primary ui font haxrcorp4089 https //github com/olikraus/u8g2/blob/master/tools/font/ttf/haxrcorp4089 ttf — secondary ui font ui fonts prototypes (deprecated) earlier prototypes based on protopie are deprecated — they were used when we couldn't prototype directly on the flipper one screen they remain accessible in the flipperone ui repository https //github com/flipperdevices/flipperone ui for reference how to contribute to contribute to the user interface sub project, you need to have a github account you can create one on the github website https //github com/signup ⚠️ contributions only — no flooding to keep collaboration productive, please keep comments on topic open tasks are for contribution related discussion only if you have an idea or concern, first turn it into a concrete contribution and share it as a comment on a task for general questions or discussions, you're always welcome to join the conversation on social media https //x com/flipper rnd or discord https //discord com/invite/flipper ! how to contribute to the user interface sub project the user interface sub project accepts contributions through comments on open tasks — submit your design proposals as comments on a help wanted task, including a screenshot and a link to your figma source file pick a task in the user interface github project https //github com/orgs/flipperdevices/projects/12 , browse the open tasks and click the one labeled help wanted that you want to contribute to create your design use components from the asset library https //www figma com/design/u4k0qhkl9jdcu17metlfdi/flipper one ui assets library?node id=0 1\&t=zfmlkgkse4ibq57h 1 as a base you can duplicate the main board https //www figma com/design/phleqdtgjffcizdvv0qnsr/flipper one ui main board?node id=368 270\&t=yclcv1sfsc4tctiv 1 into your drafts to reuse ready screens — click the dropdown next to the board name and select duplicate to your drafts duplicate the main board to your figma drafts allow anyone to view your board in figma, open your board's share settings and set general access so reviewers can open your design from the link click share set access to anyone can view in share settings, enable viewers can copy, save, and export click save click copy link write your comment describe your changes, attach a screenshot of your design and paste the link to your figma source file good vs bad comment example attachment size limit images 10 mb videos 100 mb click comment to submit we review all design proposals carefully! we may ask additional questions in the task thread, so please watch for github notifications in your email