html

How I built a demo generator with GitLab Duo Agent Platform (opens in new tab)

Click-through demos communicate product value more effectively than documentation, videos, or live environments, but traditionally required days of manual work. The author built a GitLab Duo Agent Platform workflow that turns screenshots and optional context into a narrated, branded HTML demo, opens a merge request, and publishes the result to GitLab Pages. The approach makes demos repeatable, reviewable, versioned, and easier to update when the product changes. ## Why Click-Through Demos Work - Users understand features faster by seeing them in action. - Click-through demos let viewers control the pace without requiring: - Access to a live product environment - Expertise navigating the product - External video-editing tools - Demos are reusable links that can be shared consistently through channels such as the GitLab Demo Hub. ## From Virtual Machines to Agents The author describes three stages in demo creation: - **Virtual machines:** Product and demo content were packaged into VMs, later hosted on centralized ESX servers. - **External SaaS tools:** Demo platforms added analytics and convenience but remained manual and dependent on vendor infrastructure. - **Agentic workflows:** Agents generate demos from prompts and deploy them within the same project, removing vendor dependency. Each stage improved accessibility, but agents make demos more sustainable by reducing repetitive work and simplifying updates. ## The Demo Creation Workflow A complete demo typically requires: - Learning the feature through documentation, issues, Slack, and discussions with product and engineering teams. - Developing a customer-focused story and scenario. - Creating a project and realistic demo data. - Capturing screenshots or video clips. - Writing step-by-step narration. - Assembling the demo in a clickable format. - Gathering stakeholder feedback and incorporating revisions. - Publishing to GitLab Docs, the Demo Hub, or other destinations. - Announcing the demo internally and externally. These activities can take days, and product changes may force the process to restart. The agent automates much of the predictable work while leaving feature selection, quality review, and final approval to humans. ## How the Click-Through Demo Generator Works - Screenshots are placed in a project folder. - An optional `context.md` file provides feature background. - An issue comment triggers the workflow. - The agent: - Renames and reorders screenshots - Writes the narration - Applies a branded HTML template - Creates a merge request - After review and merging, the demo is automatically published to GitLab Pages. - Follow-up changes can be requested from the agent. A Custom Flow invokes a custom tool that assembles the HTML, places narration panels over screenshots, and posts the merge request link back to the issue. ## Outcome-Focused Narration A project skill guides the agent’s writing so the demo explains customer value rather than merely walking through the interface. The required structure has three acts: - Open with the customer’s problem. - Show the product solving that problem step by step. - Close by explaining the value the customer gains. Localization can be added by creating a language-specific skill, allowing future demos to be translated automatically. ## Automated Publishing Publishing is also handled through an agent skill: - A demo is tagged as ready for production in the development gallery. - The agent enters the Demo Hub project. - It writes a short description, adds the current date, applies a “new” tag, and opens a merge request for the demo card. - A human still reviews and merges the request before the demo goes live. ## Demos as Code Because a click-through demo consists primarily of HTML, screenshots, and configuration, it can live in a GitLab repository rather than an isolated external tool. This enables teams to: - Review demos through merge requests. - Improve them collaboratively. - Track changes and versions over time. - Keep demos alongside the workflows that generate and publish them. The practical recommendation is to identify repetitive, well-defined work in your own organization and use GitLab Duo Agent Platform to automate its groundwork, while retaining human control over strategy, review, and release.

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.

The uphill climb of making diff lines performant (opens in new tab)

