figma-draw

5 posts

figma

Introducing Three New Tools For Precise Image Editing In Figma | Figma Blog (opens in new tab)

Figma introduced three AI-powered image editing tools—Erase object, Isolate object, and Expand image—to make detailed image manipulation possible without leaving the design canvas. The tools complement existing features such as background removal, cropping, and AI image generation, helping designers refine assets in context. A new image-editing toolbar brings these capabilities together for faster, more integrated workflows. ## Erase and Isolate Objects - **Erase object** removes a selected object from an image. - **Isolate object** separates an object or person so it can be edited or repositioned without changing the background. - Users can select objects with a lasso and apply: - Lighting and color adjustments - Blur and focus effects - Color correction - Shadows - These tools are useful for refining product photos, removing distractions, and emphasizing key visual elements. - Text-prompt editing remains available through Figma’s **Edit image** feature, but the new tools provide more precise manual control. ## Expand Images for New Layouts - **Expand image** generates additional background content to fit a new aspect ratio. - It adapts images for formats such as: - Mobile layouts - Web banners - Social media assets - Unlike cropping, expansion preserves the original subject and surrounding context without distortion. - For example, a square product image can be expanded into a wide banner while leaving room for text. ## A Unified Image-Editing Toolbar - The new toolbar combines the three AI tools with existing capabilities, including: - Remove background - Crop - AI image generation and editing - Remove background is now easier to find because it is one of the most frequently used AI actions in Figma. - The tools are available across Figma, including FigJam, Slides, and Buzz beta, with some seat restrictions. - In Figma Design and Figma Draw, they are available to Full-seat users on Professional, Organization, and Enterprise plans with AI enabled. - AI actions consume Figma credits. These updates aim to keep image editing inside Figma, reducing the need to switch between external tools. Designers can now make precise object-level edits, adapt images to different formats, and maintain visual consistency directly within their workflows.

figma

8 Tips for Designers Building Branded Templates in Figma Buzz | Figma Blog (opens in new tab)

Figma Buzz templates should be designed as flexible systems, not just finished compositions. The post argues that brand designers need to anticipate marketers’ editing needs by building in guardrails for content, spacing, scaling, and branding. Thoughtful template structure helps teams create accurate, on-brand assets at scale without requiring constant designer review. ## Design in Figma Design First - Begin by creating the asset in a Figma Design frame, where designers can use components and Figma Draw’s vector tools. - Once the design is ready, copy it into Figma Buzz for final adjustments and publication as a template. - This workflow combines expressive design capabilities with Buzz’s collaborative marketing features. ## Use Auto Layout for Flexible Templates - Auto layout keeps elements aligned and maintains consistent spacing as content changes. - It is especially useful for buttons, text boxes, and image containers. - Longer headlines or other variable content can expand without pushing surrounding elements out of alignment. - Auto layout provides the responsive foundation needed for templates used across different assets and formats. ## Separate Text Layers by Input - Create a separate text layer for every unique piece of content, particularly when inputs use different fonts, sizes, or styles. - Modular text layers are essential for Bulk create, which maps CSV or XLSX fields to individual design layers. - Combining multiple inputs or styles in one layer can cause formatting problems and make bulk updates difficult. - Separating layers keeps formatting consistent across campaigns and generated assets. ## Lock Image and Vector Aspect Ratios - Lock the aspect ratio of images and vector graphics using the square icon beside the width and height controls. - Templates often need to be adapted from one format—such as a 1080 × 1080 social post—to others, including Instagram Stories or web banners. - Aspect-ratio locking prevents logos, portraits, illustrations, and other graphics from becoming stretched or compressed. - This setting acts as a simple safeguard against accidental distortion during editing. ## Name Layers Clearly - Rename layers so teammates can understand what each editable field controls in Buzz’s Edit Content panel. - Text layers are initially named after their visible canvas text; use Command + R or edit the layer name directly to replace it. - Figma AI can help rename large numbers of layers. - Clear labels make template editing more intuitive, much like completing a form, especially when many layers are available for customization.

figma

Getting into the groove: How music shaped the scatter brushes in Figma Draw | Figma Blog (opens in new tab)

Figma Draw’s 10 new scatter brushes were inspired by music genres, using rhythm, repetition, and texture as guides for visual experimentation. Product designer Rogie King created 99 designs, which the team narrowed down to brushes named Bubblegum, Witch house, Shoegaze, Honky-tonk, Screamo, Drone, Doo-wop, Spoken word, Vaporwave, and Oi!. The project also emphasizes making digital art feel approachable and expressive for users without formal artistic training. ## Music as a Design Framework - Scatter-brush patterns resemble musical beats because their elements repeat along a stroke. - Brush settings such as gap, wiggle, and jitter parallel musical controls like tempo, texture, and volume. - UX writer Molly Rosen Marriner gathered genre ideas from the Every Noise At Once genre map and Figma employees. - Visually suggestive genres—including Electroclash, Drone, and Witch house—helped guide the brush concepts. ## From Genres to Brush Strokes - Rogie began with familiar uses such as stippling and shading, then explored more expressive interpretations. - He listened to representative songs and researched each genre’s visual culture. - The Screamo brush, for example, drew on early-2000s imagery associated with mosh pits, dark clothing, and heavy eyeliner. - He also consulted others, including his son, to better understand genres such as Shoegaze. ## Selecting the Final Collection - Rogie produced 99 scatter-brush designs through an intentionally exploratory process. - The Figma team voted on designs that offered the most flexibility and expressive potential. - Molly later matched the selected brushes to music genres, sometimes inventing or adjusting associations to fit the visuals. - The final set includes 10 brushes designed for stippling, shading, texture, and playful decoration. ## Making Digital Art More Accessible - The brushes expand the emotional and stylistic range available in Figma Draw, from mysterious wisps to repeated smiley-face splatters. - The genre-based names avoid overly technical art-school terminology. - Rogie wanted users to feel free to experiment without needing formal artistic education or experience with physical media. - The collection presents artistic expression as accessible, playful, and open to everyone.

