As avid users of Figma, working outside of a computer monitor can prove to be a problem with the limited support on other devices, especially tablets.
While much of the Interactive Components feature was in beta, we sought to familiarize ourselves with the professional pipeline through using components and variants. The feature also enables us to produce better fidelity prototypes.
How might we improve Figma workflow on a tablet with limited screen estate and touch interface?
Given the current state of touch support on Figma or the lack thereof, we also find Figurative or Figma’s web app to be less efficient due to the limited screen estate when retaining the two side panes.
We have done some exploration on similar concepts, such as Dimension (by Theo Strauss), though we settled on a completely different approach to reimagine Figma. We wanted to push the envelope and truly optimise Figma for ipadOS, yet retaining as much familiarity with its predecessor as necessary.
By switching from a permanent sidebar to a dock approach, we sought to expose more of the project content and declutter the stacked tool layout. Majority of tools are categorised to stay true to its desktop counterpart (with exceptions*) - retaining as much familiarity as possible to ensure a consistent user experience.
With tools separated into different panes, it enables us to improve Figma’s accessibility through segmenting and enlarging controls for a touch-first user experience.
* HEX Code → Eyedropper: adapting to touch-first workflow
With our established design language of prioritising screen estate & touch-first experience while ensuring that Figpad feels native to Apple’s Human Interface Guidelines, we proceeded with a floating design.
When working through the design process, we took note of the keyboard shortcuts that would’ve been overlooked in touch-based reinterpretations of desktop native design applications, and noticed that the eyedropper tool is one that would simplify the whole copy-pasting of HEX Code, hence we’ve included it. In the process, we took the liberty of relocating the comment bubble to the “Collaboration Tool Bar”.
To stay aligned with Apple’s Human Interface Guidelines and our design priorities for screen estate, we employed Apple’s Sheets - a familiar UI element in touch devices. This ensures that the user experiences a native interface while having access to layers only when needed.
This project is entirely a product of collaborative efforts – both members' inputs are reflected in the final prototype. We can all definitely say the final outcome has lived up to the vision we set out for.
Adopting the latest professional workflow:
Design → Design system → Components → Variants → Interactive Components → Prototyping
Copyright Bayu & Win 2021
