shaders

Digital Tools, Human Expression: The Visual Identity Behind Config 2026 | Figma Blog (opens in new tab)

Config 2026’s visual identity used digital tools and AI to express human creativity rather than replace it. Figma’s Brand Studio built a system around evolution, fluidity, and harmony, combining expressive glyphs, imperfect textures, and structured compositions. The result connected AI-assisted making with craft, experimentation, and distinctly human irregularity across digital and physical conference spaces. ## A Visual System for Human–Machine Collaboration - The identity reflected three aspects of modern design: - **Evolution:** remixing and reinventing ideas into something new. - **Fluidity:** moving between design and code while starting from different points. - **Harmony:** using generative tools while maintaining human judgment. - The system combined: - Sketchy, generative, and crisp glyphs. - AI-prompted textures. - Structured, dynamic compositions. - The contrast between “wonky” results and programmatic digital processes represented how ideas can morph and multiply. - Particle glyphs suggested ideas spawning and generating, while clean rectangles represented more resolved concepts. - Glyphs were translated into 14-foot foam sculptures and installed around San Francisco’s Moscone Center. ## AI-Assisted Texture Generation - Figma’s Brand Studio created tools in Figma Make to codify three lo-fi visual effects: - Scribbly linework. - Blurred gradients. - Oval-shaped particles. - Images were processed through these tools to create compositions that felt surprising, hand-drawn, and imperfect. - A custom dithering tool applied a consistent pointillist treatment to hundreds of speaker portraits. - The textures balanced digital precision with human qualities such as irregularity, grain, and imperfection. - Animated versions of the textures appeared at the conference’s block party and on keynote screens. ## Designing Static and Motion Assets Together - The team developed motion and still graphics in parallel rather than treating animation as a final production step. - Motion influenced visual design, while design informed motion decisions. - Bringing glyphs to life helped the team discover new directions for the identity. - This iterative process reinforced Config’s theme of ideas evolving through experimentation and collaboration. Figma’s approach demonstrates how AI can support a strong visual identity when it is guided by human taste and craft. The practical lesson is to use generative tools to create possibilities, while preserving controlled imperfections and human judgment in the final system.

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog (opens in new tab)

Figma’s Config 2026 focuses on making the canvas a more expressive, collaborative environment where code, motion, shaders, generative plugins, and Weave tools work alongside traditional design layers. The company argues that code is a design material rather than a separate discipline, and that AI should support—rather than replace—human creativity. New features aim to let teams explore ideas faster while keeping design, implementation, and collaboration connected. ## Code Layers on the Canvas - Figma is introducing code layers, allowing any design layer to become an interactive code layer with one click or a prompt. - Teams can duplicate code layers and explore multiple directions side by side, just as they would with design frames. - Code layers support collaborative workflows including riffing, commenting, and iteration within the same Figma file. - Designers can extract code-generated designs back into editable design layers. - When changes are made to the design, a single click updates the corresponding code layer. - Early access is expected to begin in July 2026 through the Figma beta waitlist. ## Motion as a Core Design Material - Figma Motion brings animation directly into Figma Design, reducing the need to move between separate tools. - Its timeline includes keyframes, presets, and other controls for creating motion from scratch or adding animation to existing designs. - The Figma agent can generate an initial motion concept for designers to refine. - Motion can become part of a design system: an animation applied to a component can carry across screens and collaborators’ files. - In Dev Mode, developers can inspect the complete timeline, including timing values, easing curves, and keyframes. - Animation can be copied as CSS, JSON, or React-ready code. - Motion is MCP-compatible, allowing animated frames to be passed directly to coding agents. - Export formats include MP4, WebM, Animated SVG, and GIF, with additional formats planned. ## A More Unbounded Canvas - Figma describes the canvas as more than a place to store work: it is intended to connect ideas, tools, collaborators, and implementation. - The company’s broader Config strategy is to provide composable materials that let users experiment at the speed of their thinking. - Upcoming capabilities include shader fills and effects, generative plugins, Figma Weave tools, and expanded Figma agent functionality. - Figma argues that AI has lowered the barrier to creating, but people—not AI—will raise the creative ceiling through experimentation and bold expression. Figma’s direction is to unify design and development in one collaborative workspace. Designers and developers should use the new materials selectively: code layers for interactive exploration, Motion for reusable animation systems, and the canvas as a shared environment for rapid iteration from concept through implementation.

Figma’s Design Agent, Now With Custom Tools and Greater Context | Figma Blog (opens in new tab)