figma

How We Shaped the Visual Identity for Config 2025 | Figma Blog (opens in new tab)

Figma’s Brand Studio spent 10 months developing Config 2025’s visual identity for a large, global audience and a wide range of physical and digital formats. The team centered the system on expressive animated glyphs made from basic shapes, creating an identity that could adapt as the event evolved. By combining conceptual flexibility, component-based design, motion, and Figma’s refreshed brand language, they made Config feel tactile, dynamic, and distinctly connected to the spirit of making. ## Building a Flexible Visual Concept - The creative process began with broad exploration rather than fixed moodboards or a narrowly defined style. - The team focused on a concept that could support varied execution: - Social media content - Main-stage screens - Physical installations - Attendee badges and merchandise - Spatial experiences - Creative Director Damien Correll emphasized constraining the concept without constraining execution, allowing the identity to remain adaptable. - Because event plans and requirements change, the visual system needed “wiggle room” and the ability to evolve over time. ## Glyphs as a Language of Making - The visual identity revolved around animated glyphs built from simple shapes, or primitives. - Each glyph combined inner and outer elements that interacted with one another. - Their shifting forms represented: - Dynamism - Change - Adaptability - The unpredictable nature of creative work - Motion allowed a single glyph to trigger ripples and transform an entire composition. - The concept aligned with Config’s product announcements, including Figma Draw and Figma Sites, which focused on helping users express themselves in new ways. ## A Component-Based Toolkit - The team created a glyph library directly in Figma. - Glyphs were built as reusable components, making it easy for partners and vendors to: - Swap variations - Customize compositions - Adapt assets to different surfaces - This approach helped maintain consistency while supporting many applications and production constraints. ## Extending Figma’s Refreshed Brand - Config’s identity built on Figma’s recently updated visual language. - The team adapted the refreshed: - Color palette - Typeface, Figma Sans - Playful primitive-based design approach - This connection allowed Config to feel like an extension of Figma’s broader brand while still having its own expressive event personality. Figma’s approach demonstrates how a strong event identity can combine a clear conceptual foundation with modular, adaptable assets. Designing the system as reusable components—and allowing motion and variation to carry meaning—enabled Config 2025 to remain cohesive across thousands of touchpoints without becoming rigid.

figma

Express Yourself with Figma Draw | Figma Blog (opens in new tab)

Figma Draw is a new workspace within Figma Design that combines streamlined vector editing with expressive illustration tools. It aims to help designers move between precise UI work and more creative, tactile design without switching applications or disrupting their workflow. The feature emphasizes faster iteration, improved control, and a workspace tailored to visual expression. ## A Workspace for Visual Expression - Figma Draw reorganizes Figma’s interface around illustration and vector design. - New expressive tools include: - Brushes and pencils - Dynamic strokes - Progressive blur - Texture and noise effects - Text on a path - The redesigned workspace includes: - **Layers panel:** Thumbnail previews for frames, groups, shapes, vectors, and images make assets easier to navigate. - **Toolbars:** Pen, brush, and pencil tools are more prominent, while specialized vector features are easier to access. - **Properties panel:** Larger previews, sliders, expanded stroke controls, and preselected fills, strokes, and effects reduce repetitive adjustments. ## Faster, More Precise Vector Editing - Quality-of-life improvements make it easier to: - Select vertices - Align and distribute objects - Tab between selected geometries - Close open paths - Update vector handles - Upgraded boolean and outline-stroke engines make combining and subtracting shapes more fluid. - Multiple node editing allows users to select and edit several vector nodes simultaneously. - Keyboard shortcuts support faster workflows: - **Enter** edits selected nodes together. - **Shift-click** adds nodes to a selection. - **Command-click** jumps into vector editing on another node. - The shape builder tool helps construct icons and logos from multiple shapes. - Lasso selection makes it easier to select irregular groups of objects or detailed regions of the canvas. ## Tools for Creative Experimentation - Figma Draw expands Figma beyond production-focused vector work into illustration and visual exploration. - Brushes can create more distinctive marks, while texture and noise effects add tactile qualities. - Progressive blur introduces depth and softness to designs. - The goal is to let designers create icons, illustrations, branding assets, social graphics, and other expressive work without relying on external tools or plugins. Figma Draw is positioned as a way to keep both precise and expressive design work inside one canvas. Designers who regularly switch between interface design, illustration, branding, and visual assets may benefit most from its unified workflow and expanded vector controls.