Category: Tools

An Electric Atmosphere of Innovation and Anticipation

Figma is an increasingly dominant player in the design world. This fact made 2024’s Figma Config one of the key events for the design community this year.

The Moscone Center in San Francisco was filled with eager designers and tech enthusiasts. But beneath the excitement, there was also a sense of caution — is Figma going to announce something that will completely transform the design landscape?

As expected, AI became one of the most popular topics of the conference. Figma promised groundbreaking innovations to reshape the way we work and collaborate. But can they deliver? Or are they just riding the hype wave?

We’ve been closely watching this year’s conference, so let’s dive into the full list of features and updates that were unveiled…

Figma AI: Think Bigger and Build Faster

One of the biggest highlights was Figma AI, which brings intelligent design suggestions directly into the workflow. AI-powered tools offer layout recommendations, automatic adjustments for spacing and alignment, and color palette suggestions. These features not only speed up the design process but also enhance creativity by providing designers with new ideas. Additionally, efficiency updates automate tedious tasks like generating realistic images and copy, rewriting text, and automatically wiring up prototypes.

Visual Search

Figma AI includes visual search capabilities to easily find components and assets. This feature allows designers to quickly locate and utilize existing design elements, streamlining the workflow and improving efficiency.

AI-Powered Text and Image Tools

Figma AI now includes tools for generating realistic images and rewriting text with just a few clicks. These AI-powered features enable designers to create high-quality visual content and compelling copy effortlessly. The tools analyze the context of the design and suggest relevant images and text improvements, enhancing both speed and creativity in the design process.

Quick-Click Prototyping

Quick-Click Prototyping streamlines the creation of interactive prototypes. This new feature allows designers to convert static designs into clickable prototypes in seconds. By selecting elements and choosing interaction types, designers can quickly set up navigation flows and test user experiences without extensive setup.

and the feature we’ve all been waiting for 😁

Automatic Layer Renaming

To improve organization and clarity, Figma now includes Automatic Layer Renaming. This feature uses AI to rename layers based on their content and context within the design. It eliminates the need for manual renaming, ensuring that files are always tidy and easy to navigate, especially in complex projects.

Generate Designs from Text Prompts

A groundbreaking feature introduced is the ability to generate designs from text prompts. By describing the desired design in natural language, Figma AI can create initial layouts, components, and styles. This feature empowers designers to quickly iterate on ideas and explore new concepts without starting from scratch.

UI3: Figma, Redesigned

The redesigned interface, UI3, is more than just a facelift. It aims to make navigation more intuitive and workflows more streamlined. The revamped file browser now includes global search and notifications, helping users find what they need faster and stay updated on project changes. The new interface focuses on components, making it easier to access and manage design elements.

Figma Slides: Build, Collaborate, and Present

Figma Slides is a new tool designed to change how we create presentations. It combines Figma’s collaborative features with the functionality needed to build compelling slide decks. With Figma Slides, teams can collaborate in real-time, incorporate live designs, and use a zoomed-out grid view to manage slide layouts.

Updates to Dev Mode: From Design Ready to Dev Complete

Dev Mode was a major focus at the conference, with updates designed to bridge the gap between designers and developers. New features include the Ready for Dev View, which helps developers find what they need among multiple design explorations, and Focus View, which allows developers to see only what is ready to build. Additionally, Code Connect surfaces design system code and makes it more useful across various frameworks and programming languages. These updates ensure that design and code are more closely aligned, making the handoff process smoother and more efficient.

Enhanced Prototyping Capabilities

Prototyping in Figma has reached new heights with the introduction of micro-interactions and advanced animation effects. These features allow for the creation of more interactive and realistic prototypes. The improved device preview options let designers test their prototypes on various devices and screen sizes directly within Figma, ensuring a seamless user experience. Conditional logic support enables the creation of sophisticated user flows that accurately simulate real-world interactions.

What do we at Muzli think about the new updates?

Without a doubt, Figma Config 2024 was a landmark event, showcasing innovations that could fundamentally change the design process. We at Muzli were happy to see the advanced collaboration tools, the cool AI features, and the improvements in prototyping and accessibility. Even Figma Slides sounds like a fun and long-overdue replacement for Powerpoint or Canva.

This event establishes Figma as an even stronger player that will be really hard for competitors to catch.
BUT we have to pause and ask ourselves — is all this too good to be true? Will they be able to deliver on these promises? And on a more philosophical note — is this AI going to make us more efficient design machines and take away all the fun and creativity? What new challenges will we need to tackle?

All this and more, in the next episode 😄
Special reporter Eyal, out.

You can watch all the announcements here:

Config 2024: Figma product launch keynote

In this post, you’ll find the ultimate collection of 45 popular and practical plugins for Figma in 2024. Carefully curated, these plugins are poised to enhance your workflow, amplify your creativity, and elevate your Figma experience. Dive into this meticulously crafted selection, designed to serve you best in your collaborative design journey with Figma

Figma to Wix Studio

Transform your Figma designs into advanced, high-converting websites with Wix Studio, the platform for agencies and enterprises.

Figma to Webflow (HTML, CSS and Website)

The Figma to Webflow plugin, built by Webflow Labs, lets you turn your static designs into clean, production-ready Webflow HTML and CSS. Add Webflow Interactions, wire up content using our powerful CMS, and one-click publish onto the fastest hosting infrastructure.

Figma to HTML with Framer

