figmaFeb 3, 2026

For the Love of Craft: Vectorize Images in Figma Design and Draw | Figma Blog (opens in new tab)

Vectorize is Figma’s new AI image-editing tool for converting raster images into editable vector artwork. It helps designers preserve the character of sketches, photos, and hand-drawn lettering while making them scalable and easy to refine directly in Figma Design or Figma Draw. The tool is intended to reduce tool switching and avoid recreating expressive source material from scratch. ## Converting Raster Drawings into Vectors - Users can drag an image into Figma and select **Vectorize** to convert it into an editable vector with one click. - Vector artwork can be adjusted in size, shape, composition, and individual details. - The **Recolor** control can simplify artwork into a more manageable set of colors and shapes. - Figma color variables can be applied to keep illustrations consistent across brands, themes, and collateral. - This workflow turns physical sketches or rasterized drawings into reusable, adaptable design assets. ## Editing Hand-Drawn Lettering - Photos, scans, calligraphy, and paper sketches can be transformed into editable logos or wordmarks. - After vectorization, designers can modify individual letters, curves, strokes, spacing, and anchor points. - Background removal and bounding boxes help isolate and reposition lettering elements. - The resulting artwork can be recolored, scaled, and incorporated into cover art, interfaces, or branding. - Hand-drawn lettering retains its original character while becoming flexible enough for further digital design work. Vectorize is best suited to designers who want to bring expressive physical or raster-based work into an editable Figma workflow without sacrificing its original personality.

vector-graphicsfigmafigma-designai-image-editing+2

figmaJul 24, 2025

The making of a product icon | Figma Blog (opens in new tab)

Figma product icons are the result of extensive exploration rather than a single inspired sketch. Designer Tim Van Damme combines consistent visual rules with product-specific research, then develops dozens or hundreds of variations before refining the final symbol. The process balances recognizability, scalability, and a distinct identity across Figma’s expanding product suite. ## Building a Consistent Icon System - Figma previously had no formal icon-design system, so Tim created unofficial guidelines to ensure the icons worked as a cohesive family. - Core principles include: - One-pixel-wide strokes - One-pixel-thick cutouts - Rounded caps - Balanced compositions that use the available space - Three standard sizes for different surfaces - Icons must work everywhere from toolbars to large marketing displays and billboards. - Designs are rejected when lines blur or visual elements become indistinguishable at smaller sizes. ## Finding the Product’s Core Idea - Each icon must follow Figma’s broader visual language while representing the identity of its specific product. - Tim collaborates with design and product teams to list concepts, themes, and associations connected to the product. - For Figma Community, ideas such as shared learning, connection, and knowledge exchange inspired experiments with people, trees, and books. - For Figma Buzz, themes including magic, creation, and AI image generation led to explorations involving glass orbs, stars, and bees. ## Exploring Through Extensive Iteration - Tim uses Figma’s variable-width strokes and simultaneous vector-layer editing to speed up experimentation. - He develops large families of related symbols, gradually adjusting shapes, proportions, movement, and composition. - Creative exploration can transform one idea into another—for example, trees into faces, faces into mandalas, or abstract shapes into interlocking forms. - For Figma Make, he explored motion and transformation through wheels, butterflies, compasses, and fidget spinners. - For Figma Buzz, he created hundreds of bee variations, changing wings, antennas, and line treatments before narrowing the options. The practical lesson is that effective product icons emerge from a structured but highly exploratory process: establish shared rules, identify the product’s essential meaning, and iterate freely until the symbol is both distinctive and immediately legible.

vector-graphicsfigmadesign-systemsai-image-generation+1

figmaDec 4, 2018

Figma has PDF Export | Figma Blog (opens in new tab)