GitHub rebuilt the pull request **Files changed** experience to keep diff reviews responsive across everything from tiny fixes to massive changes. The core conclusion is that no single optimization solves performance at scale; instead, targeted rendering improvements, virtualization, and simpler components must work together. Early results show that even small reductions in DOM size can have substantial effects on memory usage and interaction latency in large pull requests. ## Performance Challenges at GitHub’s Scale - Pull requests may contain thousands of files and millions of lines. - In extreme cases, the old experience reached: - More than **1 GB of JavaScript heap usage** - Over **400,000 DOM nodes** - Unacceptably high Interaction to Next Paint (INP) scores - Large reviews became sluggish or nearly unusable, despite the experience remaining fast for most smaller pull requests. ## A Strategy Based on Pull Request Size GitHub concluded that different pull request sizes require different performance strategies: - **Optimize diff-line components** so medium and large reviews remain fast without losing expected browser behavior, such as native find-in-page. - **Use virtualization for the largest reviews**, rendering only the content currently needed to preserve responsiveness and stability. - **Improve foundational components and rendering**, allowing performance gains to benefit every pull request size. ## Problems with the Original Diff Architecture The first React implementation made each diff line unnecessarily expensive: - Unified view used roughly **10 DOM elements per line**; split view used about **15**, before syntax highlighting added more `<span>` elements. - Each unified diff line typically involved at least **eight React components**, while split view involved at least **13**. - Additional states—such as comments, hover, and focus—could add still more components. - Small components often registered five or six React event handlers each, resulting in **20 or more handlers per line**. - These costs multiplied across thousands of lines, increasing JavaScript heap usage and worsening INP. - The component-heavy design was initially reasonable when React was introduced, but proved unsustainable for unbounded data sets. ## Incremental Improvements in the New Design GitHub’s second version focused on simplification and removing unnecessary structure: - Reduced state, JavaScript, React components, and DOM elements. - Removed redundant `<code>` tags from line-number cells. - Eliminating just two nodes per line saves approximately **20,000 DOM nodes across 10,000 lines**. - The example demonstrates how seemingly minor changes compound into meaningful improvements at large scale. The practical lesson is that performant large-scale interfaces require layered optimizations: simplify every repeated element, reduce per-item overhead, and use virtualization when rendering everything at once is no longer viable.

Agents, Meet the Figma Canvas | Figma Blog (opens in new tab)

Figma is opening its canvas to AI agents, allowing tools such as Claude Code and Codex to create and modify designs directly in Figma files. Through the `use_figma` tool and customizable skills, agents can use a team’s components, variables, design decisions, and workflows instead of producing generic designs. The feature is free during beta but is expected to become usage-based and paid. ## Agents Work Directly on the Figma Canvas - Figma’s MCP integration lets agents read and write Figma files through the `use_figma` tool. - Agents can create or update: - Design assets - Components - Files based on existing design systems - Designs linked to established variables and conventions - Teams can move between code, the command line, and Figma while keeping design context shared. - Figma positions the canvas as the place where product decisions become visible and refined. ## Working Across Code and Canvas - The existing `generate_figma_design` tool converts HTML from live apps and websites into editable Figma layers. - The new `use_figma` tool operates directly on the canvas, using existing components and variables. - The tools are intended to work together: - `generate_figma_design` brings current implementation details into Figma. - `use_figma` edits those designs or creates new system-aligned assets. ## Skills Encode Design Intent - Skills are Markdown-based instructions that tell agents: - Which workflow steps to follow - What sequence to use - Which team conventions to respect - What quality standards and specialized knowledge to apply - Anyone can author a skill without building a plugin or writing traditional code. - The foundational `/figma-use` skill teaches agents Figma’s structure and core principles. - Teams can customize that foundation to reflect their own design systems and working methods. ## Example Skills and Workflows Figma highlights skills for tasks such as: - Generating component libraries from code - Creating designs from existing components and variables - Producing accessibility specifications for VoiceOver, TalkBack, and ARIA - Creating components from structured JSON contracts - Applying design systems to existing designs - Managing spacing through variables and fallbacks - Synchronizing design tokens between code and Figma - Running parallel, multi-agent design workflows ## More Predictable and Self-Correcting Output - Skills make AI behavior more consistent by encoding repeatable instructions and implementation rules. - Agents can use screenshots to identify mismatches and iteratively refine generated screens. - Because agents work with real Figma structure—components, variables, and auto layout—corrections affect the underlying design system rather than only the visual appearance. - Team conventions become active rules that agents apply during creation, rather than static documentation they merely reference. Figma’s agent workflow is most useful when teams invest in well-defined components, variables, and skills. During the beta, teams can experiment with `use_figma` and community skills to automate design work while preserving their existing design intent and system standards.

Bringing Figma Make to the Canvas | Figma Blog (opens in new tab)

