UX Design
The UX Design for Arda’s System is done in Figma.
The Entry point to the UX design is currently in Arda
MVP 2.0 - Hi-Fi Mockups
Figma has two different modes:
- Design mode. This is where the design work is done.
- Prototype mode. This is where all interactions are wired to make it look and behave like a real app.
Specific Features will have Links to their Figma designs in their tickets and/or their documentation.
To review these designs, Pan and Zoom around and pay particular attention to the left panel which includes, at the top,
a list of the canvases used to build the mockups.
How to navigate¶
Basic Navigation¶
As an example, In the screen capture below, all the good stuff is located where the arrow is pointing, at the “MVP 2.0”
page (pages appear in the top of the left nav panel). When viewing the mockups, look for the big orange title pages.
Those explain what feature we’re looking at, then the workflow goes from left to right.
Interaction Design for Prototype Mode¶
In this particularly confusing layout for item details list, you read through the screens left to right of the title page.
The content beneath each of the app design pages is color-coded:
- Indigo background: A collection of constituent components used in the pages above.
- Gray background A collections of modals and popovers that are used in the pages above.
These are used to create interactions in prototype mode.
Prototype Mode¶
To enter prototype mode for any page, select the “Frame” of the page, then click the play button in the top-right:
Copyright: © Arda Systems 2025, All rights reserved