Meet Dimension
An open-source plan to adapt fully-featured design tools like Figma from desktop to tablet.
As a product designer, I really only need two pieces of tech for my day-to-day:
- A computer to handle the product(ivity) side of things — think web apps
- A design tool — where I usually design web apps
And, like most designers, I relied on two “standards of the industry” for a while:
But, if you note the past-tense, two things happened:
- In 2018, I closed a Sketch window and opened up my friend’s Figma file for the first time. Figma didn’t only instantly replace Sketch, it also replaced other tools I had been using at the time. The future of design was clear: Figma was it.
- In 2019, I put down my laptop and went to the Apple Store to try an iPad Pro. The iPad Pro didn’t just amaze me, Apple Pencil and iPadOS did too. The future of computing was clear: the iPad Pro was it.
As I mulled over buying the iPad Pro, one question kept holding me back: If Figma is building the future of design tools and Apple is building the future of computing, why don’t they work well with each other?
I realized that to bring about a truly on-the-go Figma, one simply needs to untether it from the desktop setup — stripping away the keyboard and mouse — and tie in that of a tablet — adding stylus and multi-touch support. Giving it more thought, I realized that doing so wasn’t that simple. However, if a design tool was the only thing missing from the portable and accessible experience tablets promised, I decided I had to solve the problem myself.
Six months later, I’m happy to introduce Dimension — a blueprint to adapt Figma from desktop to tablet.
I started Dimension with three principles:
- Usability — Figma should have feature parity between platforms.
- Implementability — Dimension should be easy to implement for the Figma team, in order to be rolled out as soon as possible.
- Customizability — Dimension shouldn’t be based on solely my workflow, it should be open-sourced to incorporate others’.
These priorities set Dimension’s baseline: unless met, no one would opt to design on tablet, Figma wouldn’t opt to implement Dimension, and if I wasn’t able to adhere to them, the project wasn’t worth the effort.
These priorities also spell out the table of contents for this article. First, I cover Usability, where I dive into Dimension’s main proposals to bring desktop’s efficiency and full feature-set to tablet. Next, I cover Implementability, in which I discuss how Dimension is designed both for rapid integration by Figma and extensive expansion by the community. Lastly, I cover Customizability: every proposal mentioned in this post was designed to be redesigned, so it’s only fitting to talk about the ways to contribute to the project.
And, while these priorities provide a readable insight here, they also provide an interactive one on Dimension’s website. If you’re more visual, head over there; if not, plunge into the process below.
Usability: bringing a fully-featured and easy-to-use Figma to tablet
You interact with a laptop and a tablet very differently. On a laptop, you use a keyboard and trackpad; on a tablet, you have a multi-touch screen and stylus. With Dimension’s job being to bridge that gap, both effectively and completely, it uses the latter two pieces of hardware to replace the former.
Cutting the keyboard
While using a computer, keyboard shortcuts dominate a designer’s workflow. The first step I took to bringing their efficiency to tablet, although seemingly backward, was layering every hardware hotkey — Command (⌘), Option (⌥), Control (⌃), Shift (⇧), and Arrow Keys — over Figma’s UI.
However, after mapping out each shortcut, I saw that, with the availability of gestures, these keys could be combined. Quickly after, Dimension had its portable answer: Digital Keys and Gestures.
The first key in question, Command (⌘), was transformed into Action, a more suitable name for its purpose. Action retains Command’s functionality when paired with the Arrow Keys (e.g. reducing a shape’s width) and replaces both Command and Control’s (⌃) functionality when paired with letter keys. Dragging up while pressing Action triggers the Action menu to appear, enabling designers to select an action in one swipe.
Option was transformed too: into Modify. Modify retains Option’s (⌥) functionality, but is combined with multi-touch to enable more. For example, Option Hovering on desktop shows the distance between a selected shape and another close by. On tablet, pressing Modify while tapping multiple shapes at once shows the distance between not just two of them, but all..
While the Arrow Keys keep their name, Dimension transforms them as well, combining them with Shift (⇧). On desktop, Shift is paired with the Arrow Keys solely for super-nudging. On tablet, designers can flick up on an Arrow Key to super-nudge, removing the need for an extra press.
These Digital Keys provide not only the familiarity of their hardware counterparts — easing the transition to tablet for designers — but also a more intuitive shortcut workflow. While user testing Dimensions, users would often mention that gesturing directly on top of an element is much easier to learn for new designers learning the correlation between a letter and the shortcut it triggers.
Saying hi to the stylus and moving over the mouse
The other hardware feature of a computer, the trackpad, came next. Of the trackpad’s two capabilities — hovering and selecting — tablets only support one. For Dimension to build in support for both meant bringing two secret weapons: Stylus and Sticky Taps.
Styli, like Apple Pencil, carry the familiarity and, more importantly, the precision of a trackpad or mouse. Selecting shapes, layers, and options is a key aspect of designers’ workflows; styli enable designers to not only do so on tablet, but do so with more freedom and speed. Actions that would require mousing across the entire screen (e.g. clicking the new shape menu) turn into rotating and tapping with a stylus.
Paired with a gesture of their own, styli also make up for the lack of hover. On tablet, pressing and dragging simultaneously enable designers to enter a menu and select an option in one fluid motion. As seen in the Action Panel above and the Shape Menu below, this makes interactions a breeze.
Integrating input
Making sure designers could interact as efficiently as possible is a major theme of Dimension. Inputting data, such as numbers, became a crucial part of this theme’s puzzle.
Within Dimension, when a designer selects an input field (e.g. a text field’s font size), two methods of input become available: the Keypad and Slider.
Without a keyboard to type with, a number keypad drops down from the field in focus, allowing a designer to type in a value.
Second, a slider appears next to the inspector, enabling them to scrub at various speeds — 10px, 1px, .5px — just like they can when watching a video on tablet.
Implementability: sticking to the basics to ensure an easy switch
Together with the rest of Figma’s tablet UI, the features outlined in Usability fulfill Dimension’s goal of being equally capable as Figma on desktop. Gestures and multi-touch bring designers closer to the elements they constantly adjust and the addition of stylus support and sticky taps help designers interact with every aspect of Figma. But, while designing each of these features, it was crucial to keep in mind their simplicity.
Figma has a long list of feature requests; for the team to champion Dimension’s implementation, version one of the blueprint required being aware of Figma’s engineering roadmap and how Dimension would fit within it.
What’s the path forward to Figma implementing Dimension?
Throughout working on Dimension, this requirement stayed front and center: deliberate design decisions were guided by attempts to improve ease of implementation.
In an effort to reduce the time needed for Figma to integrate Dimension UI components within their design system, each one was kept consistent with Figma’s existing visual language.
In an effort to reduce the time needed to build these components, UI components such as the Digital Keys were designed to retain a connection to their hardware counterparts’ UX and underlying code. Stylus support and sticky taps were designed in the same vein: interacting with the majority of Dimension’s UI was intended to be identical to doing so with Figma’s current desktop UI.
And, in an effort to get a baseline version of Figma for tablet up and running, visions of deeper tablet integrations were minimalized. With Figma’s recent announcement of an external plugin framework, developers can fill in the gaps such as bringing tablet-based illustration tools into the product design workflow.
These efforts start to push Dimension from an ideation stage into an implementation stage, but they’re missing a crucial last piece of the puzzle: you.
If Figma is building the future of design tools and Apple is building the future of computing, why don’t they work well with each other?
Customizability: designing for, and with, different perspectives
From the start, I attempted to design Dimension with as many perspectives and workflows in mind. Nonetheless, it’s impossible for me to have done so perfectly.
That’s why, from the start, I designed Dimension with the goal of open-sourcing it. Everything — from Dimension’s master planning file to website prototypes — was designed in Figma, allowing anyone to copy, edit, and merge back in with feedback.
By filling out a form, you can get access to the mother lode of Dimension files.
By sharing Dimension, you can bring about more awareness and more contributors.
And, by asking Figma to pay attention to Dimension, we can raise the company’s attention to the need for a tablet design tool.
So, what’s next?
Dimension has been a months-long project, but there are many more months to come. The more contributions to, shares of, and dialogues created around Dimension, the closer Figma will come to implementing it and opening up design to all. As the blueprint that is Dimension improves, so do the chances of it being built.
To learn more about Dimension, check out the website (which is actually a Figma prototype): theostrauss.com/dimension
To learn more about me, check out my website: theostrauss.com /twitter /medium /linkedin
And to all the people who helped me: thank you.
Acknowledgments
Dimension wouldn’t be possible without the amazing help of:
- Andrew Shum, who gave feedback all the way through
- Case Sandberg, who helped me amazingly shoot Dimension’s demos
- Daniel Burka, who inspired me with open-source design
- Devin Mancuso, who pushed me to actually design Dimension in the first place
- Jordan Singer, who is my design guru and ultimate Product Hunter
- MDS, who retweeted me when no one else did
- Sam Eckert, who also retweeted me when no one else did
- Tushar Paliwal, who animated Dimension’s demos at the speed of light
- Union Square Apple Store Employees, who sold me an iPad and let me return it a week later
- Upper West Side Apple Store Employees, who allowed me to work on Dimension no questions asked
