Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaAug 3, 20232 min readCurated summary

Is your work style written in the stars? | Figma Blog

Astrology’s renewed popularity reflects people’s desire for recognition, guidance, and connection. Figma’s FigStrology widget brings those qualities into collaborative work by using machine learning to generate astrological personas and horoscopes from activity in FigJam files. The creators present it less as a serious predictive tool than as a playful way to encourage reflection and team interaction. ## Astrology as a Source of Connection - Astrology has existed for more than 4,000 years but was traditionally experienced privately. - Interest has increasingly shifted toward shared, collective experiences through apps such as CHANI and Co–Star. - Jacky Huang became interested during COVID after watching tarot readings on YouTube. - Huang says horoscopes appeal because they can make people feel recognized, understood, and seen. - Willy Wu views astrology as a source of belonging and reassurance in an uncertain world, even when its advice is humorous or not taken literally. ## Divination and Collaborative Design - Figma users are adapting divination practices for social and collaborative settings. - Danielle Baskin created Moonlight, a Figma-designed space for social tarot and reflection. - Figma’s persona quiz attracted more than 26,000 participants. - These projects position astrology and tarot as tools for conversation, self-reflection, and shared rituals rather than solely private practices. ## How FigStrology Was Created - Huang and Wu developed FigStrology as a FigJam widget. - The idea grew from Figma’s Photo Booth widget, which connects user behavior and activity with playful output. - FigStrology analyzes stickies and activity in a FigJam file, along with current “cosmic conditions.” - Machine learning then generates a unique persona and horoscope for the collaborative group or workspace. - The widget is intended as a lighthearted way to wind down a work session and make collaboration more engaging. ## Emphasizing Diversity and Team Strengths - The creators wanted FigStrology’s signs to highlight people and diversity. - Its premise is that individual strengths can complement other people’s weaknesses. - By turning team behavior into an imaginative horoscope, the widget encourages coworkers to notice different working styles and perspectives. Ultimately, FigStrology uses astrology as a playful collaboration device: not a replacement for genuine team communication, but a low-pressure way to spark reflection, humor, and connection at work.

Figma Machine Learning Figjam Collaborative Design+1

figmaJul 31, 20232 min readCurated summary

John Maeda on Creativity, AI, and the Human Pursuit of Uphill Thinking | Figma Blog

John Maeda argues that AI will transform creative work without eliminating the need for human creativity. While AI excels at efficiency, repetition, and finding the shortest path to an answer, meaningful creative breakthroughs often require experimentation, difficulty, and unconventional thinking. Designers should use AI to remove tedious work while deliberately preserving the human ability to pursue “uphill” paths. ## AI’s Promise and Threat to Creative Work - AI offers creatives greater efficiency and new capabilities, but may also produce large volumes of repetitive, cookie-cutter design. - Designers are learning to “speak machine” by collaborating with AI, training language models, and refining outputs to match their creative intentions. - Any technique developed with AI can potentially be replicated without its original creator, raising concerns about creative ownership and job security. ## Creativity Through Openness and Code - Maeda compares today’s AI concerns with his own experience in the 1990s, when he created distinctive algorithmic artwork. - Rather than keeping his methods secret, he open-sourced them at MIT so others could build their own creative work. - His involvement with MIT Scratch and Processing reflects his belief that programming can be a creative practice accessible to children, artists, and designers. ## Letting Computers Handle the Mundane - Computers are well suited to repetitive tasks such as: - Producing endless slide variations - Generating mockups - Performing image retouching - Automating this work could give designers more time to address emerging problems and develop more original ideas. - Maeda cites artist Jessie Shefrin’s observation that “by the time you come to the perfect solution, the problem has already changed,” emphasizing the need to keep moving rather than over-optimize a fixed answer. ## The Limits of Efficiency - AI is designed to find the shortest and most efficient route through a problem. - It can evaluate thousands or millions of possible paths rapidly and select the most efficient option. - Efficiency does not necessarily produce the most creative, meaningful, or impactful result. - The article presents “uphill thinking”—choosing difficult, indirect, or exploratory paths—as an important human strength in an increasingly automated world. Designers should embrace AI as a tool for reducing tedious labor, while continuing to protect the slower, less efficient processes that generate originality, insight, and meaningful creative work.

