Figma's major AI and product updates from ConFig 2024

Executive overview

Figma's 2024 config keynote packed more meaningful product updates into one announcement than most companies ship in a year. New AI features tackle the blank-canvas problem, buried assets, and tedious layer naming. Alongside AI, Figma launched Slides, a redesigned UI, expanded dev mode, and Code Connect out of beta.

Designers who stay fluent in AI tools will use them to sharpen craft, not replace it — problem-solving and visual direction become the differentiator.

Figma AI features

• Make designs: text prompt generates a complete UI — screens, images, and components — from scratch.
• Prompts can be iterated: add a contact form, change the theme, swap the persona.
• Search for similar: paste a screenshot of a design or sketch a rough shape; Figma finds the matching asset or component in your file.
• Search by remembered string (e.g. "confirm your pickup spot") to surface the right screen instantly.
• Replace content: select a duplicated component and Figma suggests contextually correct filler content (ingredients, names, etc.).
• Remove background: one-click image background removal inside the canvas.
• Translate to other languages: apply a locale to see how layouts break under longer strings (e.g. German truncation reveals spacing bugs).
• Name layers: auto-renames all layers in a file — eliminates the "Frame 47 copy 2" problem.
• Make prototype: AI draws connections between screens and wires up interactions automatically.
• All AI features launching in beta alongside the UI 3 beta.

Figma Slides

• New first-party presentation product built inside Figma — no more workarounds with frames.
• Smart color: switch a slide from white to black and text color updates automatically across any color.
• Grid mode: bird's-eye canvas view for reordering and reflowing entire decks.
• Template picker enforces consistent fonts and colors across the deck.
• Smart Animate transitions available in Presenter view.
• Text tone dial: drag to make text more concise or more professional; same dial can flesh out an outline into full slides.
• Paste a prototype link directly into a slide — it loads live, so you demo interactively without screen recording or re-recording after every design change.

UI 3 and design system updates

• Figma's interface redesigned for the first time in eight years — cleaner, more approachable.
• Suggest AutoLayout: one click converts selected frames into a proper auto-layout stack.
• Assets panel overhauled: nicely sorted, searchable within kits.
• Official iOS 18 and Material 3 kits ship inside Figma, maintained by Apple and Google.
• Dark mode and high-contrast switching works automatically through Code Connect.
• Responsive breakpoints (mobile → tablet) handled via component variants.

Dev mode upgrades

• New edited state: a yellow indicator flags frames the designer has changed since last ready-for-dev mark.
• Designers can re-mark as ready, leaving a note describing what changed.
• Ready for dev view: top-level overview of all in-progress and ready work across the file.
• Focus view: strips canvas clutter and shows only the frame being inspected.
• New responsive setting in the prototype viewer for accurate developer preview.
• Code Connect out of beta — links Figma components to real codebase components.
• Code Connect now surfaces connected code in the component playground; faster setup; supports React, React Native, iOS, Android.
• Code Connect for UI kits: Pro plan and above. All other dev mode features: Organization and Enterprise plans.

Designer perspectives on AI

• Spatial computing seen as the next frontier for AI and human emotion.
• The visual execution layer will increasingly be handled by AI; strategic problem-solving becomes the core skill.
• Best way to stay current: use the tools, hit their limits, follow communities (Reddit, etc.) to spot emerging integrations.