Published on Jul 27, 2023
In the fast-paced world of design, efficiency is crucial to stay ahead of the competition and deliver exceptional results. Fortunately, modern design tools like Figma offer a plethora of features that can significantly enhance your productivity.
Over the past few days, our team has been buzzing with excitement ever since Figma released its most significant update yet. We can’t stop discussing the amazing new updates and features that have made our work easier than ever before. For designers, Figma is an indispensable tool for day-to-day operations and their workflow revolves around Figma. In this article, we will share the top 3 features that have significantly improved our lives as designers and given our workflow a much-needed boost. So, without further ado, let’s jump right in! ��
Auto Layout
The auto layout was very powerful before but with the latest update, Figma added a new wrap feature into it which makes it more powerful than ever. Let me explain this feature with an example. Let’s say you have tags that scroll.
Now when you make responsive variants of this mobile screen you have to reframe those components and rearrange them again but with this wrap feature you just have to resize the parent frame and that’s it! Boom �� your responsive tag component is ready, how awesome is this?
Auto Layout also has Min-Width and Max-Width options in Height and Weight which helps you to set min and max width to any component which means less than min-width you can set the component to look to any responsive screen. This way you have a fully responsive component that is ready to use in any size of art-board.
If you use Auto Layout more frequently it saves you so much time in situations when you are making changes in design eg, when you change content or update content, because of Auto Layout, it adjusts itself accordingly and you don’t have to change the layout manually again according to content which is a huge time saver and ultimately boosts your workflow.
Variables
Variables Design tokens: Variables in Figma works awesome.
Now you might be wondering what is all so special about variables. They are just placeholders that hold value and you can use them anywhere but in design, it’s more than that. Let’s understand the power of variables with an example.
Assume that you are working on a Design system that has Light and Dark modes. Now traditionally you will work on both designs but with Figma, you can now create variables of colors for both Light and Dark modes and assign colors to a component. Once this is done, you just need to change the Art-board parent variable to dark and your dark mode design is done.
Variables can be used anywhere- in width, height, colorcode, and Text style. It will help you in prototyping which will be covered later. Variables will change your Design and Prototyping game to the next level for sure.
Dev Mode
Dev mode is built for developers but it also helps the designers when you give design handoff to them. With the latest updates, it has become more powerful than ever which makes the handoff process very easy. Let’s learn more about Dev Mode.
If you click on the frame menu in Figma, with the Frame and Slice tool you can now see one more tool called section which is very much similar to the art-board tool but it’s for Developers. How?
When you create a new section and add your developer-ready art-boards into them (Drag and Drop will work) set the status to Mark as ready for Dev which is a small button just beside the section title. As a designer, you are pretty much done now even though your Figma file has hundreds of artboards, but only the developer will be able to work on those artboards in the developer-ready section.
Now you must be thinking about how it boosts a designer’s workflow. Post development, support is also a part of the designer workflow which means this feature will not only save your time in development.
Dev Mode Features:
1. Track design history: This simply means now the developer can see the changes you made between 2 or more designs and also compare them. This feature will help them track product improvement over time and better collaboration.
2. Dev Resources: You can also mention your developer links to the developers to help them better understand and build a component.
3. Code Section: This will remind you of the tool Zeplin which is very similar but more powerful and has a code layout that looks like the Chrome dev tool layout version. It shows the Margin, Border, Padding, Width, and Height information of a selected component or object. Under these, we have layout and style sections that generate CSS code for that selected thing. The code section also has Units (Px, rem, custom scale) options and also has a dropdown that generates IOS(SwiftUI, UIKit), Android(Compose, XML), and CSS code which is useful for all kinds of developers.
The rest of the features are the same like colours and Assets and Export which helps in development.
One more thing that helps the developers to work is the new Figma for VSCode plugin which now can be installed in VSCode.
So basically you can Open any Figma Document in the VSCode editor and see the Side-by-side view of your Design on the left side while you are writing the code for it.
Conclusion:
In conclusion, embracing these three powerful features can supercharge your design efficiency by up to 50%, meet tight deadlines with ease, and wow your clients with exceptional designs, whether you are a seasoned designer looking to enhance your skills or a newcomer eager to make an impact.
Want to read more on designing?
Check out our latest blog: Response Biases in User Research: A Guide for Culturally and Behaviorally Relevant Insights
About the Author: Akshay Vinchurkar is a lead designer at Mantra Labs with 5 years of experience in Design. He is also an active Member of the Figma Community and loves to write about Open source and Design.
Knowledge thats worth delivered in your inbox
