figmaApr 2, 2026

Build With More Context and More Control in Figma Make | Figma Blog (opens in new tab)

Figma’s Make kits and Make attachments add structured context to AI-generated prototypes, helping them start closer to production reality. Make kits provide design-system guidance through code packages, libraries, styles, and tokens, while attachments bring in project-specific data and requirements. Together, they reduce cleanup and make generated designs more consistent with how products are actually built. ## Make Kits Teach Make About the Design System - Make kits are reusable packages that combine components or styles with guidelines explaining how they should be used. - They can use: - JavaScript components from public npm packages - Packages from Figma’s secure private registry - Styles and design tokens from Figma libraries - Guidelines tell Make not only which components exist, but also how to apply them. - Instead of starting with generic UI and repeatedly correcting spacing, patterns, and components, Make can begin with production-aligned structures. - This helps: - Maintain consistency across forms, dashboards, settings, and onboarding - Let teams generate work in parallel without drifting from the design system - Reduce preparation and correction before review - Engineers can more easily recognize familiar components and focus on evaluating the proposal rather than translating it into their system. - Figma plans to expand kits to represent more design-system structure, including component structures from Figma libraries. ## Make Attachments Ground Prototypes in Project Context - Design systems do not capture every project-specific constraint, such as: - Real data - Migration requirements - Edge cases - Compliance rules - Legal copy and content - Make attachments allow users to provide source material directly instead of describing everything in a long prompt. - Supported materials include: - PDFs and Markdown files - CSV and JSON datasets - Screenshots and images - Brand guidelines - Legal copy - Media and SVG files - Code and other project assets - Attachments help Make create prototypes that reflect actual data, validation states, content, and requirements rather than producing an idealized version that omits complexity. - For example, an onboarding flow can be grounded in real user data, complete legal requirements, and multiple validation states instead of shortened copy and simplified edge cases. ## A More Production-Aligned Starting Point - Make kits provide the reusable design and code foundation. - Attachments add the details and constraints unique to a specific project. - The combination is intended to shorten the distance between an AI-generated prototype and a shippable product, allowing teams to spend less time rewriting and more time refining the experience.

svgdesign-systemsreactjavascript+3

figmaNov 17, 2025

Gemini 3 Is Now Available In Figma Make | Figma Blog (opens in new tab)

Figma has made Gemini 3 Pro available as an experimental model in Figma Make, positioning it as a tool for turning design ideas into polished, interactive prototypes. Early tests suggest it is particularly strong at exploring varied visual styles, layouts, motion, and interaction patterns while preserving functional fidelity. Figma’s broader conclusion is that AI expands designers’ creative range rather than replacing their role in directing and refining ideas. ## Bridging the Design-to-Code Leap - Gemini 3 Pro was tested on a Thanksgiving gratitude board designed in Figma Design. - It generated animated SVG leaves with on-screen physics, creating a calm, organic motion. - A Supabase connection allowed visitors to submit gratitude notes. - New notes appeared as leaves that revealed their messages on hover. - The example demonstrated how a visual concept could quickly become a functional, code-backed experience. ## Exploring Distinct Visual Styles - A New Year’s Eve RSVP page was used to test Gemini’s stylistic flexibility. - The model first created a Y2K-inspired design with: - Retro-futuristic visuals - Dark chrome styling - A functioning RSVP form - It then transformed the same experience into a “concrete poetry” treatment featuring: - Severe typography - Brutalist tension - Minimal decoration - Gemini maintained the core interaction and form functionality across both radically different aesthetics. - Motion and interactive details were adapted to match each visual direction. ## Working Within Design Systems - Figma tested Gemini 3 Pro in a mature UI environment using Make kits, npm imports, and Figma’s UI3 library. - Starting with a FigJam template, the team asked it to add a canvas background-style switcher. - Gemini produced 12 background styles using the correct UI3 components and functional interactions. - It also added unexpected refinements, including: - Animated transitions between textures - Sticky-note layering - Scaling effects - The result showed that the model could extend an existing design system rather than only generate isolated concepts. ## A Wider Canvas for Design - Figma argues that AI can increase the range of ideas designers are able to explore. - Gemini 3 Pro combines rapid iteration with visual and interaction fluency. - Gemini 3 Flash is also available as a faster, lighter option for quick ideation and refinements. - Both models can be enabled through Figma’s settings under the experimental models section, marked by the lab icon. Overall, Figma presents Gemini 3 Pro as a practical bridge between design, code, and experimentation. It is most valuable when designers use it to explore possibilities quickly while continuing to guide the creative direction and quality of the final result.

svgaidesign-systemsfigjam+4

figmaOct 6, 2025

6 Winning Figma Makes—and What You Can Learn From Them | Figma Blog (opens in new tab)