AI Machine Learning Generative AI Creative Coding+3

figmaJul 26, 20232 min readCurated summary

The Future of Design Systems is Semantic | Figma Blog

Design systems are moving from static component libraries toward semantic, reusable values that connect design and code. Figma argues that variables extend design tokens by supporting theming, dynamic prototypes, and platform-agnostic reuse. This shift can make large-scale systems more consistent and easier to maintain. ## Variables as the Next Step for Design Systems - Figma variables store reusable values for design properties and prototyping actions. - They reduce repetitive work and help teams manage complex design systems. - Unlike static tokens, variables can change based on context, enabling: - Design theming - Dynamic prototyping logic - Closer alignment between design and code - Figma introduced variables alongside Dev Mode and other features intended to connect designing and building. ## The Design Token Foundation - Design tokens represent repeatable decisions such as: - Colors - Typography - Sizing - Border radii - Numbers and strings - Tokens separate design properties from specific components or implementation details. - A single token can be updated centrally and propagated throughout one or multiple products. - This platform-agnostic structure reduces redundancy and helps maintain consistency. - Salesforce is often credited as an early design-token pioneer, using tokens to apply shared principles across platforms. ## Google Maps and Palette Governance - Google Maps discovered its product used more than 700 colors. - The team reduced the palette to 25 hues by removing subtle tones and transparency effects. - Tokens helped document and distribute the smaller palette. - Centralized values make it easier to prevent a carefully designed system from gradually expanding back into uncontrolled variation. ## From Tokens to Semantic Systems - Tokens codify design decisions, but variables add behavior and flexibility. - Their reusable, changeable values support broader system-level use cases than fixed tokens alone. - Figma presents this evolution as part of a larger industry shift toward design systems that express meaning and relationships rather than merely storing visual values. Teams should treat tokens and variables as shared semantic infrastructure: define reusable values centrally, connect them to implementation, and use contextual variation deliberately for themes and interactive experiences.

Figma Design Systems Prototyping Design Tokens+2

figmaJul 25, 20232 min readCurated summary

Shopify’s secret for staying ahead of the game | Figma Blog

Shopify encourages teams to pursue bold, unconventional ideas instead of settling for incremental improvements. The company challenges standard practices in product discovery, planning, and decision-making, using visual collaboration tools to create more creative and inclusive discussions. Its approach suggests that deliberately disrupting familiar workflows can produce stronger, more original outcomes. ## Challenge Documentation-First Product Work - Traditional roadmapping often begins with a written document outlining the problem and proposed direction. - Shopify’s Katarina Batina argues that this method can reinforce habits rather than clarify the real problem or uncover broader opportunities. - Starting in a collaborative visual workspace such as FigJam helps teams “break their brains” out of linear thinking. - Roadmap templates make metrics, key problems, proposed solutions, principles, assumptions, and dependencies explicit. - This structure allows teams to explore possibilities more freely instead of simply reacting to a finished document. ## Plan How You Plan - Shopify adapted a FigJam template for an annual in-person planning session among largely remote colleagues. - Team members completed the template beforehand, creating a shared baseline for discussion. - During the meeting, they updated the plan in real time as strategic decisions were made. - The shared workspace preserved the outcomes digitally, avoiding the need to photograph scattered sticky notes. - The team considered this approach its most effective planning session to date. ## Democratize Strategic Discussions - Shopify treats design tools as the primary setting for discussing strategic product decisions. - Visual collaboration gives people more ways to express ideas than written documents alone. - This is especially important for employees who may have strong ideas but do not excel at articulating them in prose. - In large meetings, participants can communicate through links, images, project snapshots, and sketches rather than relying entirely on text. - The approach makes decision-making more inclusive and helps teams develop a forward-looking vision. ## Sketch Ideas Instead of Overexplaining Them - The article begins a further section arguing that sketching can help teams develop ideas that are difficult to express verbally. - The provided text ends before this section is completed. Shopify’s broader recommendation is to intentionally disrupt familiar processes: replace rigid documents with visual exploration, make planning collaborative and continuous, and give teams multiple ways to communicate ideas.

Figma User Experience Figjam Brainstorming+2

