Written ByYatri Patel

Design

Published:Wed Jul 26 2023

15 mints read

Summary

UX/UI design is a multidisciplinary field that combines creativity, empathy, and problem-solving to craft exceptional digital experiences. Figma is a cloud-based design and prototyping tool that allows designers, teams, and stakeholders to collaborate in real time. From working on design systems to building components, from building layouts to branding, every team needs faster collaboration and an easy-to-go flow to work on. Figma brings here new features, which surely help to bridge the gap between the developers and designers to a vast extent by introducing many such features like developer mode, advanced auto layout, and prototyping.

Table of contents

1. Variables

2. Auto Layout

3. Developer Mode 

4. Advanced prototyping

5. Overall User Experience

6. Conclusion

1. Variables

Variables are reusable definitions like style which can be assigned to various design attributes like colors, numbers, strings, and boolean. Variables can be different things like colors, numbers, or words. They can have different values in different modes. These definitions can easily unlock the ability to localize and preview different UI copies in different languages. It also supports light and dark modes, or you can even create your own themes. Variables can be used as tokens to make design systems better, let's sum it up in a few simple steps. 

(i)Add your entire color palette as a "Primitives" or "Foundation" Collection. 

(ii)Prepare a collection of semantic colors (backgrounds, strokes, text, etc.) as values using references from the Primitives collection.

(iii)At this point, you may also add a mode to make tokens for "Light" & "Dark" themes. 

(iv)If you want to add the final layer to your design system, define the collection of components. It will also include Light & Dark modes. Add variables for "button-background," "modal-stroke," etc., and put references to semantic tokens as values. 

It even allows to add modes for specific device breakpoints. Depending on your project requirements, add the default for desktop, then tablet, and mobile options.

2. Auto-Layout

Figma brings new auto layout features which include wrapping of texts and setting max/min height and width.

(i) Wrap:

Apart from horizontal and vertical direction new auto layout features include wrap features that allow objects to wrap in new lines. Here you can specify horizontal as well as vertical gaps you want to apply. You can achieve space between by typing in “Auto” into the fields or by double clicking on the auto layout grid. It also has a truncate text setting with allows you to set a maximum number of lines to text truncate by. This can be achieved by enabling the text truncation option in the text panel. 

The canvas stacking allows us to change the direction of the auto layout children stack to control how items will overlap with each other, also you can rearrange those stack items. It has also the option to add stroke values to the layout itself.

(ii) Max/Min width:

You can set the maximum/minimum width/height property to ensure consistent component sizes. This can be useful while making responsive cards or other product design requirements. Auto layout frames and components nested within auto layout frames can respond to resizing as well. The nested components are set to fill the container and will scale to fit available space along with their content.

3. Developer Mode

This was a huge update from Figma as 30% of Figma users are developers and understanding developer's requirements and critical needs is vital for any project. Developer mode allows you to switch into developer mode, turn your design into code faster and organize files for production. You can switch to developer mode by toggle option placed in the upper right corner.

(i) Inspector: You can set the maximum/minimum width/height property to ensure consistent component sizes. This can be useful while making responsive cards or other product design requirements. Auto layout frames and components nested within auto layout frames can respond to resizing as well. The nested components are set to fill the container and will scale to fit available space along with their content.

(ii) Design statuses and change comparison: Developers can now see what’s ready for development with section labels. Also, side-by-side and overlay comparisons for changes between versions of a frame are available. Even the smallest differences in visuals and specs are easy to spot. With the version change, it becomes easy for developers to spot and compare the changes made to the file.

(iii) Integrated tools:  You can also integrate plugins like Jira, and GitHub on Figma and can add custom plugins for your organization with view access. Now Figma also has VS code extension, which allows developers to view the inspect properties directly in the VS code without ever having to leave the coding environment.

4. Advanced Prototyping

Figma now has new prototyping experience. The new features make creating prototypes simple, with fewer steps, frames, and connections. Less work for everyone and the ability to have more iterations. No tangled wires anymore!

(i) Prototyping with variables and expressions:

Expressions are operations (mathematical functions) involving values (variable or literal), which can be used to generate dynamic variables. In prototyping, expressions can be used with the “Set Variable” action if the selected variable is a number, string, or boolean type. Expressions can be written inside the fields of the Interaction modal using supported syntax rules, or you can use the dropdown selection picker to choose from suggested variables and operators. Expressions can be used with string, number, and boolean variables.

(ii)Single frame multiple interactions:

By creating and assigning number variables, we can now bring our prototypes to life with expressive animations in a single frame. We can use expressions like adding and subtracting to our design.

(iii)Conditionals:

Prototyping actions have triggers. New updates bring conditional logic, variables, expressions, and modes. Conditional logic allows us to give different outputs based on the user input, for e.g., enabling a button only if all the fields are filled. We can now create interactions with conditional logic to create more customizable flows.

(iv)Inline Preview: This was the most awaited feature. Now, we can have the preview tab as an overlay. No more back and forth between tabs.

5. Overall User Experience

(i)File Browser: The file browser is now redesigned. Shared files tabs and shared project tabs make it easier to see the files. Search, recent, and notifications are available for the whole space. No need to switch spaces anymore.

(ii)Font Picker: It also has a new font picker now so you can view the font style in the dropdown itself.

6. Conclusion

Wrapping up, we’ve seen pretty nice updates from Figma for this year, though few of them are available in paid plans yet it is the coolest release so far. With the increase in product design complexity, design system, and support become crucial to maintaining designers as well as developers.

All these features are worth exploring, especially if you are working as a professional product designer or have large teams of designers and developers to collaborate with. And what we know about Figma is still a drop of the ocean, and we have a lot to discover. I hope you have understood the new feature releases. However, only learning these updates is not a piece of cake, one should practically understand how it works for large teams while maintaining a proper design system. At Bitontree, we assist you in delivering achievable results with our expert guidance and dynamic techniques.

Figma now has its own blog, called Shortcut. You can get all freshly brewed content and updates there.