Figma is bringing its AI-generated Figma Make previews directly into the Figma Design canvas through a new “Copy design” feature. Users can copy previews as editable, structured layers rather than static screenshots, making it easier to refine ideas collaboratively and move from prompt to prototype to production. Figma views this as the first step toward making Make outputs fully native and integrated with Design. ## Copying Make previews as editable layers - “Copy design” lets users bring any design from a Figma Make preview into Figma Design. - Imported previews become editable layers that can be: - Edited and remixed - Refined by teams - Used as building blocks for further design work - The feature removes the need for extra exporting, naming, or switching between separate workflows. - A product manager, for example, can generate and refine a mockup in Make, then place it into the Design canvas for the team to develop further. ## From screenshots to collaborative building blocks - Figma emphasizes that Make outputs should be more than finished-looking images. - Structured layers preserve context and enable direct iteration on the canvas. - This creates a more flexible path from: - Natural-language prompt - Prototype - Collaborative design - Production-ready work - The canvas becomes a shared space where anyone can contribute to and evolve AI-generated ideas. ## Learning from html.to.design - Figma acquired the technology behind <div>RIOTS’ `html.to.design` plugin. - The plugin converts live prototypes and HTML into editable Figma frames. - Figma Make users had already adopted the plugin to reconnect generated prototypes with the Design canvas. - The technology was demonstrated at Config 2025 and has been developed over three years, reaching nearly two million users. - <div>RIOTS will continue independently building and maintaining `html.to.design` and its other tools. - The partnership is intended to accelerate future development and new plugin features. ## Figma’s broader vision for Make - Figma wants AI to accelerate existing creative workflows rather than create isolated outputs. - The company sees the canvas as a place where ideas from any source can be imported, explored, and transformed collaboratively. - Copy design is presented as an early step toward deeper integration between Figma Make and Figma Design. Figma’s recommendation is implicit: use Make for rapid idea generation, then bring those ideas into Design as editable layers for collaborative refinement and production work.

Publish Your Designs On The Web With Figma Sites | Figma Blog (opens in new tab)

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features. ## Design and Publish Directly in Figma - Users can create live websites without exporting designs or switching to separate development tools. - The workflow supports portfolios, event websites, landing pages, and other interactive web experiences. - Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources. - A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate. - Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems. - Figma also provides common building blocks such as navigation, hero sections, and complete page layouts. ## Responsive Design and Prototyping - Figma Sites automatically adapts layouts, text, and designs across breakpoints. - Multi-edit enables simultaneous changes across multiple screen sizes. - Text styles can define different sizing and spacing for each breakpoint without relying on variables. - Designers can preview a fully responsive site rendered in HTML and CSS before publishing. - The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints. - Interactive previews can be shared with collaborators for feedback. ## Built-In Interactions and Motion Figma Sites includes pre-built effects for creating more dynamic websites, including: - Mouse parallax - Lightboxes - Infinite spinning objects - Draggable elements - Typewriter text - Scrambled text reveals - Marquee, reveal, and scroll-based effects The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components. ## Future Customization and AI Features - Upcoming code layers will allow designers to create interactive experiences without plugins or external tools. - AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks. - Code layers will eventually support reusable components and instances, similar to Figma Design libraries. - These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow. Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.

Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog (opens in new tab)

Figma’s request for horizontal scrolling in the Layers panel exposed significant design and engineering complexity. The panel contains interactive, virtualized layers whose names and nesting change dynamically, so scrolling could easily obscure hierarchy or disrupt users’ mental models. Through three unshipped prototypes, the team learned that preserving context and preventing accidental actions mattered more than applying seemingly simple scrolling behaviors. ## Why Horizontal Scrolling Was Difficult - Nested layers can extend beyond the panel, requiring users to move horizontally to see their full hierarchy. - Layers are interactive: users can hide, lock, collapse, and expand them while scrolling. - Virtualization renders only visible layers for performance, meaning newly visible rows may have different text lengths. - The design needed to communicate that more content existed without making the hierarchy harder to understand. - Code-based prototyping with JavaScript, HTML, CSS, and React helped the team test behavior across thousands of layers and complex interactions. ## Version One: Indicators at the Panel Edges - The team explored showing icons at the top-left and bottom-right edges when layers moved out of view. - This symmetrical treatment was intended to help users understand their position in the hierarchy. - Engineering challenges arose because edge icons needed opaque backgrounds that covered layer text while scrolling. - Layer rows did not have enough positional knowledge to determine which areas should be covered or revealed. - The design also created a ragged edge where partially visible layer names ended, introducing visual clutter. - The experiment demonstrated that a symmetrical solution could create new problems, particularly around unused white space. ## Version Two: Automatically Scrolling to Selected Layers - Another prototype automatically scrolled the Layers panel to center a layer selected on the canvas. - Although this made the selected layer easy to find, it often moved the panel both vertically and horizontally. - Testers found the behavior disorienting because parent layers and surrounding context disappeared. - Figma compared the experience to a map suddenly jumping to another location while driving. - The team concluded that users need to retain their mental model of a layer’s name, location, and relationship to parent components. ## Version Three: Renaming Layers While Scrolling - Horizontal scrolling created ambiguity when a user began editing a layer name and then scrolled to another layer. - One possible behavior was to save the edited text automatically when scrolling away. - The team rejected this because scrolling was not a strong enough signal that the user intended to confirm the rename. - The issue highlighted the need to avoid turning navigation actions into irreversible edits. Figma’s experiments show that horizontal scrolling in a dynamic hierarchy is not merely a visual or mechanical feature. The best solution must preserve orientation, context, and user control while handling virtualization and interactive layer states.