figmaJul 23, 20233 min readCurated summary

The anatomy of launching a Figma open beta | Figma Blog

Launching a product is only the beginning of its go-to-market process. Figma used the two weeks after Dev Mode’s open beta launch as a coordinated research period to measure adoption, understand user sentiment, identify bugs, and prioritize improvements. The central lesson is to define success metrics and responsibilities before launch so teams can quickly turn feedback into product decisions. ## Post-launch work requires cross-functional ownership - Product, marketing, and support shared responsibility for evaluating Dev Mode. - The product team tracked feature usage. - Marketing monitored public sentiment and audience reach. - Support focused on bugs, requests, and potential improvements. - Product manager Avantika Gomes synthesized information from all sources, prioritized actions, coordinated follow-up, and guided iteration. - Constant communication ensured that important social posts and recurring user issues reached the broader team. ## Dev Mode as an open-beta test - Dev Mode is a Figma workspace designed specifically for developers. - It functions similarly to a browser inspector for design files, letting developers collect measurements, specifications, assets, and other information directly from the canvas. - The open beta provided free access to all Figma users through the end of 2023. - Figma used the beta to test whether Dev Mode addressed developer needs and to discover how it could be improved. ## Define metrics before launch - Feedback from developers and designers during the closed beta helped Figma refine core workflows, collaboration features, and newly identified needs. - The team selected a north star metric: the percentage of weekly active users in developer roles who used Dev Mode. - They also established benchmarks before launch, making it easier to judge whether results were strong or weak. - Prebuilt dashboards allowed the team to compare activity before and after the open-beta release. ## Measure adoption, reach, and user reaction - Figma tracked usage of individual features, including: - The Inspect panel - Compare changes - Related links - These measurements showed which capabilities were being adopted and which were most compelling. - To evaluate reach, the team monitored: - Social media impressions - Email open rates - In-product message impressions - Social sentiment and live audience reactions during Config helped reveal which features generated enthusiasm. ## Track problems through multiple feedback channels - Figma monitored Help Center article views to identify areas where users needed clarification. - In-product feedback submissions and support tickets provided direct reports of bugs and improvement requests. - Combining behavioral metrics with qualitative feedback helped the team understand not only what users did, but also where they struggled. The practical recommendation is to treat launch as the start of an intensive learning cycle: assign clear owners, establish benchmarks and dashboards in advance, and combine product analytics, public sentiment, and support data to guide rapid improvements.

Figma Dev Mode Design Tools User Research+3

figmaJul 18, 20232 min readCurated summary

The Shared Language of Props | Figma | Figma Blog

Design and engineering use the same component vocabulary, but often attach different meanings to terms such as “property,” “variant,” and “button.” Figma properties primarily describe visual variations, while code props may also control behavior, events, data, and rendering. Effective collaboration therefore requires translating concepts across environments rather than assuming identical names imply identical implementations. ## Components and Properties as Shared Concepts - Components are reusable elements governed by rules describing how they can look and behave. - Properties, or “props,” define the possible expressions of a component, including: - Variants - Boolean values - Instance swaps - Text values - In Figma, properties are used mainly to represent visual differences. - In code, props can also represent non-visual concerns such as event handlers and data. - A shared term can conceal different assumptions when designers and developers work in different tools and contexts. ## A Button Is Not the Same Everywhere - Designers and developers both work with buttons, but prioritize different concerns: - Designers focus on visual consistency and maintainability across design files. - Developers focus on interactivity, rendering, accessibility, and implementation. - A Figma button and a code-based button may share a name without sharing the same API or purpose. - Migrating a React and TypeScript application to a design-system-based frontend exposed conflicts between Material UI conventions and the organization’s custom design system. - The component library aimed to be intuitive and lightweight for full-stack engineers who primarily connected frontend and backend systems. ## Divergent Component Models - The design system contained two Figma components: - `Button` - `IconButton` - The codebase contained five button components. - Figma’s `Button` and `IconButton` did not use the same inheritance or primitive-component structure as the codebase. - Some properties, such as size and color variants, were duplicated in Figma because that structure better represented the design model. - Although the components shared names and broad concepts, they did not share the same purpose or complete set of properties. Teams should treat design and code components as related models rather than identical ones. Clear translation of property names, meanings, and responsibilities can preserve each environment’s strengths while reducing misunderstandings during implementation.