Figma introduced PDF export to meet demand for a format still essential for printing, development, and precise asset delivery. Because existing PDF libraries required compromises—especially around rasterization and complex effects—Figma built its own library after studying extensive PDF documentation. The result prioritizes high-fidelity, scalable output across different viewers and use cases. ## Exporting Designs to PDF - Users can export selected layers or an entire page from the Properties Panel. - The “Export Frames to PDF” option creates a multi-page PDF, with frames ordered from top-left to bottom-right based on their canvas positions. - PDF preserves vector descriptions, allowing text and drawings to remain sharp at any zoom level. ## Building a Custom PDF Foundation - Figma reviewed more than 1,300 pages of PDF documentation and evaluated existing libraries. - Existing tools often handled difficult effects by rasterizing them into images. - Figma built its own PDF library to control when and how rasterization occurs. - Avoiding unnecessary rasterization is especially important for: - Large-format printing - Generating the same asset at multiple sizes - Preserving crisp edges and gradients ## Reproducing Shadows and Blurs - PDF lacks the shader-level controls available in graphics pipelines, so Figma synthesized shadows in code. - Blurred regions are finely rasterized and converted into soft masks. - Sharp elements behind the shadow remain vector-based and clear. - Vector clipping ensures shadows and blurs stop correctly at their parent boundaries, preventing visible cracks. ## Handling Complex Gradients - Linear and elliptical gradients map relatively easily to PDF’s built-in shading features. - Angular and diamond gradients require more advanced techniques: - Complex gradients are approximated by stitching together many simpler colored regions. - Mathematical care is needed to limit approximation and numerical errors. - PDF viewers implement sophisticated shading features inconsistently. - Figma selected a specific implementation for angular gradients that works reliably across major viewers, including macOS Preview. Figma’s PDF exporter provides a practical way to share and print designs while preserving vector precision. The company notes that reducing rasterization and adding advanced export controls remain ongoing priorities.

vector-graphicsfigmasvgpdf+3

figmaSep 4, 2018

Figma Feature Highlight: Sketch Import | Figma Blog (opens in new tab)

Figma’s Sketch Import feature helps designers move from Sketch to Figma without rebuilding existing work. The post argues that it supports migration, cross-platform collaboration, and hybrid workflows while preserving much of a Sketch file’s structure and fidelity. Users can import files through drag-and-drop, the toolbar, or keyboard shortcuts. ## Why Sketch Import Matters - **Eases the transition to Figma** - Designers switching from Sketch can bring over previous projects instead of recreating them. - This lowers the cost and friction of adopting Figma. - **Supports cross-platform teams** - Sketch is Mac-only, while Figma works across platforms. - Developers and teammates on Windows or Linux can import Sketch files to review designs and specs. - **Enables flexible workflows** - Designers can continue working independently in Sketch and move files into Figma for critiques, comments, and collaboration with remote stakeholders. ## Fidelity and Design-System Support - The importer preserves: - Pages - Resizing constraints - Vectors and other design elements - Sketch symbols are converted into Figma components. - This is particularly useful for teams creating or maintaining shared design systems. - Figma presents the importer as highly accurate, while recommending in-app support if a file does not import correctly. ## How to Import a Sketch File Users can import Sketch files in three ways: - Drag and drop the file into Figma. - Use the import option in the toolbar. - Use: - **Command + Shift + K** on Mac - **Control + Shift + K** on Windows Figma automatically creates a new Figma file containing the imported content. Sketch Import is a practical bridge for teams adopting Figma: it preserves existing work while making collaboration and cross-platform access easier.

vector-graphicsfigmadesign-systemsui-ux+2

figmaAug 21, 2018

#FigmaTip Roundup 10.0 | Figma Blog (opens in new tab)