Making Space for a Handmade Web | Figma Blog (opens in new tab)

The web’s early personal, expressive character has been diminished by commercialization, platform standardization, and pressure to optimize for broad audiences. Chia Amisola argues that a “handmade web” still exists in pockets such as Neocities and internet-art communities, and that anyone can support it by making a website without forcing it to serve a conventional purpose. Websites can instead be temporary, obscure, playful, poetic, or collectively imagined spaces. ## From Personal Webpages to Standardized Platforms - In the 1990s, services such as GeoCities gave people small parcels of digital space to build personal webpages. - GeoCities hosted as many as 38 million pages, organized into themed “neighborhoods” and shaped by amateur creativity. - Although the web now contains more sites than ever, efficiency, commercialization, and social media have reduced its visual and expressive variety. - Many people retreat into the internet’s “dark forest,” limiting public self-expression because of judgment, surveillance, or pressure to conform. ## The Handmade Web Still Exists - Neocities continues GeoCities’ legacy by offering free hosting and has grown to nearly one million sites. - Organizations including Rhizome, the Center for Net Art, and the School for Poetic Computation support internet art through exhibitions and workshops. - Decentralized-web initiatives supported by groups such as the Internet Archive promote an internet shaped and owned by its users rather than concentrated platforms. ## Websites as Living, Personal Spaces - Making a website is presented as the most direct way to participate in the handmade web. - A website does not need to be a resume, portfolio, blog, homepage, or comprehensive representation of its creator. - It can be treated as a changing environment that grows over time, rather than a fixed destination. - Personal sites can be short-lived or maintained for decades, focused on one subject or combining many interests, and addressed to a broad community or a single person. ## Websites with Time Limits - Websites can deliberately operate only at particular times or for limited durations. - B&H’s website reflects the closing schedule of its physical stores during religious observances. - “Cloudwatching” and “Stargazing” are accessible only during the day and night, respectively. - Temporary projects such as Internet Stoop and Reddit’s The Button demonstrate how expiration and scarcity can create meaningful online experiences. - Digital spaces are inherently impermanent because domains expire and sites require ongoing maintenance. ## Websites That Resist Discovery - A site can be rewarding precisely because it is difficult to find. - Cassie McQuater’s *Black Room* uses an intentionally illegible URL, while *Default Filename TV* collects videos that retain their original camera-generated filenames. - Obscurity offers an alternative to search-engine optimization, algorithmic distribution, and polished branding. - These sites encourage “surfing” through links and rewarding accidental discovery. ## Websites Without Clear Ownership - Websites can outlive or separate themselves from their original creators, much like abandonware. - Anonymous or ownerless sites can function as fictional tools, alternate realities, or spaces where visitors construct their own meanings. - JODI’s long-running site presents a maze of ASCII landscapes, while the collectively authored SCP Foundation uses a fictional wiki to build a shared mythology. The practical recommendation is simple: make a website without requiring it to be useful, polished, permanent, or widely understood. Its value may lie in being personal, strange, temporary, and shaped by the people who encounter it.

Breaking In: A Guide To Landing Your First Product Design Role | Figma Blog (opens in new tab)

