Figma

Figma is a tool for people to create, share, and test designs for websites, mobile apps, and other digital experiences. It is ideal for wireframing and creating layered prototypes which can be collaborated on, referenced by developers and iterated upon. This is due to the various feedback and component editing options. Recently there have been a variety of new features that improve the experience for ux designers design capabilites as well as the ease of use in creating assets accessible by developers.

Auto Layout

Figma's recent updates to Auto Layout have streamlined the process for handling responsive designs, particularly in tasks like adjusting sizes. Previously, Auto Layout lacked the ability to automatically wrap content within a designated area when responsiveness was enabled, often resulting in crowded or broken components when designs were scaled down.

However, in its latest update, Figma introduced a wrapping feature for Auto Layout. This addition enables responsive designs to automatically adjust content onto new lines, preventing cluttered layouts. Additionally, Figma's Auto Layout updates now offer controls for setting minimum and maximum widths and heights for content. This added functionality provides greater control over design elements, ensuring a more organized and cohesive layout, even in responsive states.

Variables

Figma's introduction of variables marks a significant advancement, empowering designers to establish reusable values for elements like colors, text styles, and dimensions. These variables can then be easily applied across various design components and prototyping actions.

Within Figma, variables now operate akin to design tokens, storing distinct values for elements' appearances, including text formatting and spacing. Currently, Figma supports four types of variables: Color, Number, String (Text), and Boolean.

Here is a brief overview:

Color variables These variables can be applied to a solid fill or a stroke. You can define custom values when you're defining variables or connect them to values from existing libraries. That means that if you need to change the color of a variable linked to a value from an existing library, you can just change the source variable instead of each and every instance of it. This makes updating color values much faster.
Number variables Adding these variables means assigning a numerical value to define spacing, padding, radius, width, and height.
Boolean variables By assigning boolean values to a variable, we can control the visibility of a layer or an instance.
String variables String variables can be applied to text. They will help teams who work on projects with multiple languages in terms of localization and content management, but it also makes it easier to work with repeated content.

Each variable type serves as a theming option, accommodating diverse design needs, whether adapting to different screen sizes or languages. With the latest inclusion of Figma Variables, designers gain seamless flexibility in toggling between various design element properties.

Example Variable Usage

For example, suppose you already have a design tailored for a standard user and now need to develop a distinct design for a super user. In your standard user design, you include the following details:

Credit balance: $500 Course fees: $300 and $650 However, for the super user, you've been tasked with modifying these figures and replacing the label 'Standard user' with 'Super user'.

How do Variables solve this

Utilizing Variables allows you to input values for content adjustments, be it text, numbers, or colors, and seamlessly integrate them into your new design with ease.

Establishing a database of diverse variables for distinct design components enables automatic customization of your designs as required.

Advanced Prototype Capabilities Using Variables

In addition to facilitating easy content modification within designs, variables offer the opportunity to craft sophisticated dynamic prototypes. Through the integration of mathematical expressions, designers can elevate their prototypes, enabling advanced user interactions like purchasing actions and beyond.

Likewise, Boolean variables are now instrumental in prototype enhancement. By employing Boolean variables, designers can designate 'true' or 'false' values to particular design elements. Figma will then recognize when to activate these values and their corresponding opposites during prototype interactions.

Dev Mode

One standout feature unveiled during Figma Config 2023 is Dev Mode, igniting excitement within the development community. This innovative addition provides developers with an exclusive workspace to seamlessly navigate design files and translate them into code.

Dev Mode bridges the gap between designers and developers, fostering collaboration within a unified space. This integration promotes clearer communication between the two groups, thereby minimizing the risk of losing crucial design details during the handoff to developers.

Functioning akin to a browser inspector for designs within Figma, Dev Mode equips developers with the necessary information to translate designs into code effortlessly. This includes access to details such as colors, spacing, dimensions, assets, and more. Additionally, designers gain the capability to export assets from the design, all conveniently located in one place.

Within Figma's ecosystem, designers can easily designate their designs as 'Ready for Dev' using Figma's Sections feature. This handy tag enables developers to identify the specific sections of the design file ready for coding. Furthermore, developers can swiftly compare design modifications, streamlining the iterative process.

Seamless Coding with Dev Mode and VS Code (Visual Studio Code plugin)

While developers are immersed in Dev Mode, Figma seamlessly integrates with essential coding tools, including a Visual Studio Code (VS Code) plugin.

This functionality empowers developers to code effortlessly alongside the design, with the Figma interface conveniently accessible alongside their coding screen. By selecting any design element within Figma, developers can instantly access its corresponding code, simplifying the process of incorporating design elements directly into their codebase.

AI Tools

One of the standout updates is the incorporation of AI into FigJam, Figma's collaborative brainstorming and ideation tool. This AI integration enhances the speed and efficiency with which design teams generate fresh ideas.

New AI functionalities in FigJam include:

Text prompts for generating templates or charts, summarizing note contents, and grouping notes by theme.
Vector illustration generation and text copying capabilities.
Autocomplete assistance, wherein AI aids in completing the text being typed within FigJam.
Word suggestions, with AI recommending relevant words based on the ongoing text input.
Image suggestions, where AI offers relevant image recommendations based on the ongoing text input.