Figma Design Systems React TypeScript+3

figmaJul 12, 20232 min readCurated summary

Paula Scher’s 10 Rules for Play | Figma Blog

Paula Scher argues that creative “play” comes from freeing the mind to make unexpected connections between existing ideas, not from inventing something completely original. Her approach combines deliberate mental wandering, exposure to history and other disciplines, supportive collaborations, and a willingness to reject trends. The goal is to create conditions where designers can experiment and initiate new directions. ## Creating Space for Ideas - Meet the client, understand the brief, then do a mindless task such as cleaning to clear mental space. - Look through design-history books broadly, without copying or bookmarking ideas; begin the project later. - Use boring or uncomfortable situations—waiting rooms, traffic, offline flights—as opportunities to sketch and let the mind wander. ## Building Conditions for Play - Nurture long-term relationships that allow creative freedom, such as Scher’s decades-long work with the New York Public Theater. - Maintain a healthy mix of projects, support the team, and encourage people to question assumptions. - Treat better work as a way to raise expectations and generate even better work. - Recognize that genuine opportunities to experiment are rare, and consider pro-bono or low-paid projects as spaces for discovery. ## Escaping Familiar Influences - Change tools and leave the computer behind. - Visit bookstores, museums, galleries, or shops, and explore disciplines unrelated to the current project. - Accept that all creative work is influenced by something else; originality comes partly from how influences are combined and from avoiding passing trends. - Avoid mood boards when they merely encourage producing a slightly altered version of existing marketplace styles. ## Starting New Directions - Initiate your own creative “cluster” by doing something daring. - Design trends often become ordinary when others imitate the first bold example, so innovation requires being willing to go first. Designers can cultivate play by creating distance from routine, seeking varied experiences, and protecting relationships and projects that enable experimentation rather than imitation.

Design Thinking Graphic Design Branding Visual Communication+1

figmaJul 12, 20232 min readCurated summary

How Thumbtack structures their design system | Figma Blog

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences. ## Three-Layer Architecture - **Thumbprint Tokens** - The foundation shared by web and native clients. - Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows. - Offers the greatest flexibility but the least built-in structure. - **Thumbprint Atomic** - An atomic CSS library built on the tokens. - Enables developers to build interfaces without writing custom CSS. - Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media. - **Thumbprint Components** - Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings. - Improves development speed, consistency, and accessibility. - Developers can fall back to Atomic or Tokens when no suitable component exists. ## Layered Components and Tokens - Individual layers can contain their own sub-layers for added flexibility. - Thumbprint’s modal system separates: - `ModalCurtain`, which supplies core usability and behavior without visual styling. - `Modal`, which adds the standard visual design on top of `ModalCurtain`. - Developers generally use the more prescriptive `Modal`, but can use `ModalCurtain` for unusual requirements. - Tokens can also inherit from one another. For example, a semantic token such as `button-cta-background-color` may derive from a broader token like `cta-background-color`, which ultimately maps to a raw value such as `blue-400`. - Users are encouraged to select the highest abstraction appropriate for their use case. ## Why the Structure Helps - Higher layers reduce repeated work and improve consistency. - Lower layers preserve flexibility for custom product needs. - Components allow engineers to focus on product functionality instead of rebuilding common UI patterns. - Layered primitives provide a controlled way to support exceptions without abandoning the design system. - The architecture is intended to simplify maintenance and save time for both developers and end users. Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.

Design Systems React Accessibility Design Tokens+3

figmaJul 11, 20232 min readCurated summary

Explore the value of play through a new zine | Figma Blog