#FigmaTip Roundup 10.0 highlights practical features that make everyday design work faster and cleaner. Inspired by Charli Marie’s independent review of Figma, the post shows how shortcuts, automatic cleanup, selective property copying, flexible image fills, and vector networks reduce friction compared with tools such as Sketch and Illustrator. ## Faster Layer Arrangement - **Command + Left Bracket** moves layers backward, while the corresponding bracket shortcut moves them forward. - The shortcut mirrors Photoshop’s controls and avoids manually rearranging items in the layers panel. - Figma’s menus display keyboard shortcuts, making them easier to remember. ## Automatic Cleanup of Groups - Figma automatically deletes a group when all of its contents are removed. - This prevents empty groups from accumulating and keeps design files organized. - The behavior addresses a common source of clutter in Sketch documents. ## Selective Property Copying - Designers can copy all properties from one object or transfer only specific attributes. - Individual properties include fills, fonts, and strokes. - This makes it easy to reuse a successful style without overwriting unrelated settings on the target shape. ## Image Fills Instead of Masks - Imported images are placed as fills inside rectangular shapes. - Cropping, tiling, and positioning can be adjusted through the fill settings. - This avoids creating multiple masks merely to size or manipulate images. ## Complex Shapes with Vector Networks - Figma’s vector networks allow a point to connect to more than two paths. - This differs from traditional vector tools and supports more complex shapes. - The feature can reduce the need to switch to Illustrator for advanced vector work. The roundup presents these small workflow improvements as evidence that learning Figma’s built-in behaviors can make design work quicker, cleaner, and less dependent on other applications.

vector-graphicsfigmaui-ux-designsketch+2

figmaAug 14, 2018

With Figma’s new SVG Exports, less = more | Figma Blog (opens in new tab)

Figma redesigned its SVG exporter around a simple principle: producing less markup makes files easier for people and more compatible with other tools. Its older exports prioritized storing as much structural information as possible, but this created bloated SVGs that many importers—including Android Studio—handled poorly. The new exporter favors pragmatic, compact markup while preserving the visual result. ## Why SVGs Render Differently Across Tools - SVG describes instructions for drawing an image, unlike bitmap formats that store a fixed snapshot. - Although SVG is an open standard, there is no single standardized implementation for converting SVG markup into pixels. - Design tools and importers often support only subsets of the complex specification, sometimes with bugs. - Features such as reusable definitions in `<defs>` referenced through `<use>` are not reliably supported; Android Studio frequently failed to handle them. - Figma’s previous output was difficult to read and unnecessarily large, forcing users to run tools such as SVGO or manually clean up files. ## A More Pragmatic Export Strategy - Figma originally hoped SVG would become a universal interchange format between design tools. - Feedback from users led the team to abandon that idealized assumption and optimize instead for compatibility with real-world tools. - A simple rectangle example illustrates the change: - The old exporter generated deeply nested groups, clipping paths, masks, reusable definitions, and verbose path data. - The new exporter reduced the same design to a direct `<rect>` element with a fill and stroke. ## Using SVG Primitives - Simple shapes such as rectangles and circles are now exported using native SVG elements. - For example, a verbose rectangle path like: ```markup <path d="M0 100V0H100V100H0Z"/> ``` becomes: ```markup <rect width="100" height="100"/> ``` - Primitive elements are smaller, clearer, and more likely to be understood by other software. ## Simplifying Inside and Outside Strokes - SVG natively supports centered strokes, but design tools also need inside and outside stroke behavior. - Figma previously simulated these effects with doubled stroke widths plus masks, substantially increasing complexity and file size. - The new exporter adjusts path coordinates so the original stroke width produces the desired visual result. - This removes unnecessary masks and makes the resulting geometry easier to inspect and process. ## Removing Unnecessary Markup - Informational elements such as `<title>` and `<desc>`, grouping elements such as `<g>`, and attributes like `id` and `version` are omitted when they do not affect rendering. - Clipping paths are generated only when clipping is actually needed rather than for every clipped frame. - Figma also inlines elements that were previously deduplicated through `<use>` references in `<defs>`. - Although inlining sacrifices some deduplication, the simpler structure improves compatibility with limited SVG importers. Figma’s updated exporter demonstrates that SVG output should prioritize practical interoperability over preserving every possible piece of design-tool metadata. Simpler primitives, fewer masks and references, and only meaningful markup produce files that are smaller, easier to understand, and more broadly usable.

