Config 2024 – Fresh New Figma UI3 | Now With AI
“Hello, and welcome to config 2024, If you want your product to stand out design is the differentiator, It is your craft that will separate out great products from the obvious solution”
Figma launches three themes:
- Reducing Complexity
- Better Developer Experience
- Artificial Intelligence (AI)
Figma looked so simple in its early days but as time passed it evolved with the time and industry requirements
FigmA UI 3 - Figma Editor New LAyout
At Config 2024, Figma launching a new layout for its designers it’s more like a floating island. Where the toolbar floating at the bottom, the properties panel is still on the right side but floating now and the layer and pages panel is still on the left side but floating as well. The whole new layout is designed in Figma itself. So this Figma UI 3.
Spotlight and Focus Mode
Figma added one more cool thing, when you follow someone in the spotlight it adds you to a kind of focus mood where tools, properties and layers hide and give you more focus to go through the changes of other designers in the spotlight. On exiting the spotlight, the panels appear back.
Properties PAnel
The properties panel on the right-hand side, Prioritises the things that you are used to on the top right when you select a frame, and when you select a component it shows you the component properties on the top right. The properties panel is resizeable like we used to do in past.
There are a few changes in sections like X and Y values can be changed in the position section but height and width are now in at auto layout for a simpler layout.
Things that are relevant to the selection are on the right-hand side as well. So you can create a component, mark it as ready for dev or use some boolean operations
There are a few changes in sections like X and Y values can be changed in the position section but height and width are now in at auto layout for a simpler layout.
Auto Layout
Let’s see what’s new in the auto layout, For the auto layout of complex frames you need to have nested frames which is quite an advanced concept and thing to figure out how to structure in your head.
So Figma made it easy for us, by going to more layout options and clicking suggestion auto layout, you will see all the frames that you need to create an auto layout.
Figma Design Kit
At Config 2024, Figma also bringing Ios 18 and a material 3 kits in Figma. Figma also introduced its Simple Design System kit which is very handy as well. You can also apply different appearances with the ease of a few clicks, you apply dark mode, and light mode and you can also change the responsiveness. These UI kits can easily generate codes by going to dev mode using code connect, the code has already been written for all these components which makes it even easier to go from design to production.
Billing and Sharing
Figma is created for Freelances, Small Industries, Startups and Large Enterprises.
Figma Connect
Figma is created for Freelances, Small Industries, Startups and Large Enterprises.
Transfer Projects
Figma trying to solve another crucial problem for agencies, So agencies can transfer client projects with ease. Figma believes that there are a large number of ways to improve this workflow and their goal is to share some of these improvements in the coming months.
Admin Controls
Finally, the admin controls where Figma brings more clarity and control and some that going to be their top priority next 6-12 months.
Dev Mode
At Figma 2024, Figma launched its dev mode in June 2023 for developers to easily access everything they need to figure out what to build and understand how to build it, helping developers, implement designs faster. Today teams all over the world marked 4 million designs are Ready to dev. In the past year, Figma continued to make a huge improvement to Dev Mode with things like annotation tools compare changes and much more these releases as well as hundreds of other improvements have been driven by your Figma community, by their feedback.
What dev mode providing:
1: Built for Integration
2: Distraction Free
3: Connected to code
As the design evolves with time, So figma brings new features, when new design changes come up the yellow indicator on the top right corner of the page will appear. By clicking on this you can remark it as ready for dev with some optional notes.
Ready to dev mode
With a new ready-to-dev view, you can see all the different works in progress and anything ready for dev in the file. So it’s a clutter-free space for a developer to see only the concerned files. You can also see the notes provided by the designer, right below the file title.
When you open the dev file this brings you to the focus view, just shows you the design that you want to inspect and nothing else. You can see all the versions on the right-hand side you can select each of the versions you to inspect and see the differences.
Responsive Prototype Viewer
While developing any product responsive plays a vital role to make sure whether the product is working properly on all screen sizes or not. When you preview the prototype of any pages you can change the window view to responsive and check the responsiveness by increasing the width of the window. With this you can easily check how your design should work across many different screen sizes giving you the confidence that your are implementing the design correctly.
Code Connect
When you developing some product its hard to maintain the design system, for example, A button in a design system have lot of properties so its a last thing you think of someone reimplementing a button 20 times, not only does that waste whole lot a time also but you also likely to miss design details or forget about important things like accessibility. So figma created Code Connect which is launching out of beta today. Code Connect is a way to bring your design systems directly in dev mode.Code Connect coming up with new improvements like surfacing the connected code in the component playground a faster set of processes and support for React, React Native, IOS and Android. Code Connect for UI kits will be available on Pro and above and all other features will be on organization and enterprise plans everything is available starting today.
AI in Figma
At config 2024, AI is a must-have thing nowadays, Every company adopting it as We saw in Canva, Adobe, and now in Figma. In the new toolbar at the bottom, there is the sparkling icon for AI, and Figma calls it an Action panel, so you can type in it and trigger all sorts of commands with Figma. It is also the new entry point for AI. Figma’s approach to bringing AI is to address real pain points that impact the workflow and your craft. So you explore more of the option space and be more creative.
There are 3 things Figma AI focusing
1: Get started
2: Find what you need
3: Stay in the flow
Make Design
You can make design by typing the command in the action box, for example if you want a food delivery app you can just put your command for food delivery app and it will create a food delivery app for you and if you want to its theme using the figma design system you have and styling you can just do it with just one click.
Make Changes
You can make changes to the existing design, For example, your portfolio website is missing a contact form, you can just write a prompt to add a contact form to your design it will happen in just seconds.
Search for similiar
You can make a search design using images and commands as well. For example, if you are looking for an Instagram design and have a screenshot of it you got to action pannel and hit search similar and you will get the exact screen design for it. You can also explore from community and it will be attributed right away to the designer. You even find the icon, you can explore further and play with this feature to do cool things.
Content Suggestion
AI will suggest the content with its action panel feature. For example, if you create a diet and nutrition, and you write a recipe for example healthy lemon bars it will give you suggestions for ingredients.
Replace Content
The same repetitive content is super boring and does not give you a realistic feel but with Figma AI now you also replace content, if you click and drag the parent component for the recipe ingredients.
Create Content
Say not to lorem ipsum, now figma, now you write content with AI in the Figma by giving a command in the action panel.
Remove Background
You can remove images background with action panel too.
Translate Text
You can now translate the whole app into any language you use through the action panel.
Rename Layers
You can now translate the whole app into any language you through the action panel.
Make Prototype
Now with AI you can make life much easier, Creating an app is one thing but presenting an app is also needs much effort and skills, but no worries as Figma AI also helping you here, you just need to select your all layers and hit make prototype command from action panel, and you are good to go.
Figma Slides
Config 2024, Figma usage is expanding day by day, with Figma slides they increase the Figma target audience. You can collaborate in Figma slides like you used to do in Figjam and Figma Editor. A fun fact about Figma slides is, that they were created in the Maker Week project kinda hackathon in Figma.
Last year 3.5 million slide decks were created in Figma. People create slides using prototypes and it’s hard to adjust slides between 2 slides as you have to fix the prototype again.
Figma Slides has a similar interface to the editor, you have slides on the left, properties on the right, slide preview in the centre and keynote at the bottom. Figma slides also have gride mode so you can see the bigger picture. You can reorder slides in Gridview too. You apply theme and style even if you use slides from some other deck.
Figma slides have cool animation and focus editor mood. You can also adjust the tone of your text using a custom text dial.
Figma slide also offers a design mode you can use all design tools on slide decks, like text tools or vector editing tools.
Interactive Slides, you can directly present the prototype link in your deck, and it will load automatically, so when you show you can interact with your product.
Live Polls, Figma introduced Figma polls on Figma slides, where you can post live votes, They also introduced Flides which slides votes.
Figjam
Lastly, we have Figjam, Now you can add multiple pages to the Figjam board. It will help you to organize brainstorming sessions and another jamming session.
Config 2024 Bonus
At Config 2024,Figma providing the Figma AI feature for free with the release of UI3. You can sign up for a free beta. There might be some limits applied like the other AI tools have limits per day but still it’s a pretty good offer.
AI Content Training
Figma takes your data but most transparent way to train its model. Admins can control this setting and the content training is starting from August 15. Started and professional plans are opted into content training by default, and they can also opt out if they like due to contractual agreements organization and Enterprise plans are opted out by default regardless of whether you opt-out or opt-in Figma is committed to protecting your data and respecting your privacy. Figma slide is free beta rolling out today and it’s free now later on they will charge for it.
Conclusion
In addition to AI, Figma launched a redesign Figma editor, updates to dev mode including the Code Connect and Figma Slides and lastly pages introduced in Figjam. Do you want a Figma expert? hire We Will Handle.
