# Figma Design and Draw: 2025 features in action Source: https://www.youtube.com/watch?v=0lSS7m3Lh0g Recap page: https://rapidrecap.app/video/0lSS7m3Lh0g Generated: 2025-12-16T12:03:54.535+00:00 --- ## Quick Overview The video demonstrates several new or recently released Figma features, including AI-powered image editing (background removal, subject isolation, and prompt-based editing), advanced texture effects for text, and utilizing Auto Layout AI for responsive grid adjustments and content duplication, all while applying these techniques to refine a travel website design mockup named "Earthling". **Key Points:** - Figma's AI Image Editing allowed the removal of backgrounds and isolation of subjects from images, such as removing the sky from a mountain photo and isolating the main subject (00:52, 12:46). - The presenter used the 'Edit with prompt' feature to change an illustration of a building into a Venetian boat illustration, maintaining the original brush stroke style (08:24, 09:00). - A texture effect was applied to the large 'Earthling' footer logo, adjusting size (e.g., to 1.9) and radius (e.g., to 12.2) to create a subtle, blurry, fuzzy look (12:19, 12:33). - Auto Layout AI was used to duplicate content cards within a section, automatically resizing the parent Auto Layout frame to accommodate the new content, making responsive updates efficient (10:03, 10:07). - The glass effect was demonstrated on the sticky navigation bar to maintain readability over scrolling content, adjusting parameters like refraction, depth, dispersion, and frost (04:19). - The presenter adjusted the grid setup in the 'Vacation Destinations' section to ensure images and text elements resized dynamically and consistently across different aspect ratios (05:38, 07:07). - The final result showed a cohesive design with consistent typography and visual hierarchy across the hero, content, and footer sections. ![Screenshot at 00:01: Introduction of Ana Boyer, Design Advocate at Figma, who is presenting new features in the design tool.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-00-01.png) **Context:** Ana Boyer, a Design Advocate at Figma, provides a tutorial showcasing several powerful new and recently released features within the Figma design platform, focusing on AI-enhanced image manipulation and advanced Auto Layout capabilities. The demonstration uses a mock travel website design called "Earthling" to illustrate practical applications of these tools for efficient and dynamic design iteration. ## Detailed Analysis The tutorial, hosted by Figma Design Advocate Ana Boyer, systematically demonstrates several new Figma features, emphasizing AI-driven design workflows. First, AI Image Editing is showcased, first by removing the background and isolating the subject from a hero image (00:52), and later by using a prompt to completely transform an illustration of a temple into a Venetian gondola illustration while preserving the black brush stroke style (08:24, 09:00). Next, Ana applies a texture effect to the large footer logo, adjusting the size and radius to give it a subtle, gritty appearance (12:19). Significant attention is given to Auto Layout AI, which is used to duplicate content cards in the 'Trending Guides' section (10:03), automatically adjusting the parent Auto Layout frame's dimensions to maintain consistent spacing and responsiveness (10:07). The glass effect is applied to the sticky navigation bar to ensure text remains legible over the parallax scrolling hero image, with fine-tuning of light, refraction, depth, dispersion, and frost (04:19). Furthermore, the video highlights the power of grids within Auto Layout, demonstrating how they help maintain consistent spacing and resizing for complex content blocks like the 'Vacation Destinations' section (05:38). Finally, Ana reviews the completed prototype, showing how the sticky navigation behaves correctly when scrolling past the hero section (04:56). ### AI Image Editing - Background removal and isolation demonstrated on hero image (00:52) - Prompt-based editing used to transform an illustration into a Venetian gondola while maintaining brush stroke style (08:24) ### Effects Application - Glass effect applied to the sticky navigation bar by adjusting refraction, depth, and dispersion (04:19) - Texture effect applied to footer logo text, adjusting size and radius for a gritty look (12:19) ### Auto Layout AI - Used to duplicate content cards in the 'Trending Guides' section, instantly resizing the parent frame to accommodate new content (10:03, 10:07) ### Grid and Responsiveness - Grid setup is utilized in the 'Vacation Destinations' section to maintain consistent content alignment and resizing for images and text blocks (05:38) ### Prototype Testing - Navigation bar is set to 'Sticky' behavior, ensuring it stays visible at the top edge during vertical scrolling (04:58) ![Screenshot at 00:01: Ana Boyer introduces herself as a Design Advocate at Figma, setting the stage for the feature demonstration.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-00-01.png) ![Screenshot at 00:17: The Figma canvas showing the 'Earthling Web' design, with the hero section displaying the Yosemite image and 'Hello, Earthling' text overlay.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-00-17.png) ![Screenshot at 01:03: Demonstration of the image editing toolbar popping up over an image, highlighting the 'Remove background' option.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-01-03.png) ![Screenshot at 04:19: The 'Effects' panel open, showing the 'Glass' effect settings being adjusted for the navigation bar.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-04-19.png) ![Screenshot at 10:03: The Auto Layout AI feature suggesting 'Duplicate, with new content' for the guide cards group, enabling rapid content expansion.](https://ss.rapidrecap.app/screens/0lSS7m3Lh0g/00-10-03.png)