Figma’s guide explains how aspiring product designers can land their first role by presenting strong work, communicating their thinking, and showing how they learn from challenges. It emphasizes that a portfolio should be personal but focused on clear storytelling, accessible navigation, and evidence of design impact. The strongest projects are those where candidates can explain their decisions, trade-offs, constraints, and outcomes. ## Crafting a Portfolio - Portfolios do not need to follow one prescribed format or use a specific website builder. - The priority is to: - Showcase your best work. - Tell compelling project stories. - Make the portfolio easy to navigate. - Represent your individual perspective and skills. ### Lead with Your Best Work - Your first project creates the initial impression, so lead with work that best demonstrates your: - Design skills - Creativity - Process - Product impact - If choosing between projects, feature the one you can discuss most naturally and explain most compellingly. - Strong case studies should include: - A clear problem statement - Important project milestones - An insightful conclusion - Relevant metrics and learnings - What you would change in retrospect - A project does not need to have been an overwhelming success. Honest reflection and lessons learned can create a stronger narrative. - Explain the reasoning behind design decisions, not just the final visuals. - Discuss the trade-offs, advantages, disadvantages, constraints, and implications of choices involving colors, components, styles, and copy. - Figma designer Tammy Taabassum argues that explaining “why” demonstrates product thinking more effectively than simply showing “what” was designed. ## Figma’s Early-Career Opportunities - Figma welcomes interns and new graduates onto its product design team. - Early-career designers are encouraged to contribute actively and bring new ideas rather than merely observe. - The guide is intended to explain what Figma looks for and how aspiring designers can prepare for its interview process. A practical approach is to build a portfolio around a few well-developed case studies, prioritize the work you can explain most clearly, and make your decision-making and learning as visible as the final design.

Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog (opens in new tab)

Codegen in Figma’s Dev Mode is intended as a starting point for design implementation, not a complete replacement for developer judgment. Figma provides built-in snippets, while custom plugins extend code generation for different frameworks, languages, and team conventions. The post highlights several tools that can accelerate design-to-code workflows across web and mobile projects. ## Codegen as a Design-to-Development Starting Point - Codegen automatically generates code from defined design rules or specifications. - Figma argues that generated code should augment—not automate away—the design and development process. - Dev Mode creates code snippets for selected canvas objects in the inspect panel. - Users can choose different programming languages and measurement units. - Teams with mature design systems can build custom codegen plugins to match their conventions. ## Anima: Customizable React and HTML Generation - Exports Figma components into React or HTML with CSS, SCSS, or Tailwind. - Produces interactive, responsive, and maintainable snippets. - Detects repeated components to reduce duplication. - Learns team conventions from added code snippets. - Supports prompts for animations and style-specific adjustments directly in Dev Mode. ## Builder: AI and Code Components - Generates React, Svelte, and HTML using AI. - Can incorporate a team’s existing code components to better align design and implementation. - Allows users to refine output conversationally and train it to match their coding style. - Automatically adapts designs for responsiveness. - Provides a separate web interface for experimenting with generated code outside Figma. ## Figma to Code: Open-Source Multi-Platform Output - Converts designs into responsive web or mobile code. - Supports HTML, Tailwind, Flutter, and SwiftUI. - Lets users preview Tailwind output and copy it into their code editor. - Is available as a free, open-source Figma Community plugin. ## Locofy.ai: Interactive Web and Mobile Code - Generates code for components and full screens in React, HTML/CSS, Next.js, Gatsby, and Vue. - Supports design optimizations such as auto layout and frame grouping. - Adds interactivity through semantic HTML tags, libraries, and actions. - Produces responsive layouts, reusable components, props, and human-readable class names. - Enables teams to share prototypes, bind data, and export code or Storybook files. - Supports direct GitHub synchronization with automatic merging and conflict resolution. The practical recommendation is to use codegen to reach a useful first draft faster, then have designers and developers refine the output against the project’s design system, architecture, and coding standards.

Three Creator Fund projects to know and love | Figma Blog (opens in new tab)