Finding room for play is presented as an essential part of design, helping people stay curious, experiment, and discover unexpected solutions. To explore this idea, Figma and It’s Nice That created *The Playbook*, a printed zine combining essays, advice, visual commissions, and hands-on activities. Debuted at Config 2023, it encourages readers to treat play and iteration as practical parts of creative work. ## A Collaboration About Play - *The Playbook* was produced jointly by Figma and It’s Nice That. - It explores spontaneous thinking, curiosity, and experimentation across different design practices. - The publication reflects Figma’s belief that play supports learning and helps collaborators connect ideas. ## Essays on Iteration and Collaboration - Figma Chief Product Officer Yuhki Yamashita discusses how to embrace endless iteration and work productively while ideas remain in flux. - Chief Technology Officer Kris Rasmussen examines collaborative engineering, arguing that engineers should work beyond strict role boundaries. - Together, the essays present iteration and cross-functional collaboration as central to modern product development. ## Creative Advice and Rules for Play - The zine features conversations with creatives about staying curious when possibilities feel unlimited. - Paula Scher contributes ten rules for play drawn from her career, including advice on sketching, influence, and creative experimentation. - The publication encourages readers to look for “what if?” moments that can unlock new directions. ## Interactive Activities and Visual Commissions - Readers can onboard themselves into the zine and take a quiz about their meeting-hosting style. - A design challenge built around “How might we?” offers a hands-on break from reading. - Shawna X visualizes a “lightbulb moment” in a risograph print. - Manshen Lo interprets Bruno Munari’s 12-step design methodology. - The publication combines essays and activities with a range of playful visual work. ## Printed Format and Config Debut - The Playbook was printed as an A5 zine and wrapped in compostable cellophane. - Two essays by Yamashita and Rasmussen appeared together in a complementary A6 zine. - Copies were distributed to Config 2023 attendees when they arrived. *The Playbook* treats play not as a distraction from serious design work, but as a method for learning, collaborating, and generating better ideas. Its combination of reflection and practical exercises encourages designers and teams to make experimentation a regular part of their process.

Figma Collaboration Product Development Design+1

figmaJun 20, 20233 min readCurated summary

Figma & Chromebook expand to K12 and Japan | Figma Blog

Figma and Google for Education are expanding their Chromebook partnership to make Figma and FigJam freely available to all K–12 districts in the US, with Japan as the first international expansion. The initiative aims to give students industry-standard design and collaboration tools while helping educators create more visual, interactive learning experiences. Figma argues that the tools can improve technical skills, classroom engagement, confidence, inclusion, and students’ ability to express ideas. ## Expanding Figma access in schools - A beta program previously gave Figma and FigJam access to students in 50 US school districts. - The program included large urban districts and smaller rural districts. - Figma is now offering free access to all K–12 districts across the US. - Students of every age can use Figma on Chromebooks, including younger learners. - Districts can receive free Figma Enterprise access, giving administrators: - Greater control over school environments - Visibility into usage - Class-management features - Support for student safety - The Chromebook partnership is expanding globally, beginning with Google schools in Japan. ## Design tools as a foundation for future skills - Figma is intended to help students develop: - Problem-solving skills - Iterative thinking - Collaboration - Empathy - Its infinite canvas lets students combine diagrams, images, mind maps, videos, and other media. - Students can demonstrate understanding visually rather than relying only on traditional written assessments. - Beta participants created projects such as nonprofit design concepts and app prototypes for improving local government services. ## Reimagining classroom collaboration - Teachers used FigJam for lesson plans, group projects, study guides, and interactive curricula. - The tools created a shared space where students and educators could build learning experiences together. - Projects included prototypes, visual explanations, and other forms of digital storytelling. - Figma describes the impact as extending beyond academic work to classroom culture and students’ sense of belonging. ## Supporting student voices and inclusion - Teachers reported that quieter students became more confident expressing ideas in digital spaces. - Features such as sticky notes, comments, reactions, and other collaborative interactions gave introverted students more ways to participate. - Digital collaboration helped some students build connections after years of remote learning. - The visual and flexible format was especially valuable for neurodiverse students who may find traditional tools difficult. - One special education teacher reported improvements among autistic students in: - Social skills - Executive functioning - Self-regulation - Collaboration ## Encouraging engagement and creative learning - Teachers said students were more excited to attend class and engage with coursework. - Some students continued working on Figma projects at home. - Figma enabled alternative forms of assessment, including: - Infographics - Storyboards - Prototypes - The platform functions as a creative sandbox where students can construct and communicate their own understanding. - In some classrooms, previously disengaged students rediscovered interest in learning through design. Figma’s recommendation is to make collaborative, visual design tools a normal part of K–12 education. By combining broad Chromebook access, administrative controls, and flexible creative workflows, the company aims to help every student participate more actively and become better prepared for a digital future.

