Making the case for Figma auto layout as the best approach to no-code so far
Being a feature that seem to be the gream reaper for many designers, we cannot overlook its potential as our best path to getting from design to code.
Webflow recently announced its own Figma plugin that helps designers convert their Figma artefacts into viewport-ready Webflow elements. Users of the plug-in will only have to copy and paste their design artefacts into Webflow to edit or publish a site. One important property to consider while preparing these elements was the application of auto layout.
Many other plugins that sought to make the transition from a Figma file seamless and without any code written, discovered that instead of building a new system for such conversions, they’re better off making a good use of the pre-existing system set by Figma, auto layout.
Figma launched auto layout back in December 2019. Ever since then, it has seen more revisions more than majority of feature sets on their app. The last major updates to the feature was in May 2022 at their design event, Config2022. The constant refining made the feature even more powerful and useful but might have led to many dropping off from following up with learning the new work arounds.
Let’s take some time to appreciate the thinking behind the feature and how well its execution was. Designing for designers isn’t an easy task. Every decision you make on what goes where is up at the stakes — pixel for pixel. Auto layout imitates the box model of containing and assigning heirachy to elements. In this manner, designers can build and get their work closer to production for developers.
Just like naming layers, not every designer would consider Figma auto layout as a deal breaker. But for others, it is as important as the elements themselves. This sharp divide has led to debates on the usefulness of the feature beyond just the design canvas in the Figma workspace. Until now.
I wrote in an article recently on the race to become the domineering tool in the product design market and the major hurdle to cross was how comapnies that design for designers intend to fix getting designers closer to code and maintaining expressiveness. Despite realizing that designers require the lack of constraints in their workspace to function properly, I opined that the lack of constraints itself, is the opposite of what codes are. I mentioned:
It is important to learn that while designers seek to think and operate without structures and constraints, the laws that govern the communication of humans and machines require structures to function properly.
Developments as regards Webflow launching its own Figma plugin reminded me once again about how difficult it is to get designers familiar with working in a constrained space given how much freedom they’re used to — having worked in tools like Figma. It also reminds me that if there’s a clear path and consistent path to no-code, it is auto layout or something that evolves from it.
Typically, developer-first no-code companies tried so hard to get designers on board but could only try. Why? Their workflow was one that designers weren’t familiar with. Currently in the market, only Figma seem to be the designers-first tool with the current structure to push a feature that designers will be willing to follow regardless of the learning curve. You can bet on it that if Figma ever builds anything that takes your design from canvas and turns it into code, it will be built on the existing auto layout feature.
We might have seen some improvements to the feature overtime but its core mode of operation remains the same and that makes it just the right candidate to usher us into a proper no-code era — right from the canvas. It exists as the mid-point between the expressiveness that designers need and the structure that codes need to function. Whichever new feature that may be built by whichever company is best built like auto layout or an improved version. Building something different and expecting users to catch up isn’t as easy as it seems. New tools that need to catch up will always start with the familiar. This might just be the wake up call you need. Other companies are watching and are more likely to adopt this model into building more design-to-code tools. Start learning to use it, if you haven’t. It will be an advantage.
Every now and then, I am always on the look out for companies who are trying their best to make design to code possible. The contrast that exists between the two worlds makes the problem an interesting one to solve. I believe this is where the best of our imaginations come to play. It’s like the encounter between art and science, the product of this mix will always be a spectacle to behold.
I can’t wait to be a part of the solution.
# # # #
On the side, somebody tell me why Phase hasn’t released their promised design product yet since 2018 when they started building anticipation.