vector-graphicsfigmasvgandroid-studio+2

figmaMay 21, 2018

5 ways to use Figma that you probably never thought of | Figma Blog (opens in new tab)

Figma’s real-time collaboration makes it useful for far more than traditional interface design. The post highlights five applications that use shared editing to organize information, make decisions, divide repetitive work, encourage creative collaboration, and have fun. Its central conclusion is that Figma’s multiplayer capabilities can support nearly any activity involving visual thinking and teamwork. ## Affinity Diagrams for Organizing Ideas - Teams can collect large amounts of research or brainstormed ideas in one shared file. - Participants add concepts simultaneously, then group related items into themes. - This process helps clarify priorities and create structure for complex projects, even when collaborators work remotely. ## Real-Time Voting for Design Decisions - Teams can review multiple design options together and mark their preferences directly in Figma. - Instead of printing designs and using physical stickers, participants place circles or other markers beside favored concepts. - Seeing votes accumulate in real time makes individual preferences clearer and helps teams reach decisions faster. ## Design Assembly Lines for Repetitive Work - Large, repetitive tasks can be divided among several people working in parallel. - ClassPass used this approach to create more than 30 custom maps, with designers placing location pins for gyms and studios in different cities. - Multiplayer collaboration allows teams to complete simple production tasks quickly through coordinated effort. ## Collaborative Comic Creation - Figma can serve as a shared illustration environment where friends or colleagues draw and develop ideas together. - USC students Louis Harboe and Parker Malachowsky used it to turn a presentation about AI and healthcare into an accessible comic. - Reusable components such as speech balloons, caption boxes, and image panels helped organize the longer project. - Figma’s vector networks provided flexibility for drawing and editing illustrations. ## Games for Team Connection - Figma’s multiplayer features can also be used for recreational games and playful activities. - Collaborative play offers a way to lighten the mood and strengthen relationships when teams are not working. - This reflects the influence of cooperative multiplayer video games on Figma’s collaboration model. Figma’s shared canvas is valuable wherever people need to think visually together. Teams can use it not only for design production, but also for research synthesis, group decisions, repetitive workflows, creative projects, and informal team-building.

vector-graphicsfigmareal-time-collaborationdesign-sprints+1

figmaApr 2, 2018

Desperately seeking squircles | Figma Blog (opens in new tab)

Figma engineer Daniel Furse describes the search for an accurate mathematical model of Apple’s iOS “squircle” shape. The project illustrates Charles Eames’s idea that good design depends on recognizing and working enthusiastically within constraints. Although a superellipse initially appeared to be the answer, careful comparison showed that it was only an approximation, prompting further investigation into Bézier-based constructions. ## Design Through Constraints - Eames defined design as “a plan for arranging elements to accomplish a particular purpose.” - Furse applies this principle to engineering, where code must balance: - Time - Simplicity - Maintainability - Aesthetic quality - The squircle project became a mathematical example of design involving research, false starts, hidden constraints, and refinement. ## Why Squircles Look Different - Apple’s iOS 7 icons replaced conventional rounded squares with more organic-looking squircles. - A rounded square has an abrupt transition between its straight edges and curved corners. - A squircle has continuous curvature around its perimeter, producing a smoother, more unified appearance. - Similar curvature continuity appears in industrial design, such as MacBook corners and earbud cases, where it prevents harsh changes in reflected highlights. ## Modeling the Shape with a Superellipse - To add squircles to Figma, the team needed a precise mathematical description. - Early research suggested that Apple’s shape was a superellipse, a generalized ellipse described by parameters `a`, `b`, and `n`. - With `n = 2`, the formula produces an ellipse; with equal axes, it produces a circle. - Increasing `n` makes the shape increasingly resemble a rounded rectangle, approaching a sharp-cornered rectangle as `n` approaches infinity. - A value around `n = 5` produced an image that looked very similar to an iOS squircle. ## The First False Start - Despite its visual similarity, the superellipse did not match Apple’s actual icon geometry. - Detailed follow-up analysis found a small but consistent discrepancy for every value of `n`. - This meant that simply approximating the superellipse with Bézier curves would not produce the authentic shape. - The investigation therefore moved toward alternative constructions, including sequences of Bézier curves for the corners. The main lesson is that visual resemblance is not enough when reproducing a design precisely: mathematical elegance must be tested against the real artifact, and constraints often reveal the need for a more complex solution.