Figma’s first global Make-a-thon demonstrated how Figma Make can turn ideas into interactive prototypes quickly. More than 10,000 creators competed for $100,000 in prizes, and the winning projects were judged on creativity, innovation, execution, and prompt quality. The featured lesson is that creators should define an app’s structure and technical foundations—not merely describe the task. ## Make-a-thon and Figma Make - Figma Make is designed to bridge the gap between concepts and working, interactive creations. - The competition was held in partnership with Contra. - Entries ranged from a *Severance*-themed virtual escape room to a “Figma-Kart” racing game. - Winners showed how thoughtful prompting and experimentation can extend the tool beyond basic prototypes. ## Define the Structure, Not Just the Task - Second-place winner Sebastian Lumbi created a frame-by-frame SVG animation tool. - The app lets users: - Copy SVGs from Figma into the tool. - Build animations frame by frame. - Preview and export animations as GIFs. - His initial prompt described the product’s structure: a canvas at the top for drawing frames and a timeline below for viewing and adding frames. - Sebastian researched state management and component interaction before developing the app. - He used an iterative dialogue with the AI, beginning with two prompts and eventually adding roughly 80 more. - Figma Make’s revert feature allowed him to experiment safely and return to earlier versions when bugs or crashes occurred. ## Technical Understanding Improves AI-Generated Code - Even non-programmers benefit from understanding basic concepts relevant to their application. - Clear instructions about structure make generated code easier to debug and extend. - When technical decisions are unclear, creators can consult another AI for recommendations. - The main lesson is to establish the application’s architecture early, then use iterative prompts to refine features and solve problems. A practical approach is to describe the app’s components, state, and interactions up front, while treating AI generation as an iterative process with frequent testing and rollback.

svgprototypingfigma-makeanimation+2

figmaJan 8, 2025

Why Developers Should Embrace Creative Coding Again | Figma Blog (opens in new tab)

Creative coding once made websites distinctive, expressive, and technically ambitious, but templates and automation have made many sites predictable. The author argues that modern browsers now offer even more creative possibilities than before, yet designers and developers often remain constrained by outdated conventions. Reviving experimentation can help turn the web back into a medium for artistic expression rather than merely a container for information. ## From Handcrafted Websites to Templates - In the early 2010s, custom websites served as digital calling cards and demonstrated developers’ technical and creative skills. - Developers used emerging HTML5 capabilities such as: - Inline SVG - GSAP-powered animations - WebGL experiments - Complex CSS illustrations - Website builders and templates eventually made sophisticated features accessible to everyone. - This democratization was valuable, but it also encouraged predictable designs built around familiar patterns. ## The Browser’s Creative Evolution - Browsers now support capabilities that exceed those found in many design tools. - Important advances include: - Container queries - Advanced CSS scoping, inheritance, and responsive behavior - Dynamic units and sophisticated layouts - Improved typography, color handling, and animation - Adaptation to user preferences - Many newer designers and developers remain unaware of these features and continue working within older design paradigms. ## Modern Color and Design Possibilities - CSS supports color spaces beyond standard RGB, including: - HSL - OKLCH - These color spaces allow more vibrant and controlled gradients and transitions. - The author created a Figma plugin called **CSS color-mix()** to help connect modern CSS capabilities with design workflows. - As design and development converge, design tools can become places for experimentation rather than merely production and handoff. ## Creative Coders as Examples - Henry Desroches creates responsive websites with the precision and dimensionality of print design. - Sarah Drasner has demonstrated the expressive potential of SVG animation and illustration. - Tim Holman’s projects, including **Optical Toys** and **The Useless Web**, embrace playful experimentation. - Lynn Fisher treats viewport changes as part of the artwork, creating illustrations that transform with the browser’s width. - These creators show that templates can be starting points rather than limitations. The author encourages developers and designers to experiment with the browser’s full capabilities. By moving beyond templates and embracing creative coding, they can make websites that are more intentional, surprising, responsive, and expressive.

svgcsswebglcreative-coding+4

figmaMay 10, 2022

Figma Community Awards 2022 | Figma Blog (opens in new tab)