Export your Figma designs by simply copying what’s on the canvas and pasting it in Framer. The plugin takes care of adapting your design to Framer’s layout tools in real-time, so you can focus solely on making a great website.

Fast Isometric

Fast Isometric is a Figma plugin for quickly creating isometric designs with a variety of tools and templates, simplifying the process of crafting impressive three-dimensional graphics and interfaces.

Breakpoints

Preview responsive layout inside a Figma frame and share animated prototype.

Relume

Create websites using the Relume Site Builder and access them through the plugin to easily edit them in Figma.

Musho AI

Musho turns your prompts into nearly-complete, dev-ready websites with simple layouts, great copy, and gorgeous images.

ARC — Bend your type!

Curve your text upward, downward or into a circle

Unsplash

Insert beautiful images from Unsplash into your The Unsplash License allows images to be used freely for both commercial and personal projects.

Jitter · Animation for Figma

Create professional animated content with Jitter. Use it to design on-brand animated UIs, videos, social media posts, websites, apps, logos and more. Sign up for free.

Magician

Design with the power of AI to do everything from copywriting to generating unique icons from text.

Remove BG

Remove the background of images automatically with just a single click

Anima — Figma to Code: React, HTML, Vue, CSS, Tailwind

Let Anima code like YOU with AI Code Personalization
Get code, based on your design, and accelerate the design to development process.

Icons8 — icons, illustrations, photos

Keep your flow with the largest and most consistent collection of curated graphics. Get 1.5M+ icons, photos, and illustrations without ever needing to leave Figma!

Content Reel

Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users.

Vector to 3D

This plugin converts text and vector nodes into 3D models with just one click! The converted models will be automatically placed and rendered with GPU ray-tracing. You can use it to render a nice 3D icon, text, or any other 3D-style images without being a 3D specialist.

Mockup

Just select a device, choose a frame, and your design appear on the screen. Easiest mockup plugin

Autoflow

Automagically draw flow arrows in Figma! Illustrate user flows, diagrams, or graphics in a hand-drawn or minimalist style.

Blobs

Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has.

Glow

Apply a smooth, beautiful glow to your elements.

LottieFiles — Create animations & export from Figma to Lottie

LottieFiles for Figma redefines animation creation, enabling designers to effortlessly convert their designs into Lottie animations. This powerful feature supports everything from basic animations to multi-frame and multi-variant component sequences.

To Path

put any objects or text on a path

Noise

The Noise plugin for Figma adds texture and depth to designs with customizable noise patterns. Generate Perlin, simplex, and cellular noise, adjust parameters like scale and opacity, and preview changes in real-time. Enhance your designs quickly and efficiently with this valuable tool.

Table Creator

Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the components.

Chart

Chart is the most powerful plugin for Figma that uses real or random data to create 18 types of charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.

Stark — Contrast & Accessibility Tools

Now, you can create and test accessible software in record time. Whether you’re building a website, online shop, mobile app, or SaaS product, Stark gives every designer, engineer, PM, and QA expert the manual and automated tools to make it accessible with ease.

3D Wave: Soften everything like fabric

Make Everything into 3D Wave!

Get Waves

Get Waves is a free SVG wave generator to make unique SVG waves for your next design. Choose a curve, adjust the complexity, randomize!

User Profile | Avatar

Enables designers to display beautiful generated avatars 📸 in your design prototype.

UI Faces — Free AI avatars

Free, AI-generated avatars for your creative projects.

Noise & Texture

A Figma plugin to dynamically generate seamless tiled noise, textures, patterns, gradients, and more. Select a layer and add your noise or texture. Change the settings and see your layers updated live.

Mesh Gradient

generates a gradient image with an underlying 2d mesh, and lets you edit the vertices & edges of the mesh to get the perfect gradient look.

Beautiful Shadows

The plugin allows you to create beautiful shadows by simply dragging a ‘light source’ which casts a shadow on selected elements.

Ruri Splines

Create high quality splines, shapes, spots by adding gradient along path effect to any curve. With collection of more than 250+ handcrafted and fully editable curves & colors you will have unlimited options to combine.

Pixels

Apply Pixelate / 8bit Effect Filter on images. Raster & Vector.

Drawkit 3D Builder

Build beautiful design with DrawKit 3D builder you can easily mix and match 3D illustrations and icons and drop them into your Figma file.

Sine wave

Generate sine waves easily within a few clicks

Fit Curve

The Fit Curve plugin helps to create curves with a smooth curvature in Figma. Featuring an intuitive interface with a series of circular buttons and slider, it allows for precise modification of handle lengths on Bezier curve segments.

Figma To Elementor

Figma plugin to easily convert Figma design into Elementor widgets. The json data generated from this plugin can be directly pasted into Elementor editor with right click on elementor editor > paste from other site > Ctrl +V. Working better for well grouped design.

Repeater effect

Select any of your shapes and generate super cool effects that can be used in brand material, blog post images or wherever it makes sense.

Magic Pattern

Create seamless patterns with your own images in minutes.

Typescales

Quickly generate a simple typescale/modular scale.

html.to.design

Convert any website into fully editable Figma designs. Leverage an existing website and import its html to Figma to start your own designs, without building each element from scratch.

Rename It

Keep your Figma files organized, batch rename layers and frames.

Clean Document

Automagically organize and clean up your Figma document.

Styles to Variables

Stop manually adding all your styles; instead, use this plugin to spend more time playing with aliases, modes, and updating your design system components.