The Past
A decade ago, Dylan Field and Evan Wallace were busy developing Figma, an obscure web application known only to a handful of VCs, designers, and engineers. Some designers got early access at the end of 2015, but the app wouldn't be released publicly until the following year. Today, it's the default application for millions of software designers creating UI/UX designs.
I first heard mention of Figma in 2016 when Ryan Putnam posted an icon set on Dribbble that he had created using Figma. I had followed Ryan's work for years - illustrations and icons full of rich detail and beautifully unique characters. He had primarily used Adobe Illustrator for his work, which I also used. In the post, he linked a tutorial showing how he created them using a new application called "Figma." I was intrigued, so I checked out the tutorial and the example icon file he had designed.
At the time, the most enticing feature of Figma was real-time collaboration (called "multiplayer editing" during the v1 release). Originally billed as The Collaborative Interface Design Tool, Figma offered a different way for software designers to create together. There were other features such as vector networks - impressive in their own right - as well as the ability to import existing Sketch (the biggest UI/UX design tool competitor at the time) files, which made for a compelling case to give Figma a try - but real-time collaboration was the distinction that made the difference. I knew what I was witnessing was impactful, but I couldn't grasp the full scope of this impact on future work. Fundamentally, the software design industry was about to shift seismically from static, locally edited work to shared real-time access. Figma was now to Sketch/Photoshop/Illustrator, as Google Docs was to Microsoft Word before.
Before Figma, collaborating on design work meant:
- Designer #1 works locally in Sketch, Adobe Photoshop, and/or Illustrator
- Designer #1 saves his/her work to a file (.sketch, .psd, and/or .ai, respectively)
- Designer #1 attaches the file(s) in an email or syncs the file(s) to a shared Dropbox folder and sends the email/link to Designer #2.
- Designer #2 downloads/accesses the file(s) locally and begins working
- While Designer #2 (or #3 or #4) works on the file(s), the other designer(s) must work on different files to avoid file conflicts. Suppose a designer wants to work on the file(s) before receiving updates from collaborators. In that case, he/she must first duplicate the original file(s), then work locally on updates, and wait until the other designer(s) shares his/her updates before manually reviewing to ensure no conflicts occur.
Unsurprisingly, this collaboration process was neither efficient nor enjoyable. Just recounting and explaining the method I used to go through regularly to create designs with team members was a trip down memory lane I don't care to relive. It also didn't foster creativity, which is essential to people often called "professional creatives." But it's not like other companies weren't trying to solve this issue of making collaboration less of a headache. Shortly after Figma launched publicly, Abstract emerged as a way to manage Sketch files similar to how software engineers manage code collaboration and version control using Git.
But Figma was proposing something more than just a way to manage files. It was real-time, multiple-cursors-moving-around-screen-in-concert, understand-what-others-are-working-on, live-design synchronization. No more saving your files (at all, because Figma saves updates automatically every few seconds) and sharing them with other designers to work on them. What you worked on was what others saw, and vice versa.
Real-time collaboration was (and continues to be) a game-changing feature.
The Present
Over the years, Figma has added helpful features that have made designing and prototyping a more rewarding experience. I don’t miss exporting every screen/interaction state individually as a collection of PNG images and then uploading them to InVision (now defunct) to create clickable areas on a screen, only to re-do this tedious series of steps every time a client wanted the designs revised.
Since I began designing in 2009, my primary design tool has changed several times. Starting with Adobe Photoshop, I later shifted to Adobe Illustrator in 2013, Sketch in 2014, and Figma in 2019. There was overlap between these tools, as I would complete some tasks using one tool and then begin to incorporate the next one until it eventually replaced the previous one. Each tool I switched to brought additional features, speed, and efficiency.
While it's not the only design tool I use these days, Figma is the tool I use the most often and for the broadest range of design tasks - everything from icon design to branding to UX/UI design and even sketching building plans for house renovation projects.
The Future (Hopefully)
Though it introduced a much-needed upgrade to software design applications, while Figma has morphed from a scrappy disruptor into the industry default, it has gotten complacent with adding the appropriate features. It took years for frustratingly basic (in terms of the necessity to the user, not the ease for engineers to build them) features such as P3 color support, the ability to add gradients (as opposed to only fill styles) to a design system, rapidly updated Frame template sizing for iOS devices, sticky positioning for Frames in Prototypes, drag-and-drop to move Prototypes into a new window, etc. While all of these features eventually shipped, there are nonetheless several missing features that would make it an even more powerful instrument.
1. Frame-Based Percentage & Calculated Values
It's perplexing yet promising that Frame-based percentage and calc() values are not already supported. Figma recently added "max" and "min" width values while using Auto Layout, so there's near-term optimism for this feature inclusion. Confusingly, nine years after launch, a platform born on the web still lacks standard sizing methods every modern browser employs. Developers routinely use percentages and calculated values, yet Figma doesn't fully support them.
It's worth noting, that Figma somewhat supports using percentages, but it does so in a confusing way. If you set the X value of a layer with a percentage value, that percentage will apply to the previously entered value.
For example, let's say you have a text layer inside a 240px x 240px Frame. Your text layer is currently positioned at x: 32 and y: 32. If you want to move a layer's x or y location, you can type 50% (or any percentage value) into the X or Y field. In this instance, Figma will take the initial location value of 32 and apply the percentage calculation, resulting in 16.
You should be able to size an element x% of its frame size. I can't tell you how often I'm working on an aspect of a UI, and I have to click out of what I'm working on, check the size of the surrounding frame, and then go back to the original item I was working on to adjust its size. The equation format should determine how the math is applied.
- Input:
50%in width or height field. Result: Resize the selected element to 50% of the containing or parent Frame size. If the highest level (or outermost) Frame is the selected element when this value is typed, resize the main Frame to 50% of its width or height. - Input:
value/2in width or height field. Result: Divide the typed value by half (the current functionality of Figma and many other design tools).
The commonly used CSS calc() function isn't supported even though, behind the scenes, Figma is performing calc() functions and providing this code in the "Copy as code" -> "Copy CSS" content. Here's code copied from Figma, demonstrating how it aligns an object within a Frame: top: calc(50% - 16px/2 - 1.5px)
I'd love to quickly type a percentage or calculated value, just like I can do in CSS, and modify content based on the surrounding frame. You can currently type simple calculations such as 256-64, rendering 192px. However, this doesn't account for complex situations where you want the element sized based on a percentage value plus or minus a fixed pixel value. This formatting would appear as width: calc(100% - 16px).
2. Auto Apply Variable
When changing the value of a frame's attributes (whether the gap in Auto Layout, border-radius amount, etc.), when you select "Apply Variable," you are shown a dropdown of all the variables in your design system. Instead, it would be great to have an "Auto Apply" option directly in the field, next to the current icon, which, although labeled "Apply Variable," should instead be called "Select Variable" because it only opens a dropdown and doesn't apply anything itself. This solution might seem minor, saving only a single click. But those clicks add up - Figma burdens users with every variable interaction. Particularly since Variables are a relatively recent feature, many projects likely don't have Variables due partly to the manual process of going through and adding them to each Component and/or Frame.
As for the Variables dropdown, there are two improvements I propose:
- Only show the variables that apply to the attribute you’re adjusting. Currently, if, let's say, you're changing the gap amount, you'll see drop shadow variables, corner radius variables, etc, which are not applicable. The software should be intelligent enough to differentiate between variable amounts. Figma AI should be utilized here. Auto-detect the labeling of a variable and apply it to only that parameter. You can still have an option in the Variable dropdown that says "Show all variables," similar to how Selection Colors are hidden in particular views until a user clicks "Show selection colors" (which is something I'd recommend removing as it provides unnecessary friction).
- Apply the variable automatically if it's present in the design system. Better still, if a user does this once, ask if they would like to take this action automatically, and then, if they opt-in, make this selection by default for future changes. Let a user decide if they wish to apply the change to all pages, only this page, or only this frame.
3. Offset Sticky Elements
Currently, to “stack” or have multiple sticky position elements shown together, you must create a hack/workaround wherein you frame the sticky position item with essentially a “ghost” frame - without a background fill or other styling properties but simply a container that adds virtual padding on the top (or bottom/left/right depending on the position of the sticky element in the design) so that when you are scrolling in the prototype, each sticky element is still visible.
Offset sticky elements would make creating complex UI easier. Users could place a row of sub-filters beneath a fixed navbar and have content stick to the top of the page at certain scroll intervals. Users could also easily demonstrate sticky table headers without needing workarounds that break Auto Layout.
4. Dev Mode Improvements
As someone who designs and develops applications, I appreciate design tools that give me an easier on-ramp into the code I'll be writing. Sometimes, I'll design the app in code, building the UI/UX as I code the app functionality, but there's always some aspect of the work that involves creating content in a design tool. I frequently check the size/layout of Components and Frames to ensure that the codebase matches these designs.
Figma has long offered a way to "inspect" the design's underlying structure, checking the spacing/sizing/positioning and copying code that approximates the designs created. I say "approximates" because Figma has a limited (if any - at least in terms of what is known to the public) understanding of how these elements are going to interact with your site or application code - various plugins attempt to "bridge the gap" between design and development.
When Figma first released Dev Mode in the middle of 2023, it seemed like a blatant cash grab to charge enterprise customers more money for the inspection features that had existed in Figma for years. Capitalistically, it was clever - if they could charge more money to the same companies for engineers to see how the designs are constructed, they could increase revenue and get more team members reliant on their tool - instead of only their core audience of designers. But maybe I was being too cynical. The feature has been live for over a year, so I decided to try Dev Mode to see how it performed.
If I had to provide a one-word review of Dev Mode in January 2025, it would be “inconsistent.“ To give Dev Mode a fair assessment, I inspected Components built using Auto Layout with clearly labeled structures. Using Figma in the way it was intended, I still get lackluster results in Dev Mode. Sometimes, I'll see the typical inspector view I expect to see, while other times, only some parameters appear. This results in needing to click through several sections of a Component to understand the layout and spacing of everything. Worse still, unlike when using "Design" mode in Figma, holding "Shift" while clicking on multiple elements doesn't let you select both components to see the layout structure.
I like to have my designs on one side of the screen (or on another external display), with the layout/spacing/sizing inspection details shown persistently, and then have a live browser window open on the other side of the screen, and then be able to code the work to these layout/spacing/sizing specs directly. I have to repeatedly jump between Figma and the code editor to select different components of the Component to see different layout/spacing/sizing details. It feels too half-baked at this stage of its life cycle to warrant a separate $25/month cost for the Organization plan. If you’re going to charge that much for this feature, let’s improve it significantly.
The most popular front-end frameworks (React, Svelte, SwiftUI, etc.) get significant updates at least once a year (and many get minor updates several times a quarter), and this means that design software will have to try to keep up with these changes as well as ship their feature updates. I'm not suggesting that Figma attempts to offer production code from the design work being created. However, it would be nice to have a better visual representation of how frames and components are constructed to make developing these designs as straightforward as possible. I envisioned how Figma could better show multiple values simultaneously.
5. Real Offline Support
Figma is a web-based platform, but offline features are still critical for some users. I exclusively utilize the Figma macOS desktop application and understand that Figma for Mac is an Electron app. However, I still expect to have ample offline feature support.
Some distinctions Figma desktop "native" applications should have over their browser counterparts:
- Locally Stored Content Download content from all open tabs in the background and store it locally. This content doesn't need to be dynamically re-downloaded (although that would be nice) at a specific interval. This way, if a user loses an internet connection, he/she can still click into the already opened tabs and view the content without getting the error message that currently displays when Figma attempts to re-connect to the tab. Of course, other improvements will need to be made to support the feature: a storage limit option provided to ensure local storage doesn't fill up with Figma files, memory resources need to be much better managed, and this content needs to be cached for performance.
- Local, Offline Prototypes When offline, allow Prototype views to display the local updates to a design file without relying on a network connection. Today, you can neither open a new Prototype view nor view design updates in a previously opened Prototype view when not connected to the internet. Viewing updates in Prototype view is critical to my work, and it doesn't work without an internet connection. When offline, Figma should treat the Prototype views like a localhost. If you're developing a web application and don't have an internet connection, you can still update any aspects of the front-end that don't require a reload of connected resources.
Network connections can be spotty, and designers work in all environments. Whether the internet connection is slow or temporarily out, you cannot continue to work if you aren't network-connected. In 2025, great desktop native applications function while offline.
Closing Remarks
This article ended up being much longer than initially anticipated. Most of my writing hosted here will be shorter-form, but it's nice to explore a topic I am passionate about deeply. Thank you for making it to the end of this over 2,700-word journey. Hopefully, Figma grants some or all of these feature wishes this year. Either way, I hope Figma continues to innovate. It's a great product, and I hope it will remain so for many years.
