Engineering articles from Figma
AI summaries and key learnings from Figma engineering teams.
How to supercharge your design system with slots
The article discusses how to enhance design systems by implementing 'slots', which allow for greater customization of components without compromising the integrity of the system. It outlines the...
3 ways product teams are building conviction faster with Figma Make
The article outlines how product teams at companies like ServiceNow, Ticketmaster, and Affirm are leveraging Figma Make to enhance their prototyping processes, allowing for faster iterations and more...
Workflow lab: AI image tooling and interactive prototyping in Figma
The article presents a detailed exploration of a workflow using Figma's AI image editing tools to enhance interactive prototyping for a cooking and recipe app called Trivet. It outlines three...
Building frontend UIs with Codex and Figma
The article introduces the Figma MCP server, a tool designed to enhance the workflow between design and code generation using Codex. It allows teams to seamlessly transfer design elements from Figma...
The future of design is code and canvas
The article explores the evolving landscape of design and development workflows, emphasizing the synergy between code and visual design tools like Figma. It introduces the Claude Code to Figma...
Redefining impact as a data scientist
The article outlines how data science can redefine its impact in complex systems, particularly in billing infrastructures. It emphasizes that impactful data science work often transcends traditional...
From Claude Code to Figma: Turning production code into editable Figma designs
The article explores the new capabilities of integrating Claude Code with Figma, allowing developers and designers to transform production code into editable design artifacts seamlessly. This...
For the love of craft: Vectorize images in Figma
The article introduces 'Vectorize', a new AI-powered tool in Figma that enables users to convert raster images into editable vector graphics. This functionality allows designers to refine and scale...
Think outside of the box—with Claude and FigJam
The article highlights the innovative use of Claude, an AI tool by Anthropic, within FigJam to facilitate collaborative diagramming for teams. It emphasizes the ability to transform conversations...
Cooking with constraints: A designer’s framework for better AI prompts
The article discusses the importance of structured prompts in AI, particularly in the context of design. It introduces the TC-EBC framework (Task, Context, Elements, Behavior, Constraints) as a...
Supporting faster file load times with memory optimizations in Rust
The article discusses memory optimizations implemented in Rust to enhance file load times for Figma's multiplayer system. The Figma team identified that the default BTreeMap representation of file...
Visibility at scale: How Figma detects sensitive data exposure
The article outlines Figma's approach to mitigating sensitive data exposure through a system called Response Sampling. This system continuously monitors outbound responses to validate access and...
Forrester analyzes the ROI of Dev Mode
The article presents findings from Forrester's analysis of the ROI of Dev Mode, a tool designed to enhance developer efficiency by reducing friction in workflows. It highlights the importance of...
Why you should care about design context
The article emphasizes the critical role of design context in enhancing collaboration between designers and developers, particularly when utilizing AI tools in the design process. It outlines best...
A tale of two parameter architectures—and how we unified them
The article outlines the challenges faced by Figma in managing two distinct parameter architectures for component properties and variables, which led to user confusion and inconsistencies. It...
Make your site interactive with code layers
The article introduces code layers in Figma Sites, allowing users to create interactive web elements using custom React code without extensive technical knowledge. It emphasizes the ease of...
Double click: What does MCP mean for agentic AI?
The article explores the Model Context Protocol (MCP) introduced by Anthropic and supported by OpenAI, which facilitates communication between AI assistants and external tools. By standardizing...
Canvas, meet code: Building Figma’s code layers
The article outlines the development of code layers in Figma, which allows users to integrate code directly into their design workflows. This new feature leverages React for component-based...
5 shifts redefining design systems in the AI era
The article explores five significant shifts in design systems as they adapt to the AI era. It emphasizes the transition from static libraries to dynamic frameworks that enhance craft and quality in...
6 skills every engineer needs for the AI era
The article outlines six critical skills that engineers must develop to thrive in an AI-driven landscape. It emphasizes the importance of using AI not just for automation but for enhancing creativity...