Config2024, what’s new? — a very brief summary

Figma config 2024

Hello there 👋 I’m pretty sure that you came across a million article about what’s new in Figma. So in this article we won’t dive deep into the details

Let’s keep it Short and Simple. So what’s new?

Table of content

💅Figma and Figjam — New UI
🧑‍💻 Dev mode improvements
✨ ⌘K : AI + Figma
🖥️ FIGMA SLIDES

Figma new UI

💅Figma and Figjam — New UI

• The tool bar is now at the bottom of the page “floating”
• The side panels (left and right) are also “floating”.
• Pages for Figjam : just like with Figma you can add multiple pages

⚡️The properties panel gets a fresh look

properties of a component tweaks

• The properties of a component are now in the top and no longer some how in the middle
• The panel is now resizable
• All the actions related to a layer are now in the properties panel and no more in the top of the page

🔧 Auto layout tweaks

Suggest auto layout feature

• A new feature “Suggest auto layout” will automatically create nested frames for you
• Snapping to “fill” is now automatic so no need to manually add the fill property when adding an element inside another
• Absolute positioning with Ctrl^ : press Ctrl^ (mac user) when dragging and dropping an object in an auto layout to give it an absolute position

Figma dev mode

🧑‍💻 Dev mode improvements

✏️ A new “edited” state

the new “edited” state for dev mode

• This state will indicate when a “ready for dev” frame has been edited
• A comment section : so the designer can describe what are the new changes in a frame

📃 A “Ready for dev” view

the new “ready for dev” view for dev mode

This notion-like view will display only the frames that are marked as “ready for dev” so the developers won’t be lost in all the frames

🔍 The focus view

the new “focus view” for dev mode

• Clicking on a frame from the “Ready for dev” view will bring you to the focus view
• You (a developer) will be able to focus on one single frame
• You can see all the changes done through a history panel and view each version independently
• You can “mark as complete” a design, the designer will be then notified.

📱 A responsive prototype viewer

This will allow you to see how the design behave across the different screen sizes

🔗 Code connect

Vscode screenshot on pushing the code to Figma

• You can now push your own code into Figma (from vscode to Figma) : that way if a component was already coded it will displayed when the Figma component is selected
• Now when you change the component properties the code will change accordingly

The new AI feature for Figma

✨ ⌘K : AI + Figma

🪄 Make something

Now with a click you can tell Figma to make a design or a prototype

🕵️‍♀️ Find something

• Now you can drag and drop a screenshot of a frame and tell Figma to find. Figma will then generate a vectorized version of the screen
• You can also type a sentence that you remember from a screen and Figma will also find it
• You can sketch an icon and Figma will suggest an icon that looks like what you’ve sketched (in your design, in other designers or in the Figma community)

📝 Data

The new duplicate feature that generates content

• Filling data : After creating a table it’s time to fill every cell with the right text so the screen will look realistic, Figma now will do that for you!
• ⌘D ++ : After filling the first two rows (using autolayout) a handle will appear, (just like the one that used to be in adobe XD) dragging that handle will generate rows with appropriate text
• Traduction: select a text and change its language with two clicks
• Generate images and remove background: no further explanation needed
• Bye Lorem Ipsum : selected the text and tell Figma to generate the type of content you want to insert

Renaming layers

Figma can now rename all the “Frame 869762372369”, “Frame 92383290073” with a click

🖥️ FIGMA SLIIIIIIIIDES

Figma slides interface

A new product for presentation but not any product it’s a Figma product. So here are the cool things :

• Intuitive colors : changing the background will automatically change the text color so the latter will always be readable
• A grid view, will make it easier to organize your slides by dragging and dropping an entire section or just one slide
• Themes : You can add theme AND you can add your design system as a theme too
• Smart Animate : The cool animations from Figma are available too
• Text Tone : You can custom the tone of your text making it as casual, processionnal, concise, expanded as you want and it will automatically update
• Bring in Figma in slide : You can copy and paste your Figma design into the slide and directly edit it in the slide
• Bring in Prototypes in slide :You can copy and paste your prototype link and play it in the slide
• Some interactivity with the viewer : You can add polls, alignements into the slide adding viewer interactivity within the presentation

That’s a Wrap ! ✌️