Figma introduced its first-ever Community Awards to recognize the plugins, widgets, templates, UI kits, and other resources that help designers collaborate and work more efficiently. With more than 1,600 resources published daily, the awards highlight how the community builds practical and creative tools for Figma and FigJam. Winners were selected through community nominations and voting, then announced at Config. ## Purpose of the Awards - The awards celebrate community members who “imagine, design, and build” together. - Recognized resources support workflows ranging from accessibility and UI design to workshops, ideation, and team bonding. - The program included ten award categories. ## 2022 Award Winners - **Plugin for extending Figma’s utility:** *Similayer* by Dave Williames, for selecting similar layers using multiple properties. - **Plugin for adding content:** *Content Reel* by Eugene Gavriloff and Microsoft, offering reusable text, images, and icons. - **Widget for teams:** *FigJenda* by PG Gonni, an interactive workshop and meeting agenda compatible with the FigJam timer. - **Widget for utility or fun:** *Rock Paper Scissors* by Alex Einarsson. - **Team bonding template:** *Remote Design Sprint* by Miranda Mazzara, Danila Gallardo, and Aerolab. - **Ideation template:** *Customer Journey Map* by Fuad Aslan. - **UI kit:** *Ant Design Open Source* by Mr Biscuit and Vinh Bui, an open-source design system. - **Icon set:** *css.gg* by Lona and Astrit, containing more than 700 CSS, SVG, and Figma icons. - **Educational resource:** *Micro interactions - Prototyping* by Rusmir Arnautovic. - **Graphic resource:** *Sketch Elements Brushes Set* by Streamline. ## How the Awards Worked - Community members could nominate resources through Figma Community profiles. - Nominations were open from April 14–22, followed by finalist announcements on May 2. - Voting took place from May 2–10. - Each resource could be nominated only once, but users could nominate as many different files, plugins, or widgets as they wished. - Nomination totals were kept private to preserve fairness. ## Recognition for Creators - Winners were honored during the awards ceremony at Config on May 11. - They received a physical Figma Community Award and Figma merchandise. - Creators were encouraged to promote their resources and use **#FigmaCommunityAwards**. The awards demonstrate how central community-created resources are to the Figma ecosystem. Designers were encouraged both to recognize tools that improve their work and to publish their own resources for others to discover and use.

svgfigmadesign-systemsprototyping+4

figmaJan 25, 2022

Little Big Updates: fixes and features for a better workflow | Figma Blog (opens in new tab)

Figma’s “Little Big Updates” introduces 32 small but meaningful improvements aimed at making Figma and FigJam faster, more accessible, and easier to navigate. The updates cover text editing, keyboard shortcuts, component publishing, libraries, exporting, and FigJam collaboration. Together, they streamline common workflows and reduce friction for designers and teams. ## Faster Editing and Accessibility - Text editing is up to 10 times faster in Figma and FigJam. - macOS accent-menu support is available by long-pressing letters. - HEIC image uploads are supported, making it easier to use iPhone photos. - Bullets remain consistent across mixed text styles. - Home and End keys navigate to the beginning or end of text areas. - External-link interstitials have been removed to preserve workflow continuity. - Retina screenshots pasted from Chrome will use the correct dimensions. - Text highlights on blue FigJam backgrounds are now more visible. ## Canvas Navigation and Keyboard Shortcuts - `⌘L`/`Ctrl+L` copies links to files and selected frames in the desktop app. - `⌘R`/`Ctrl+R` renames elements while the interface is hidden. - Holding `⌘`/`Ctrl` while clicking selects top-level frames directly. - Quick actions (`⌘+/` or `Ctrl+/`) can show or hide the FigJam UI. - Quick actions can also unlock all objects. - Hovering over the FigJam toolbar reveals additional keyboard shortcuts. - Connector text now supports new lines with Return or Enter. - Objects continue snapping to the grid while being dragged. ## Design Tools and Components - Vector network regions can be filled with different colors. - Components and instances can be searched when inserting (`Shift+I`) or swapping. - Any component can be published via its right-click menu. - Components can be searched in the publishing modal. - Published files now have a distinct icon for easier identification. - Invalid components can be located directly from the publishing modal. - The publishing modal allows users to choose which components appear in the asset list. - Unpublished changes can be published directly from the relevant interface. - A “Return to instance” option is available when selecting a main component. - SVG strokes on parent objects export correctly. - Libraries can be accessed directly from organization subscription settings. ## FigJam Improvements - FigJam shapes support more flexible resizing. - Right-clicking an element copies a direct link to it. - Stamps can be dragged directly from the stamp wheel. - The red shape color is now a truer red. - Team libraries are prioritized in the library-selection modal. - Connector text editing is simpler with standard Return or Enter behavior. The updates demonstrate how incremental improvements to shortcuts, performance, publishing, and collaboration can substantially improve everyday workflows. Designers and teams can explore the changes through Figma’s accompanying Community file.

svgfigmadesign-systemsfigjam+4

figmaApr 21, 2019

GitHub takes its collaborative culture to a new level | Figma Blog (opens in new tab)