Figma’s design agent is expanding beyond prompt-based assistance into a more context-aware collaborator that understands a team’s workflows and design conventions. In open beta, it can create reusable generative plugins, shader effects, and shader fills directly on the canvas, giving designers more control without requiring traditional development setup. The result is a more personalized and expressive design process that combines AI assistance with native Figma workflows. ## Context as the Foundation for Collaboration - Figma argues that context separates a merely productive agent from one that understands how a team works. - With knowledge of a team’s methods, the agent can collaborate rather than simply generate outputs. - Greater context also enables tools and visual effects tailored to specific design practices. ## Build Custom Generative Plugins - Designers can prompt the agent to create reusable plugins without setting up a traditional development environment. - Plugins can support tasks such as: - Importing HTML onto the canvas - Generating dashboard layouts - Organizing image assets - Visualizing data - Generative plugins use PropsKit, helping them look and behave like native Figma tools. - Because they operate directly on the canvas, designers can iterate interactively. - Classic plugins remain necessary for workflows involving external services, AI systems, or third-party APIs. - Plugins created by the user, teammates, or the Figma Community are free and available on all plans; asking the agent to create them will consume AI credits once the feature is generally available. ## Create Shader Effects and Fills - The agent can generate WebGPU-powered shaders: small programs that control how pixels are rendered. - Shader effects function similarly to native Figma effects and can be: - Customized through parameters - Stacked together - Combined with native effects - Possible effects include particle stretching, lens distortion, color outlines, dither, liquid metal, and fractal noise. - Shader fills generate dynamic visuals beyond solid colors and gradients, including: - Watercolor - Moiré patterns - Pattern grids - Halftone effects - Particle webs - Magnetic fields - Designers can use shaders to create reusable visual workflows for applications such as collage, marbling, light leaks, embossing, and prism effects. ## Designer-Controlled, Agent-Assisted Workflows - Product designer Edward Chechique used the agent to create generative tools that previously required developer assistance or switching between separate AI tools. - Creative technologist Anna Zhang used the agent to build custom image-remixing shaders while focusing on functionality and refining the interface collaboratively. - Figma presents the process as an iterative dialogue: the agent proposes solutions, while the designer guides the parameters and creative direction. - The tools are intended to help designers turn personal techniques into reusable workflows that can be shared with teams. Figma’s update positions the design agent as both a creative assistant and a tool-building partner. Designers should use it to prototype custom plugins and visual systems directly in Figma, while relying on classic plugins when external integrations are required.

Figma Rendering: Powered by WebGPU | Figma Blog (opens in new tab)

Figma replaced its WebGL-based renderer with a WebGPU backend to unlock GPU compute, clearer resource management, and better error handling. The migration required more than swapping APIs: Figma redesigned its graphics interface, supported both WebGL and WebGPU, and built tooling to translate existing shaders. The project also improved the existing WebGL renderer by making rendering inputs explicit and reducing opportunities for state-related bugs. ## Why Figma Moved Beyond WebGL - Figma originally chose WebGL to deliver a smooth, browser-based infinite canvas when most design tools were native applications. - WebGPU, supported by Chromium since 2023, enables: - Compute shaders that move parallelizable work from the CPU to the GPU. - Less reliance on WebGL’s bug-prone global state. - More capable and understandable error handling. - The transition had to preserve WebGL compatibility and avoid performance regressions or disruptions during rollout. ## Making Draw Calls Explicit - The previous interface mirrored WebGL’s global-state model: - Buffers, textures, materials, and framebuffers were bound separately. - Resources remained bound after a draw call. - Developers could accidentally reuse stale state. - Figma redesigned `draw()` so that required resources are passed directly as arguments. - The WebGL implementation lazily updates bindings only when necessary, preserving efficiency while making dependencies explicit. - This redesign fixed several WebGL bugs before WebGPU support was introduced. ## Supporting GLSL and WGSL Shaders - WebGL uses GLSL, while WebGPU uses WGSL. - Maintaining separate GLSL and WGSL versions of every shader would have created excessive duplication and maintenance work. - Figma built a custom shader processor that: - Parses existing WebGL 1–compatible GLSL. - Translates it into a newer GLSL structure. - Uses the open-source `naga` tool to convert it to WGSL. - Generates both GLSL and WGSL outputs. - Extracts shader metadata such as input types and data layouts. - Supports file includes for shader reuse and modularity. - This allowed engineers to continue writing and maintaining one primary shader source while supporting both rendering backends. ## Adapting Uniform Data - Uniforms provide shader inputs such as colors and transformations. - WebGL allows uniforms to be updated individually through calls such as `uniform1f` and `uniformMatrix3fv`. - Figma’s original graphics interface followed this model with methods such as `setUniform1f`. - WebGPU requires uniforms to be grouped into uniform buffers and uploaded together. - Consequently, simply switching APIs could have reduced performance; Figma needed to redesign uniform handling carefully rather than directly reproducing WebGL behavior. ## Practical Outcome Figma’s WebGPU migration was an architectural modernization as much as a graphics API upgrade. The recommended approach is to introduce an explicit, backend-independent rendering interface, automate shader translation, and optimize data layouts carefully so WebGPU’s capabilities improve performance without sacrificing compatibility.