The Figma Creator Fund supports creators building free plugins, widgets, templates, and educational resources for Figma Community. Since launching in March, it has awarded nearly $300,000 to 13 creators in nine countries, reaching almost a million users. The post highlights how these grants help creators solve difficult, practical problems while keeping their tools freely available. ## The Creator Fund’s Purpose - The program funds resources that expand what creators can do in Figma. - Supported projects include: - Mandarin-language design systems tutorials - Developer-platform education tools - Design-to-code plugins - Free templates and widgets - Figma prioritizes projects that: - Address challenging problems - Save users time - Offer practical value - Can remain free for the wider community - Applicants are encouraged to present a clear vision, invest effort in their application, prepare visuals, and pursue ideas they genuinely care about. ## Figma to Code by Bernardo Ferrari - Based in Curitiba, Brazil, Bernardo Ferrari created Figma to Code, a plugin that converts Figma designs into: - HTML - Tailwind CSS - Flutter - SwiftUI - The project began during the COVID-19 pandemic, when Bernardo helped rebuild a state-level virus-tracking website. - Although he had not worked extensively with web development since 2015, he used Figma as a bridge between design and implementation. ## Problems with Existing Design-to-Code Tools Bernardo found that existing plugins were limited because they were: - Too slow - Dependent on too many steps - Paywalled for full functionality - Incomplete in their support for Figma’s API - Missing important capabilities such as auto layout - Restricted to a single programming language or framework - Weak at handling responsive design and accessibility He spent two months building his own plugin, which launched in July 2020. ## Using the Grant to Modernize the Plugin - Figma and web frameworks evolved significantly after the plugin’s release, but the plugin had fallen behind. - Earlier limitations included: - Only horizontal and vertical padding - Auto layout support limited to “min” and “fixed” - The Creator Fund gave Bernardo the resources to update the plugin without introducing a paid tier. - The grant also enabled him to add support for Figma’s Dev Mode. - He completed the major update in roughly a month and launched it during Config 2023. - Bernardo describes the fund committee as supportive and encouraging toward creators with ambitious ideas. The post’s supplied excerpt ends during Bernardo’s account of launching the update at Config 2023, before the other Creator Fund projects are presented.

Figma Persona 2022: What’s your creative collaboration style? | Figma Blog (opens in new tab)

Figma Persona 2022 presents a playful quiz designed to help people reflect on their creative collaboration and working styles. Based on 21 questions across problem-solving, workspace habits, and collaboration, the quiz assigns one of eight Figma-inspired personas. The article encourages teams to use these insights to improve communication, planning, and creative collaboration. ## The Figma Persona Quiz - The quiz is intended as an end-of-year reflection and goal-setting exercise. - It evaluates three areas: - How someone generates ideas and solves problems - How they organize their workspace and use tools - How they collaborate with others - Results fall into eight personas: - Lone Ascender - Canvas Captain - Direct Mobilizer - Artful Detacher - Bounding Boxer - Branch Merger - Vector Networker - Bézier Curve Baller ## Organized Individualists - Organized individualists prefer: - Tidy processes and clear deliverables - Defined milestones and structured workflows - Working independently before regrouping - Async updates and bug bashes - They are most effective when given space to develop ideas and solutions. - Collaborators should provide clear expectations, async pre-work, and precise requests. ## The Lone Ascender - The Lone Ascender is described as an organized, analytical individualist. - This persona excels at: - Solving complex problems - Building tactical, practical, systems-driven solutions - Applying consistent processes - Scaling difficult or complicated work - Lone Ascenders favor pragmatism and systematic thinking over idealism. - They value occasional collaboration but may be protective of file organization and formatting. - Suggested tools and habits include: - Memorizing shortcut keys and quick actions - Using FigJam templates to extend structured workflows - Applying strong organizational systems within Figma Overall, Figma frames the personas as a lighthearted way to recognize different working preferences. The practical recommendation is to use the results as a conversation starter, giving teammates the structure, independence, or collaboration style that helps them do their best work.

A conversation with Figma's accessibility team | Figma Blog (opens in new tab)

Figma’s accessibility team describes how open beta testing and user feedback shaped screen reader support for prototypes. They learned that accessibility must account for different assistive technologies, varied user needs, and interaction between visual and nonvisual experiences. The team sees the current release as an important step, but plans further improvements to generated HTML and accessibility evaluation tools. ## Lessons from the Open Beta - Testing with real users revealed that support working well in Mac VoiceOver did not guarantee compatibility with JAWS and other screen readers. - Figma began testing major screen reader technologies earlier in development. - The team recognized that screen readers complement visual work rather than serving only users who cannot see. - Low-vision users may use visual and audio information together for additional context. ## Design Decisions for Screen Reader Support - Added positioning information to the accessibility tree so sighted screen reader users can understand the cursor’s location on the canvas. - Made “On hover” interactions activate when clickable elements receive focus. - Enabled scrollable areas to follow the screen reader cursor, similar to native HTML behavior. - Adjusted auto-hiding toolbars so focused controls remain visible. - Added shortcuts to open prototype mode: - Mac: `Option + Command + Return` - PC: `Alt + Ctrl + Enter` - Added a persistent screen reader support toggle and more guidance through Figma Community. ## Feedback from Accessibility Partners - Figma works with Fable to test product flows with people who use assistive technologies. - Partner feedback highlighted the need to communicate accessibility controls more clearly. - Accessibility navigation shortcuts are being added to the keyboard shortcuts panel, along with improvements to the panel itself. - For FigJam, screen readers now receive information about the number of children or siblings associated with each item. - Fable’s input helps Figma support different screen reader software and users with varying levels of expertise. ## Future Accessibility Improvements - Figma plans to make content available to screen reader users by default. - The team wants to give designers greater control over the HTML generated from their designs. - Longer term, Figma hopes to provide tools that help designers assess accessibility without requiring deep screen reader knowledge. Figma’s experience shows that accessibility improves through ongoing testing, direct collaboration with assistive-technology users, and removing assumptions about how people work. The current screen reader support is presented as a foundation for continued product and design improvements.