GitHub adopted Figma to make its design system more collaborative, scalable, and accessible—especially for its distributed workforce. What began as a grassroots effort to standardize design evolved into a dedicated seven-person team and a largely Figma-based workflow. Figma’s browser-based collaboration and API helped GitHub remove tooling barriers, streamline contributions, and bring designers and engineers closer together. ## Building a Dedicated Design Systems Team - In 2015, GitHub lacked staff dedicated full-time to its design system. - Designers repeatedly recreated components, worked with outdated patterns, and lacked consistent documentation. - A grassroots initiative began improving the process and documented workflow. - Within six months, GitHub formed a permanent design systems team. - By 2019, seven of the company’s 25 product designers focused on reusable, interchangeable components. ## Removing Friction from the Design Workflow - Maintaining the design system initially required specialized software and knowledge of complex tools. - Contributors found it difficult to update shared assets such as GitHub’s Octicons SVG icon library. - GitHub tested Figma because it eliminated the need to install desktop software. - Combining Figma with its API enabled an automated, platform-independent contribution workflow. - The design systems team subsequently migrated UI components into Figma, making most design and development resources available in one place. ## Turning Figma into a Remote Collaboration Hub - Figma’s web-based workspace helped GitHub’s remote employees collaborate despite being in different locations. - Designers could work simultaneously in the same file, effectively replacing the physical whiteboard. - Shared design sessions and “design jams” helped ideas gain momentum and encouraged experimentation. - Prototyping became easier because designers could create and adjust flows without switching tools. - GitHub viewed Figma as a natural fit because both products emphasize collaboration between designers and engineers. ## Faster Feedback and More Connected Teams - Figma lowered the barrier for people outside design to participate in the feedback process. - Real-time collaboration helped distributed teams communicate more directly. - By consolidating components, prototypes, and design discussions, GitHub could support more efficient and consistent delivery. GitHub’s experience suggests that a design system works best when its tools make contribution as easy as consumption. For distributed organizations, a browser-based, collaborative platform such as Figma can turn design-system maintenance into a shared engineering and product activity rather than a specialized, isolated process.

svgfigmadesign-systemsprototyping+3

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.

svgfigmavector-graphicspdf+3

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.

svgfigmavector-graphicsandroid-studio+2

figmaMar 21, 2018

Introducing: Figma’s Platform | Figma Blog (opens in new tab)

Figma launched its Platform in 2018 to connect design files with external tools, scripts, and web applications. Its central innovation was a web API that made design data accessible across operating systems and workflows, enabling new forms of collaboration. Figma argued that this open, web-based foundation could replace outdated export-based processes with live, integrated design systems. ## A Web API for Design - Figma’s API was presented as a first for professional design tools, which had traditionally been siloed desktop applications. - Because Figma operates online, external software can access the current state of a design without depending on: - A particular operating system - Local file paths - Specific software versions - Companies could build custom tools around their own organizational needs. - Examples included: - Uber creating live displays and feeds of work in progress - GitHub automating parts of its icon-production workflow ## Core API Capabilities The initial Web API provided three main functions: - Reading design files in an open JSON format - Reading and writing comments - Rendering files or file sections as PNG, JPG, SVG, and other standard formats Using a file’s URL-based key, developers could retrieve a live representation of its design tree, including: - Shapes and text - Components - Prototype links and transitions - Constraints - Other structural information defining the design The API was designed for familiar web-development tools and programming frameworks rather than proprietary plugin languages, making integrations easier to create and maintain. ## Open-Source Demos and Integrations Figma announced demo projects illustrating possible uses of the platform, including: - A spell checker for Figma designs - A generative art tool - A way to place designs on the Ethereum blockchain It also highlighted integrations with Avocode, Haiku, Zeplin, and Pagedraw. ## Planned Platform Features Figma outlined several future additions: - **Webhooks:** Notifications for file or team events, including design updates. - **Write API:** Broader programmatic editing of Figma files beyond the existing Comment API. - **Extensions:** An in-app extension system, though Figma intended to prioritize robustness, predictability, and quality rather than release an unstable model quickly. ## Collaboration Problems in Traditional Design Workflows As design becomes relevant to engineers, researchers, marketers, executives, and other departments, desktop design tools create organizational friction: - Files must be exported and uploaded before sharing. - Shared files become outdated when the original changes. - Leaders lack an easy way to view and comment on live work. - Engineers spend time locating the correct assets. - Teams often recreate solutions that already exist elsewhere in the organization. Figma positioned its API as a way for enterprises to share, search, and monitor real-time designs across departments. ## Uber’s Internal Use Case Uber’s distributed design team worked across four cities and multiple products, including Uber Eats and Uber Freight. To improve visibility, the company planned to use Figma’s API to: - Broadcast in-progress designs on office TVs - Create a Dribbble-like internal repository - Make work easier to browse across the organization The example demonstrated how Figma’s API could turn design files into live organizational infrastructure rather than isolated project artifacts. Figma’s recommendation was to treat the Platform as a foundation for custom workflows and integrations. By exposing live design data through standard web technologies, it enabled companies to build collaboration tools suited to their own processes while reducing manual exports and duplicated work.

svgdesign-collaborationjsonwebhooks+3