Figma Config 2024

On Wednesday 26th June, Figma’s kicked off their annual two-day conference at San Francisco’s Moscone Center. Although we couldn't attend in person, we did catch the online stream to get a taste of what Figma will be rolling out to their four-million-strong users love the next few months.

 

From the rollout of Figma’s brand new interface, the new Figma Slides platform, and the long-awaited implementation of artificial intelligence, we’ll be giving our initial reactions to all the features unveiled at this year’s event.

 

Figma UI3

 

The first announcement of Figma Config 2024 was the launch of UI3, a more approachable interface that’s been reorganised for ergonomics to give designers more room to focus on their work.

 

According to an article released during the event, the Figma team highlighted four key reasons for the user interface changes:

 

• To allow the designer's work to take centre stage

• To balance the needs of new users and professional designers

• To adapt to the changing nature of design

• To lay the foundation for Figma's future

 

In essence, the core philosophy behind the redesigned user experience appears to be ensuring that Figma gives designers access to the right tools at the right time.

 

By knowing the context in which designers are likely to require specific tools, Figma can remove anything irrelevant and cut down on the time wasted in scrolling down and clicking into submenus to access the tools that their users are looking for.

 

Sidebars have been given some additional love, with a somewhat 'Miro-esque' aesthetic being applied to both the dual sidebars and product toolbar. Certain tools have been also grouped more intuitively, with width and height properties now positioned next to auto-layout fields for a more streamlined user experience.

 

While we can see the practical use of the ability to either completely hide or change the width of the sidebars, for teams like ours that heavily leverage design systems and variables, the growing need for actions located deep in Figma's old sidebar design means that we may need to keep all sidebars open by default should the new contextual design fail to impress.

 

Some designers who had beta access before Config expressed concerns about certain changes to the Figma user experience. One designer hesitated to go into any specifics but did comment on both the confusing repositioning of some key tools, alongside the removal of other functionality altogether.

 

Certain functions which previously took a single click now take between two or three clicks to action thanks to additional (and somewhat annoying) modal windows, while other functions seem to be buried inside of other submenus, making the transition to UI3 more jarring than the team at Figma must have intended.

 

Introducing Figma Slides

 

Designed to bridge the gap between Figma and dedicated presentation software such as Microsoft PowerPoint, Figma are launching their own dedicated presentation tool under the name of Figma Slides.

 

This new tool offers its users access to basic functionality that has been missing from the core Figma platform. Finally, agencies (like our own) who have been using Figma to create their presentation decks have access to critical tools such as speaker notes without having to rely on handwritten notes or other third-party programs open on a separate screen.

 

For business owners and project managers, the default Slides UI offers all of the core functionality they will come to expect from other presentation software. For the more design-critical among us, Figma Slides includes a dedicated design mode, akin to Dev Mode on Figma, that gives users access to more complex tools such as auto-layout to enable more control over the design of their presentations.

 

A more impressive feature is the ability to pull through specific frames and components directly from Figma that can be viewed and interacted with as if they were working prototypes. Additionally, if changes are made to these components in the background, then they will automatically feed through into Figma Slides without the need to replace or update these components manually.

 

Figma Jumps on the AI Bandwagon

 

In a move that absolutely everybody saw coming, one of Figma's core announcements for Config 2024 was the launch of their proprietary artificial intelligence; Figma AI.

 

Figma AI promises to minimise the wasted time spent during the conceptualisation, editing and deployment phases by providing designers with a handful of time-saving tools to expedite their creative processes.

 

So what's included with Figma AI and how will those features improve the workflows of digital designers moving forward? Let's take a look at some of the core features included with Figma AI, and how we'll be implementing them into our own workflows:

 

Instantly Create Editable Designs

 

One of Figma's primary features for Figma AI at launch is the ability to instantly create editable design templates to help designers beat creative block after staring at a blank canvas in panic. The tool promises to transform an idea into editable designs in just a couple of minutes.

 

Does this mean the end of UI designers as we know it? Looking at some of the AI-generated output, it seems like our jobs are certainly safe for now.

 

The results generated by the Make Designs feature are noticeably basic and lack any real creativity or originality. By its very nature, the most that AI-generated content will ever be capable of outputting is the average of all of the data that is fed into it. For businesses seeking bespoke solutions to unique problems, human designers will still outperform AI every time.

 

It's a little disappointing to see Figma leaning so heavily into the content generation side of AI with these features, especially when it's clear that tools such as this go directly against the interests of their own customer base. Time will have to tell whether this feature will be adopted or abandoned by the wider design community.

 

Auto Rename Layers

 

Since the advent of creative software tools such as Photoshop, there has always been a never-ending battle between the forces of good and evil. The Good, who diligently organise and name all of their layers, and The Evil, those who choose to live in a constant state of chaos as they manically navigate their way through endless lists of 'Frame 243' and 'Rectangle 792'.

 

Thankfully, Figma has announced that they are leveraging AI's power to end this war by introducing the ability to automatically rename all layers in your designs based on content, location and their relationship to other layers in your design.

 

For those who already name their layers manually, then rest assured that Figma AI won't overwrite any of your bespoke naming conventions, focusing instead on only renaming layers that haven't already been assigned unique names.

 

Overall, this is a great feature for speeding up file handover between internal teams and should make it infinitely easier for other designers and developers to find what they're looking for inside your design files without getting lost in a sea of frames along the way.

 

Generate Auto Layout

 