Figma Figjam Design Thinking Digital Design+2

figmaJun 20, 20233 min readCurated summary

Config 2023 in Review: The Complete Recap | Figma Blog

Figma’s Config 2023 announcements reposition the platform as a workspace for the entire product development team, not just designers. The major launches—Dev Mode, variables, and advanced prototyping—aim to connect design more directly with code, development workflows, and real product behavior. Supporting updates to auto layout, fonts, and file discovery further improve everyday work, while Figma also signals a major investment in AI through its acquisition of Diagram. ## Dev Mode Connects Design and Development - Dev Mode is a dedicated Figma workspace designed around developers’ needs. - It helps developers: - Translate designs into code more quickly. - Connect Figma to Jira, GitHub, Storybook, and other tools through plugins. - Track designs and changes that need to reach production. - Inspect Figma files alongside code in VS Code. - Dev Mode launched in beta and was available free through 2023. ## Variables Bring Design Systems Closer to Code - Figma introduced variables to make design systems more flexible and scalable. - Variables can store reusable: - Colors - Numbers - Text values - Boolean values - They support aliasing and scoping, allowing teams to organize and contextualize values. - Variable modes enable themes such as light and dark designs. - Plugin and REST API support allows teams to manage variables programmatically. - The goal is to connect design tokens and systems more directly with the code that implements them. ## Advanced Prototyping Makes Designs More Dynamic - Variables can now be used in prototypes to represent changing application state. - Designers can use mathematical expressions and conditional logic, such as: - Increasing a number variable after each click. - Navigating to different screens depending on a variable’s value. - These capabilities let teams test realistic interactions before development begins. - In-context editing and inline preview allow designers to edit and play back prototypes in the same view. ## Quality-of-Life Improvements - Auto layout gained wrapping and minimum/maximum width and height controls. - The font picker now supports search, filtering, and previews displayed in each font. - The file browser makes it easier to locate files and projects shared by external teams. ## Figma’s Investment in AI - Figma expects AI to help people express ideas visually, speed up workflows, and create strong first drafts. - The company argues that turning a good draft into a world-class product will still require human judgment and expertise. - Figma acquired Diagram, founded by Jordan Singer, to accelerate AI development across the platform. - Diagram had previously built AI-assisted design tools on Figma’s platform. Overall, Config 2023 presents Figma as a shared environment spanning design, prototyping, development, and increasingly AI-assisted creation. Teams should consider Dev Mode and variables as the most significant changes for improving handoff, design-system management, and collaboration with engineering.

Figma Design Systems Prototyping Design Tokens+4

figmaJun 20, 20233 min readCurated summary

Introducing Figma’s New Dev Mode | Figma Blog

Dev Mode is Figma’s dedicated workspace for developers, designed to reduce friction between design and implementation. It provides familiar inspection tools, customizable code output, integrations with development workflows, and an extension for VS Code. Figma’s broader goal is to keep designers and developers working from the same, up-to-date source of truth. ## A Developer-Focused Workspace - Dev Mode works like a browser inspector for Figma files. - Developers can inspect layers and designs to find: - Measurements and implementation specs - Exportable assets - Design-system context - Connections between visual elements and code concepts - The interface is intended to feel familiar to developers who use tools such as Chrome DevTools. ## Faster, More Flexible Code Handoff - Dev Mode’s code panel includes: - A CSS box model - Modern syntax and tree views - Configurable dimension units - Customizable output for different languages and codebases - Generated code is positioned as a starting point that reduces repetitive translation from design to implementation. ## Connecting Design to the Development Toolchain - Figma’s GitHub integration links designs and components with files, issues, and pull requests. - Plugins connect Figma to tools including: - Jira, Linear, and GitHub for project tracking - Storybook for viewing coded components alongside designs - AWS Amplify Studio, Google Relay, and Anima for code generation - Teams can also build custom plugins to match their own workflows. - Design tokens and variables further improve consistency between design systems and code. ## Tracking Work Toward Production - Dev Mode is intended to support the increasingly blurred boundary between design and development. - It helps teams understand what is ready for implementation and maintain context while designs continue to evolve. - Figma emphasizes collaboration around work that remains in progress rather than waiting for designs to be fully polished. ## Bringing Dev Mode into VS Code - The Figma for VS Code extension lets developers: - Review designs - View comments and notifications - Track design changes - Inspect designs without leaving the editor - Use design-based code autocomplete - This keeps design context inside the developer’s primary coding environment. ## Availability and Pricing - Dev Mode and the VS Code extension were announced as beta features, free to all users through the end of 2023. - Beginning in 2024, Dev Mode requires a paid plan. - Dedicated Dev Mode-only access was planned at: - $25 per seat per month on Organization - $35 per seat per month on Enterprise Figma presents Dev Mode as an initial step toward tighter designer-developer collaboration. Teams should use it alongside integrations such as GitHub, Storybook, and VS Code to keep specifications, implementation context, and feedback in one continuously updated workflow.