vector-graphicsfigmaiosbezier-curves+2

figmaFeb 6, 2018

FigmaTip Roundup 6.0 | Figma Blog (opens in new tab)

The sixth FigmaTip Roundup collects practical techniques and community-created resources for speeding up design work in Figma. It highlights a Material Design System, more precise color editing for grouped objects, and Figma’s support for smoother “squircle” corners. ## Material Design System for Figma - R. Kamushken’s user-made Material Design System includes a fast table constructor. - The feature was introduced in version 1.3. - The resource is available for download through Setproduct. ## Editing Strokes and Fills Independently - Figma allows designers to change the stroke color of a group without altering its fills. - Objects in the group that have fills but no strokes remain unaffected. - The roundup presents this as a workflow advantage over tools such as Illustrator and Sketch. ## Smoother Corners with Squircles - The post announces a feature for creating ultra-smooth corners using squircles. - This provides an alternative to standard rounded rectangles for producing more polished interface shapes. The roundup encourages designers to adopt these community-discovered resources and features to make everyday Figma workflows faster and more precise.

vector-graphicsfigmadesign-systemsui-design+1

figmaNov 16, 2016

Delete and Heal for Vector Networks | Figma Blog (opens in new tab)

Figma’s “delete and heal” feature removes a vertex while preserving the surrounding shape as much as possible. What begins as a simple graph-editing operation becomes complex for curved segments and vector networks, where vertices may connect to many edges. Figma addresses this by fitting replacement Bézier curves and pairing edges according to their geometry. ## Basic Deletion and Healing - Standard deletion removes the selected vertex, its incident edges, and any fills that depend on those edges. - “Delete and heal” instead attempts to connect the neighboring vertices. - If a vertex touches only one edge, that edge is removed because no meaningful healing is possible. - Triangles and other small paths require special-case decisions about whether healing produces one edge or multiple edges. - The behavior differs between open and closed paths. ## Preserving Curvature - Curved segments are represented as cubic Bézier curves. - Deleting a vertex joins two cubic curves into one replacement curve. - Figma keeps the original endpoints fixed but adjusts the neighboring control handles to preserve the original curvature. - The algorithm: - Samples points along both original Bézier curves. - Treats the shared vertex as a single point. - Fits a new cubic Bézier curve through the resulting samples. - Figma uses a curve-fitting technique from Philip J. Schneider’s “An Algorithm for Automatically Fitting Digitized Curves,” published in *Graphics Gems*. ## Healing Vector Networks - Unlike traditional path-based editors, Figma models vector objects as undirected multigraphs with edge identity. - A vertex can therefore have more than two incident edges. - If the vertex has an odd number of connected edges, Figma removes all incident edges because no complete pairing is possible. - With an even number of edges, the edges are paired and replaced with new edges. - To determine which edges are “opposite,” the incident edges are sorted by their angles around the deleted vertex. - This graph-based approach allows delete-and-heal to work on branching vector networks, not just simple paths. Figma’s implementation combines graph topology, geometric pairing, Bézier sampling, and curve fitting to make deletion feel intuitive while retaining as much of the original design as possible.

vector-graphicsbezier-curvescomputational-geometrygraph-theory+2

figmaFeb 8, 2016

Introducing Vector Networks | Figma Blog (opens in new tab)