In a similar vein to being able to auto-rename layers, Figma AI also gives users the ability to instantly apply auto-layout to a selected frame, applying contextual groupings to any nested frames to turn static designs into responsive experiences.

 

This has massive potential for us as an agency, particularly when it comes to being brought in to add additional functionality to existing Shopify stores where our existing GAIA design system doesn't need to be implemented from the beginning of the project.

 

For our design team, this can often mean spending hours working through another designer's Figma files and ensuring that tools such as auto layout are not only implemented, but implemented correctly.

 

By using Generate Auto-Layout, we should now be able to instantly clean up some of the design files that we're sent, diving straight into the creation of new sections and features without being bogged down by spending hours on file clean-up first.

 

Dylan Field, Figma Co-founder, did walk through an example of how this works in practice, and while it generated some pretty impressive results for low-to-mid complexity frames, he did advise that for more complex designs further tailoring is likely to be required.

 

Visual Search

 

Another great tool that should help team members find what they're looking for is Figma AI's new Visual Search feature. By either uploading a screenshot, drawing with the pen tool or selecting a specific element on the page, Figma will search across your entire design library and will present a list of similar elements that can be dragged directly into the current page.

 

While this sounds like a real time-saver for small to medium-sized design systems, we do have concerns over the reliability of this feature for enterprise-level projects, where similar elements and components may feature a massive array of context-specific variations that aren't going to be easily discernable from one another in such a small preview window.

 

This has the potential for the wrong components being used in the wrong places, putting a little too much faith in elements looking like they belong as opposed to being manually and reliably sourced from the correct repository.

 

Instant Prototyping

 

Prototyping inside of Figma has been in a pretty good place for the past few years, with tools such as 'smart animate' making the transition between states and frames seamless without the need to painstakingly animate each keyframe along the way.

 

Announced at Config 2024, Figma is leveraging the power of AI to make prototyping even easier thanks to their new Make Prototype tool.

 

By clicking a single button, Figma's artificial intelligence will start to implement some of the most common prototyping interactions, such as creating simple flows between a selection of top-level frames, adding interactions to back or next buttons and linking to individual frames from a navigation menu.

 

Prototyping as a whole has also been given a big boost thanks to the addition of a responsive prototype window, giving designers and developers alike the ability to instantly resize the prototype window to test the responsiveness of frames at different resolutions without needing to manually adjust the width of the frames themselves.

 

Of all of the AI-led features unveiled at Figma Config 2024, this one has the potential to be one of the biggest time-saving features that doesn't pose as much risk of error as tools such as Make Designs and Visual Search may have.

 

Image Generation

 

The power of image-generation tools such as Midjourney baked directly into your favourite design software, Figma's new 'Make Image' feature allows designers to generate images from written prompts and select the most accurate result to use in their designs. If any of the results aren't quite up to scratch, then these results can be regenerated by providing Figma AI with a little more context about what isn't quite working.

 

This is a fantastic addition to Figma and will help us cut down on the many hours wasted searching through stock sites such as Unsplash or iStock for placeholder imagery, allowing us instead to focus on crafting engaging Shopify stores without hitting unnecessary hurdles along the way.

 

Replace Content and Content Generation

 

Now this is where things get exciting. Figma AI's new Replace Content feature not only allows users to generate written content in place of 'lorem ipsum' content, but also gives them the power to generate similar content across duplicated elements throughout their designs.

 

What does this mean, and how is this going to be useful? Figma gives us the following as an example:

 

Let’s say you’re designing a professional networking app and have a card with text layers for a person’s name, title, and bio. Use Rewrite this to generate your first example of a card to fill in the details. Add auto layout to the card’s top level frame and duplicate it, then use Replace content to generate new content for the duplicated cards that matches the style of the original.

 

For commonly appearing sections in Shopify stores such as written testimonials, blog cards or product FAQs, we will now be able to instantly populate our designs with more accurate content. This allows our clients to focus more on the form and functionality of the bespoke sections we create instead of getting caught up on placeholder content that doesn't quite hit the mark.

 

How much will Figma AI cost?

 

For now, the future cost of utilising Figma AI appears to be vague, and nothing more specific than "at least some amount of money".

 

Figma AI will be at least free to use at launch, and will take a data-led approach in understanding how Figma AI is being used by their customers to price the additional functionality accordingly in the future.

 

While it's always great to be given access to new features to experiment with, the change of dev mode from being included with all Figma plans to becoming a paid extra still leaves a bit of a better taste in our mouths, and it feels like we're walking down a familiar path with Figma AI here.

 

What We Felt Was Missing from Config 2024

 

We would have loved to have seen a little more development with the Figma Variables, a feature that has enabled us to finally go all-in on design tokens since its implementation in Config 2023, particularly regarding typography and typographic variables.

 

Currently, typographic variables such as line height still don't support responsive values such as % or em, and are limited to pixel values only, which doesn't seem to make sense given Figma's approach to providing a solid framework for responsive and scalable design systems.

 

Additionally, it would have been great to finally call the actual written values of colour variables through instead of relying on third-party plugins to automatically populate the colour sections of digital brand guidelines and UI kits.

 

Speaking to other UI and UX designers, there also seems to be an increasing demand for usable input fields for prototyping

 

Final Thoughts

 

Overall, Figma Config 2024 certainly felt like a significant milestone for Figma, but many of the features announced still feel a little too early in their infancy to be excited about just yet.

 

Instead, we feel like this year's conference provided more of a launchpad for more exciting updates and developments to come in the future.