Figma Design Systems Github CSS+4

figmaJun 20, 20233 min readCurated summary

AI: The Next Chapter in Design | Figma Blog

Figma argues that AI will become a core platform capability reshaping the entire product-development process, not merely another feature. It can accelerate ideation, design, and coding while allowing teams to focus more on problem-solving and creative judgment. Figma announced its acquisition of Diagram as part of this strategy, positioning AI as a force that will change how products are designed, what experiences are created, and who participates in the process. ## Figma’s AI strategy and Diagram acquisition - Figma acquired Diagram, founded by Jordan Singer, whose GPT-3-powered “Designer” plugin generated design concepts from simple prompts. - The acquisition brings Diagram’s team into Figma and builds on Figma’s existing investment in machine learning. - Figma’s open API has already enabled nearly 100 community-built AI plugins. - The company views AI as a platform underlying the entire product-development workflow. ## AI across the product-development process - During discovery, AI could: - Generate and synthesize early ideas from prompts. - Summarize discussions and concepts. - During design, AI could: - Use existing designs and design systems to provide recommendations. - Surface relevant components and patterns. - Help teams produce first drafts faster. - During development, AI could: - Infer design context more effectively. - Generate higher-quality, production-ready code. - The broader goal is to help teams do more work faster while moving their attention toward higher-level problem-solving. ## How design may evolve from pixels to patterns - Design systems already shifted designers away from repetitive details such as border radii and toward composition, direction, and judgment. - Atomic elements such as pixels became reusable components, enabling faster and more consistent workflows. - AI could extend this progression by generating higher-level structures and patterns. - Designers may focus less on assembling basic login components and more on inventing entirely new ways to authenticate. - AI might also recommend color palettes based on a project’s emotional tone or theme. - This could move design beyond familiar interfaces toward smoother, more intuitive, and more human experiences. ## What product teams may design - AI systems such as ChatGPT are shifting interaction away from navigating websites and apps toward asking questions and receiving answers. - AI can reduce the gap between a user’s intention and the actions required to achieve it. - For example, instead of opening a ride-hailing app, entering a destination, comparing options, and requesting a ride, a user could simply say, “Get me to JFK.” - Product builders will need to reconsider whether existing interfaces can deliver the same outcome with fewer steps and decisions. ## The changing role of designers - Technological change has historically transformed design without eliminating the need for thoughtful designers. - Designers have adapted to new platforms, collaborative workflows, and hybrid work. - Figma expects AI to change design roles and collaboration, but frames that shift as an opportunity to spend more time on creative direction, curation, and meaningful problem-solving. The practical recommendation is to treat AI as a foundational design and development capability rather than a standalone feature. Teams should explore how it can remove repetitive work while preserving human judgment, taste, and responsibility for the experiences they create.

AI Design Systems Machine Learning Generative AI+4

figmaJun 19, 20233 min readCurated summary

Why Roles Are Not Rules | Figma Blog