Figma’s vector networks replace the traditional path model with a more flexible structure that lets users connect, split, and manipulate geometry naturally. The system remains compatible with existing cubic Bézier curves while improving direct editing, strokes, and fills. The result is a vector tool that behaves more like physical drawing and avoids several long-standing limitations of pen-based editors. ## Vector Networks vs. Traditional Paths - Traditional paths are chains of lines and curves connecting two endpoints. - Vector networks allow lines and curves between any points, without requiring one continuous chain. - Users can: - Connect any points together - Delete geometry anywhere - Split and recombine shapes naturally - Attach three or more lines to a single point - Stroke caps and joins work consistently, including at multi-line junctions. ## Direct Curve Manipulation - Existing vector tools typically use cubic Bézier curves with control handles positioned away from the curve. - Figma preserves Bézier compatibility but adds a bend tool for direct manipulation. - Holding Command on macOS allows users to drag the curve itself. - Figma automatically adjusts the underlying control handles to match the desired bend. ## More Intuitive Fills - Traditional vector engines use the winding number rule, where fill behavior depends on curve direction. - This makes fills difficult to understand because users generally cannot see whether curves were drawn clockwise or counterclockwise. - Vector networks automatically fill enclosed regions. - A paint bucket-style tool lets users toggle individual enclosed areas to create holes directly. - Developing this fill system was the most difficult part because earlier approaches required users to manually manage negative space. ## Design Through Iteration - Figma’s team initially explored more advanced curve types but chose to remain compatible with existing vector formats. - User studies showed that many people did not consciously notice vector networks; they simply found the tool behaved as expected. - The contrast became clear when users returned to conventional vector editors and encountered their limitations. - Despite many abandoned approaches and doubts during development, Figma concluded that vector networks offered a meaningful improvement over paths. Figma’s recommendation is implicit: vector editing should prioritize direct manipulation and intuitive geometry rather than forcing users to understand the underlying path mechanics. Vector networks preserve compatibility while making drawing, editing, strokes, and fills substantially more natural.

vector-graphicsfigmabezier-curvesvector-networks+2

figmaJan 20, 2016

From Furniture to Screens | Figma Blog (opens in new tab)

Furniture design taught Figma designer Sayer Pease that tools should support people’s activities without becoming the focus themselves. Figma applies this principle through simple, versatile tools, tactile controls, and a restrained visual system that helps designers concentrate on their work. The broader lesson is that useful design principles can come from disciplines far beyond digital product design. ## Tools - A small, well-designed toolset can support both simple and complex work, much like a hammer can build anything from a cabinet to a house. - Figma’s pen tool was designed to feel more like a physical pen. - Its vector objects use networks of connected points rather than traditional paths, enabling more flexible and natural drawing. - The editor is intended to resemble an organized workbench, with essential tools easy to find and use. ## Control - Familiar, tactile interactions help users feel in control of digital tools. - Keyboard shortcuts provide both physical familiarity and greater efficiency. - Figma’s Command-drag selection heuristic distinguishes containers from their contents. - Users can select nested elements—such as icons inside a toolbar—without selecting the toolbar itself, reducing the need to think about layer hierarchy. ## Color as Semantic Guidance - Figma initially used an almost entirely monochromatic, “unskinned” interface so the product would fade behind users’ designs. - As functionality increased, the lack of visual differentiation made UI components harder to distinguish. - The revised approach uses color without making the interface visually dominant. - Colors add semantic meaning: green indicates actions, while blue indicates selection. - This helps users understand what they are doing at a glance rather than focusing on how the interface works. ## Learning Across Disciplines - Product designers should challenge the assumptions and conventions of their immediate field. - Valuable solutions can come from both historical design practices and unrelated disciplines. - Furniture design provides Figma with principles centered on utility, organization, control, and unobtrusive support. Ultimately, digital tools should enable users’ creativity rather than compete with it. Designers can improve products by studying how other disciplines create tools and environments that quietly support meaningful work.

vector-graphicsfigmadesign-systemsui-design+2