A step forward in our accessibility efforts | Figma Blog (opens in new tab)

Figma argues that making design accessible requires enabling people of all abilities to participate throughout the design process. Its new prototype screen reader beta addresses a major gap for blind and low-vision users by making prototype content readable and navigable with assistive technology. The company presents this as an important step, while acknowledging that substantial accessibility work remains. ## Prototype Screen Reader Beta - Previously, screen readers encountered Figma prototypes as an essentially empty canvas, making text, images, and interactive content inaccessible. - The beta supports: - Text notes - Image alt text - Navigation through prototypes - Buttons and keyboard actions such as tabbing - Because Figma designs are not built as HTML, the company created an HTML representation of prototypes specifically for screen readers. - The beta was launched to gather feedback and improve the experience; it later became an open beta for everyone. ## Accessibility Work Underway - Figma has also introduced: - Dark mode and improved color-contrast compliance - Live captions for audio chat - A platform-wide accessibility assessment by Deque - Greater support for accessibility plugins, widgets, and community files - The company is developing reusable UI components and internal tools that encourage keyboard and screen reader compatibility. - Accessibility is being incorporated into team expectations, product development, and early user testing through alpha and beta programs. ## Remaining Challenges - Figma recognizes that more screen reader and general accessibility support is needed. - Planned capabilities include allowing users to: - Add alt text - Assign ARIA roles to components - Define prototype tab order - The company emphasizes that accessibility improvements should be developed collaboratively with the community. Figma’s recommendation in practice is to continue testing accessibility features with users who rely on assistive technology and to treat accessibility as an ongoing part of product design and engineering rather than a one-time update.

What’s new in Figma: August 2021 | Figma Blog (opens in new tab)

Figma’s August 2021 updates focus on faster workflows, more flexible customization, and easier design-system management. The company expanded its plugin ecosystem into FigJam, improved the Figma plugin API, and introduced tools for moving, swapping, and finding components. Smaller usability improvements also addressed common frustrations in both products. ## Plugins and Widgets for FigJam - FigJam gained support for: - **Plugins**, which automate tasks such as organizing sticky notes, customizing styles, and importing data. - **Widgets**, interactive canvas objects for polls, voting, games, notepads, and other collaborative activities. - Plugins are accessible to users on every plan. - Developers can create plugins with basic HTML and JavaScript, while widgets can be built with React. - Widgets were initially offered through a private beta. ## Expanded Figma Plugin API - Plugins can now write to prototypes, enabling developers to: - Automate prototype creation. - Modify interactions in bulk. - Improve prototyping workflows without manual repetition. - **Plugin parameters** let users provide input through quick actions, avoiding the need for custom plugin interfaces. - Plugin parameters were released in open beta, with examples available through Figma’s plugin samples. ## Easier Design-System Maintenance Three component-management improvements make it simpler to scale and reorganize design systems: - **Move components:** Published components and component sets can be moved between files without breaking instance links. - **Swap libraries:** Entire style and component libraries can be replaced at once instead of updated individually. - **Search components:** Pressing **Shift + I** opens a shortcut for quickly locating components. ## Usability Improvements - Transparent objects now automatically knock out shadows behind them, reducing the need for manual adjustments. - Holding **Shift** while using the pencil tool constrains lines to straight paths in both Figma and FigJam. - Additional bug fixes and improvements were documented in Figma’s release notes. Together, these updates make Figma and FigJam more extensible, collaborative, and efficient—particularly for teams managing large design systems or automating repetitive design and prototyping tasks.