Figma CTO Kris Rasmussen argues that engineering roles should guide collaboration, not restrict who participates in product decisions. As products become more collaborative and nonlinear, engineers must contribute not only to implementation but also to deciding what to build. However, collaboration works best when teams balance broad input with clear ownership, milestones, and momentum. ## Collaboration Beyond Traditional Roles - Modern product development is increasingly multiplayer, shaped by: - Web technologies such as WebGL and WebAssembly - Collaboration tools like Google Docs - Hybrid and remote work - Engineers are no longer simply responsible for executing plans created by product managers and designers. - At Figma, engineers help determine both: - **How** to build products - **What** to build - Cross-functional collaboration includes working closely with product peers and incorporating customer feedback. ## Early, Open Design Work - Teams are encouraged to gather diverse perspectives at the beginning of a project. - Engineers write down early ideas in concept documents rather than waiting until proposals are polished. - Feedback is collected during the drafting process, allowing designs to evolve collaboratively. - This approach helps expose problems earlier, though it can be difficult to obtain timely feedback from teams focused on their own work. ## Engineering Crits as Feedback Forums - Figma holds regular engineering “crits” across design and engineering organizations. - Crits provide: - Early and frequent feedback - Expert input on technical designs - A dedicated forum for cross-team participation - They are explicitly **not approval meetings**: - No decisions need to be finalized during the session. - Participants identify problems and improve designs without immediately choosing a solution. - Figma uses FigJam so participants can collaborate in real time. - The goal is to improve a proposal until it no longer requires formal approval. ## Balancing Input with Direction - Collaboration can become counterproductive when teams receive too many conflicting ideas. - Excessive feedback may cause projects to: - Lose focus - Get stuck in endless exploration - Struggle with ambiguous tradeoffs, such as defining an initial pricing model - Teams need a balance between: - Diverging to explore possibilities - Converging to make progress - The right balance depends on the organization, culture, product, and desired outcomes. ## Milestones and Momentum - Figma breaks projects into clearly defined milestones. - Milestones help: - Set expectations with stakeholders - Signal when exploration should give way to decisions - Preserve forward momentum - Momentum makes goals feel attainable, while losing momentum can cause teams to question their direction and spin in circles. The practical lesson is to treat roles as areas of responsibility rather than rigid boundaries. Invite collaboration early, use structured forums for feedback, and establish milestones that make it clear when the team must stop exploring and move forward.

Figjam Real Time Collaboration Product Development Webassembly+2

figmaJun 19, 20232 min readCurated summary

Introducing Shortcut letter from the editor | Figma Blog

Shortcut is Figma’s redesigned blog, created to tell richer stories about the people, processes, and ideas behind new products. Its central philosophy mirrors Figma itself: collaboration, experimentation, and the way user input transforms tools over time. The new experience aims to make content more immersive, discoverable, and inspiring rather than static or one-directional. ## A Blog Built Around Collaboration and Play - Figma compares product development to games, where people create “house rules” and shortcuts to improve shared experiences. - This idea reflects Figma’s history as a web-based, multiplayer design tool. - Although collaborative editing initially seemed risky, user behavior and community feedback helped shape Figma’s evolution. - Shortcut will showcase how teams and users bring collaborative design to life through stories about process, craft, and problem-solving. ## A More Immersive Content Experience - The blog redesign replaces a static reading experience with a more dynamic and visually engaging one. - New articles cover: - Design systems - Engineering - Product design and development - Company culture - Behind-the-scenes work - Technical explorations - Examples include stories about Linear responding to a DDoS attack, font failures, and how Figma’s engineers draw inspiration from gaming. ## Improved Navigation and Visual Identity - Readers can sort content by topic and browse curated special collections. - Shortcut features new illustrations and motion work from a range of independent artists. - The redesign treats editorial design, animation, and artwork as essential parts of the storytelling experience. - Figma also invites writers, designers, and other creatives to collaborate with its editorial team. ## Inspiration Through Shared Ideas - Shortcut is built around “input for output”: one idea should lead to another, with inspiration moving in both directions. - The blog aims to encourage readers—and Figma’s own teams—to experiment, share ideas, and have more fun. - Stories range from curated series such as the Future of Design Systems to opinion essays, technical deep dives, and unexpected examples like a band using a Figma slide deck to relaunch its career. Shortcut positions Figma’s blog as an extension of its collaborative product philosophy: a place where stories, disciplines, and perspectives connect to inspire new possibilities.

Figma Design Systems Product Design Multiplayer Collaboration+2