techlist.io
KREN

Design To Code

31 posts

figma3 min readCurated summary

Schema 2025: Design Systems For A New Era | Figma Blog

Figma’s Schema 2025 announcements present design systems as living infrastructure for an AI-driven product development process. They are evolving beyond static rules into a shared language connecting design, code, people, and AI. The updates focus on scaling across brands, enabling flexibility without sacrificing consistency, and improving the connection between design intent and implementation. ## Design systems for the AI era - As product, design, and engineering roles increasingly overlap, more people and AI tools contribute to product development. - Design systems can provide the common language needed to maintain consistency across these contributors. - Figma aims to help teams preserve quality and design intent while allowing ideas to evolve across products and platforms. - The announced features emphasize: - Power balanced with flexibility - Better connections between design and code - Broader participation in the design process ## Extended collections for multi-brand systems - Traditional variables work well for straightforward theming but can be limiting for organizations with multiple products and distinct brands. - Extended collections allow teams to create a white-labeled version of a core design system. - Individual teams can add, publish, and reuse their own themes while remaining connected to the parent system. - Extensions automatically inherit updates such as new variables or color changes. - Explicitly overridden values remain customized, allowing local flexibility without losing synchronization. - Extended collections are expected to become available in November. ## Slots for flexible components - Conventional Figma components restrict how designers can modify instances. - For example, dropdown components traditionally required hidden list items or detaching the component to add new content. - Slots will allow designers to insert their own layers inside component instances without breaking the connection to the design system. - Component authors can specify which types of instances a slot accepts. - This improves usability while preserving design-system compliance. - Slots are available through an early-access program. ## Check designs for better token usage - Developers often need clarification about which exact design token corresponds to a raw value in a design. - The Check designs linter identifies elements that should align with the design system, including variables. - Figma’s custom model suggests the appropriate variable for each context. - Designers can review suggestions before applying them and then hand off more reliable designs to development. - Early access is available to organizations and Enterprise full-seat plans. Figma’s direction is to make design systems more adaptable and intelligent: centralized enough to preserve consistency, but flexible enough for multiple brands, contributors, and use cases. Teams should look toward systems that can actively guide design and implementation rather than merely document standards.

Read original(opens in new tab)
Design To CodeFigmaAIDesign Systems+1
figma3 min readCurated summary

Introducing our MCP server: Bringing Figma into your workflow | Figma Blog

Figma’s beta MCP server connects Figma to AI coding tools such as Cursor, Copilot in VS Code, Windsurf, and Claude Code. It gives LLMs richer design context than screenshots or API responses alone, helping them generate code that reflects a team’s design system, codebase patterns, and intended behavior. Figma argues that accurate design-to-code work requires a holistic understanding of both visual design and implementation context. ## Why Design Context Matters - LLMs can produce functional code without additional context, but it may not match a team’s: - Architecture and file structure - Framework and terminology - Existing components and workflows - Evolving codebase conventions - These team-specific patterns form a unique “fingerprint” that models cannot reliably infer from training data. - MCP provides a standardized way for applications such as Figma to supply targeted context to agentic AI tools. ## Translating Design Intent for LLMs - Human developers typically: - Zoom out to understand overall structure and layout - Examine screen sequences and application flows - Infer how designs should map to code files and components - Interpret placeholder content as real data or backend requirements - Move between high-level patterns and low-level implementation details - The Figma MCP server aims to give LLMs the same broad perspective. - Its tools expose different kinds of context, allowing users to control which information is included and avoid wasting context-window space. ## Pattern Metadata - Figma can provide references to specific: - Components - Variables and design tokens - Styles - Code files - This is especially useful when design and code are already aligned through a design system. - Code Connect can identify the exact code component associated with a Figma component, reducing unnecessary codebase searches and preventing duplicate implementations. - For design tokens, Figma can identify the precise variable used—even when several tokens share the same visual value. - If code syntax is defined for a variable, the MCP server can pass the exact implementation syntax to the LLM. - Supplying this metadata improves precision and reduces token usage. ## Screenshots - Screenshots supplement metadata when visual or interactive meaning is difficult to express structurally. - They can communicate: - Embedded or interactive content represented by imagery - Relationships between sections and nodes - Sequences of screens - Mobile and desktop layouts - Overall application flow - Screenshots are not intended as pixel-perfect specifications. - Figma emphasizes that generated code should reflect design intent rather than merely reproduce pixels. - Combining screenshots with Figma’s code-oriented outputs is more effective than relying on either alone. ## Interactivity and Behavior - Code examples and pseudocode can express behavior more effectively than raw design metadata. - They are useful for: - Stateful components - Encapsulated functionality - UI sequences and transitions - Differences between related states or screens - Pseudocode becomes more valuable when it incorporates codebase context, such as variable syntax and Code Connect component mappings. ## Beta Roadmap - The MCP server is an early beta release. - Figma plans to add remote server capabilities and deeper integrations with codebases. - The company is seeking feedback while continuing to expand the design-to-code workflow. Figma’s MCP server is most valuable when teams maintain strong alignment between their design systems and codebases. Combining structured metadata, visual context, and behavioral examples gives AI coding agents a better foundation for producing implementation-ready code.

Read original(opens in new tab)
Design To CodeFigmaLarge Language ModelsAI Agents+3
figma2 min readCurated summary

Config 2025 Launches Deepen Figma's Design Capabilities As Its Platform Expands | Figma Blog

Figma’s Config 2025 announcements expand the platform from collaborative design into a broader product-development environment. New tools combine AI, code, visual design, websites, and marketing workflows, enabling teams to move from ideas to production within Figma. The company’s conclusion is that design and AI can help more people contribute throughout the development lifecycle. ## New Products - **Figma Make** turns written prompts or existing designs into working prototypes and applications. - **Figma Sites** lets designers build and publish dynamic websites with customizable interactions, code, and AI. - **Figma Draw** adds advanced vector editing and illustration tools to Figma Design. - **Figma Buzz** helps brand and marketing teams produce visual assets at scale while preserving brand consistency, with integrated AI features. ## Expanded AI Capabilities - New image-generation and image-editing tools support faster visual exploration. - Contextual auto-suggestions provide workflow guidance and help users work more efficiently. - FigJam receives additional AI features for brainstorming and collaboration. - Together with Figma Make, these tools are intended to make ideas easier to visualize and turn into functional outputs. ## Responsive Design and Developer Handoff - **Grid** introduces responsive layouts that adapt across screen sizes. - Grid can generate CSS code in Dev Mode, improving communication between designers and developers. - The feature supports Figma’s broader effort to connect design work more directly with implementation. ## Figma’s Expanding Platform - The new offerings join Figma Design, FigJam, Dev Mode, and Figma Slides. - About two-thirds of monthly active users in Q4 2024 worked outside traditional design roles, including roughly 30% who identified as developers. - The announcements reflect Figma’s shift from a design tool toward an integrated platform for ideation, design, development, publishing, and marketing. ## Global Growth - Figma announced full localization for Brazil, including Portuguese translation, culturally adapted interfaces, and dedicated language support. - Brazilian support joins existing Japanese, Spanish, and Korean localization. - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024, while more than half of its 2024 revenue came from non-U.S. markets. - The company now employs more than 1,600 people worldwide. The new products and features will roll out over the following weeks. Overall, Figma is positioning itself as a unified environment where designers, developers, marketers, and other collaborators can take products from early concepts through launch.

Read original(opens in new tab)
Design To CodeFigmaPrototypingGenerative AI+4
figma3 min readCurated summary

Figma Launches Brazilian Portuguese Localization | Figma Blog

Figma is launching a full Brazilian Portuguese localization on May 7, expanding its global reach and reducing language barriers for Brazilian users. The release includes translated interfaces, cultural adaptations, and Portuguese-language support. It follows Figma’s growing adoption in Brazil, where millions of files are created annually, with Latin American Spanish planned for later this year. ## Brazilian Market Expansion - Brazilian Portuguese is Figma’s fourth localized product language, after Japanese, Spanish, and Korean. - Brazil has a substantial Figma user base, including enterprises such as iFood, Itaú Unibanco, Nubank, Mercado Libre, TOTVS, and BTG Pactual. - More than one-third of Brazil’s Ibovespa-listed companies use Figma. - Nearly 5.5 million Figma files were created in Brazil over the past year, with more than 85,000 edited daily. - The São Paulo Friends of Figma community has nearly 1,000 active members. ## Localization and Accessibility - The localization provides: - A complete Brazilian Portuguese product translation - Culturally adapted interfaces - Dedicated support for Portuguese-speaking users - Figma says the goal is to make its tools feel more native and intuitive while encouraging broader collaboration among designers, developers, and other contributors. - Customers such as Itaú Unibanco and Mercado Libre expect the change to reduce friction and make Figma more accessible to Brazilian teams. ## Figma’s Global User Base - Approximately 85% of Figma’s monthly active users were outside the United States in Q4 2024. - More than half of the company’s 2024 revenue came from non-U.S. markets. - About two-thirds of monthly active users work outside traditional design roles, including roughly 30% who identify as developers. ## Expanding Product Ecosystem Figma’s localization arrives as the company expands its tools across the full product development lifecycle: - **Figma Design:** Digital product exploration, iteration, and prototyping. - **FigJam:** Collaborative whiteboarding, brainstorming, and meetings. - **Dev Mode:** Design-to-code handoff and developer workflows. - **Figma Slides:** Collaborative creation of interactive presentations. ## New Products and Features Announced updates at the Config conference include: - **Figma Make:** An AI prompt-to-code tool for creating prototypes and applications from descriptions or existing designs. - **Figma Sites:** Tools for designing and publishing dynamic, highly customizable websites. - **Figma Draw:** Enhanced vector editing and illustration capabilities. - **Figma Buzz:** Brand and marketing asset creation at scale, with AI support and brand-consistency controls. - **Enhanced AI features:** Image generation and editing, contextual workflow suggestions, and new FigJam capabilities. - **Grid:** Responsive layouts that can generate CSS code in Dev Mode. These products and features are scheduled to begin rolling out in the weeks following the announcement. Figma also plans to launch Latin American Spanish localization later in the year. Figma’s Brazilian Portuguese release is both a response to strong local demand and part of its broader strategy to make collaborative design and development accessible to a global audience.

Read original(opens in new tab)
Design To CodeFigmaPrototypingGenerative AI+3
figma2 min readCurated summary

Figma Localizes Product and Support for Korean Market | Figma Blog

Figma is launching an open beta of its fully localized Korean product and support experience on April 16. The rollout responds to strong adoption in South Korea and aims to remove language barriers across design, development, and collaboration. It is Figma’s third product localization, following Japanese and Spanish, with more languages expected this year. ## Korean Market Expansion - The localization includes: - A complete Korean product translation - Culturally adapted user interfaces - Dedicated Korean-language customer support - South Korea already has a significant Figma user base: - Nearly one-third of KOSPI 200 companies use Figma. - More than four million files were created in the country over the past year. - More than 75,000 files are edited daily. - The Seoul Friends of Figma community has over 1,000 active members. - Customers include Gangnam Unni, Daangn, KakaoBank, and Woowa Brothers. ## Benefits for Customers - KakaoBank reports a 30% increase in employee productivity attributed to Figma. - Its design team expects full Korean support to speed up critical projects by eliminating the need to work across two languages. - Woowa Brothers says Korean-language access will lower barriers and bring more people into the product development process. - Figma emphasizes that localization benefits both designers and non-designers, including developers. ## Supporting the Full Product Development Process Figma’s localization arrives alongside an expanding product ecosystem: - **FigJam**, launched in 2021, supports brainstorming, meetings, and collaborative work. - **Dev Mode**, launched in 2023, helps teams turn designs into coded products. - **Figma Slides**, launched in 2024, brings Figma’s design and collaboration features to presentations. - New AI-powered features help users develop and refine ideas. ## Global Context and Rollout - About 85% of Figma’s monthly active users are outside the United States. - Non-U.S. markets generated approximately 50% of revenue at the end of 2024. - Nearly two-thirds of users work outside traditional design roles, and about 30% identify as developers. - The Korean version will roll out gradually in open beta beginning April 16. - Figma will also showcase new products and features at Config in San Francisco on May 6–8 and London on May 14. Figma’s Korean localization is intended to make collaborative product development faster and more inclusive by allowing teams to work entirely in their native language.

Read original(opens in new tab)
Design To CodeFigmaUser ExperienceFigjam+4
figma3 min readCurated summary

How Crunchyroll Clarified Confusing Workflows with Dev Mode | Figma Blog

Crunchyroll’s global scale—15 platforms, 12 languages, and many legacy workflows—makes consistent product design difficult. Its Universal Design System helps standardize experiences and improve delivery speed, but outdated processes and fragmented documentation created confusion. Moving handoff and implementation guidance into Dev Mode has made design-to-development collaboration faster, clearer, and easier to maintain. ## Crunchyroll’s Design Complexity - Crunchyroll serves around 15 million fans across: - Web and mobile applications - Smart TVs, game consoles, set-top boxes, and Roku - Nine living-room platforms - Supporting multiple languages and complex licensing requirements increases product complexity. - The company also extends beyond streaming through the Crunchyroll Store and Game Vault. - Its goal is to create a deeply relevant experience for anime fans rather than a generic service for everyone. ## Measuring Design Success - James Hsu defines successful design through two baseline criteria: - It looks good, using sound typography, grids, spacing, and visual hierarchy. - It works well, with clear content, thoughtful interactions, and no frustrating edge cases. - A design can be visually polished but still fail if users become trapped in confusing flows or loops. ## The Role of the Universal Design System - The design system promotes consistency across devices, reducing cognitive load caused by inconsistent fonts, grids, spacing, or responsive behavior. - Reusable components improve team efficiency, much like meal preparation: - Teams can build from existing solutions. - New components can be evaluated based on their cost and value. - Shared patterns speed up product delivery and help product teams validate ideas quickly. - Engineers also benefit from avoiding duplicated implementations, reflecting the “Don’t Repeat Yourself” principle. ## Adapting the Design System to Reality - Crunchyroll uses: - A foundational design layer - Separate component libraries for individual clients - The system still contains many one-off components, numerous variants, and an underdeveloped type system. - The team rejects treating the existing system as an unchangeable process. - The design system should serve current product needs, not constrain teams because of decisions made by previous teams. - Different designers are at different stages of understanding and adopting the system, making education and early investment important. ## Problems with the Previous Workflow - Design and code parity was managed through complicated Jira workflow triggers. - Component changes generated automated alerts, but time-zone dependencies and convoluted processes meant stakeholders often lacked the latest information. - Documentation was split across separate Zeplin projects for iOS, Android, tvOS, and Android TV. - Finding the right flow required invitations, navigating branches, and comparing against outdated designs. - Searching for a specific payment signup flow could take several minutes per artboard, making implementation research slow and frustrating. - Handoff statuses were ambiguous: - Designers submitted work for review. - Reviewers moved it back to “in progress.” - Exported designs were not necessarily final. - Engineers had to rely on labels such as “ready for development.” ## How Dev Mode Improved Handoff - Dev Mode gives engineers direct access to design values and helps them identify the correct component. - Designers now create a dedicated, organized page when work is ready for development. - The page is labeled “ready for development,” and engineers receive a link directly to it. - Engineers no longer need to sift through ideation or outdated explorations. - Faster loading and parsing removed a major pain point from the previous tool. - The team supported adoption through documentation and onboarding workshops for developers. - Crunchyroll is also interested in integrating Code Connect to make its existing design-system code more accessible. Crunchyroll’s experience suggests that a design system is most effective when paired with clear ownership, focused documentation, and a streamlined handoff process. Dev Mode helped replace fragmented legacy workflows with a faster path from approved design to implementation.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsUser Experience+4
figma3 min readCurated summary

Why Are We So Afraid Of Code As A Commodity? | Figma Blog

AI may commoditize code production, including language translation and design-to-code workflows, but that does not eliminate the need for engineers. The article argues that engineering’s lasting value lies in identifying the right problems, understanding users and constraints, and designing elegant, maintainable systems. AI should therefore be viewed less as a threat and more as a tool that expands creativity and shifts engineers toward higher-level decision-making. ## Code Generation Is Not the Same as Engineering - AI can increasingly: - Translate between programming languages, such as Python and C++. - Generate code more efficiently. - Convert designs into implementations using frameworks such as React, TypeScript, Kotlin, and Jetpack. - Design-to-code is comparable to translating between programming languages because modern design tools already represent designs in structured, code-like forms. - Producing code is only one part of engineering. Engineers must also: - Decide which problems are worth solving. - Choose appropriate solutions. - Create abstractions for reasoning about complex systems. - Balance correctness, simplicity, context, and constraints. - Framework-specific expertise becomes less valuable over time than first-principles reasoning about the common ideas underlying different platforms. ## The Art and Creativity of Engineering - AI is expected to automate rote work, potentially freeing engineers to focus on more creative activities. - There are often many viable ways to build a system; AI may expose additional approaches that engineers would not have considered. - Engineers remain responsible for evaluating tradeoffs among those options. - Technical implementation is presented as a creative discipline in which constraints can inspire better solutions and product decisions. ## Embracing Shifts in Engineering Roles - Engineering work begins before coding: - Teams discuss user needs. - They triage problems. - They align on what to build and how to approach it. - As AI handles more low-level implementation, coding will represent a smaller portion of an engineer’s responsibilities. - Engineers will spend more time prioritizing, aligning teams, interpreting context, and making product and system-level decisions. - The abstraction level of software development is rising as AI takes responsibility for increasingly lower-level parts of the technology stack. ## What AI Will Not Commoditize - AI still struggles to fully understand: - What users actually need. - The context surrounding a problem. - Conflicting constraints and product priorities. - How to compose intuitive, maintainable systems. - Engineers will continue to add value by reasoning from first principles and solving technical challenges from the ground up. - The central question is not whether AI automates design-to-code, but how engineers use that automation to work faster and explore better solutions. The practical recommendation is to embrace AI for repetitive implementation work while developing the higher-level skills that remain difficult to automate: problem selection, user understanding, system design, tradeoff analysis, and creative technical reasoning.

Read original(opens in new tab)
Design To CodeGenerative AIReactTypeScript+2
figma2 min readCurated summary

Unlocking the Power of Code Connect | Figma Blog

Code Connect helps design systems bridge the gap between design and engineering by making implementation guidance and production code available directly in Figma’s Dev Mode. Leaders from Bumble, GitHub, and HP argue that successful adoption depends on creating shared terminology, meeting developers in their existing workflows, and introducing the tool incrementally. The broader conclusion is that Code Connect is a practical first step toward tighter, more consistent design-to-code collaboration. ## Establish a shared language - Designers and developers often use different naming conventions, component properties, and expectations. - Design systems can serve as a “third language” by defining shared terms, patterns, and components. - Documentation and design decisions must be easy to discover and implement, not merely documented somewhere. ## Bring design guidance into developer workflows - Teams often struggle to identify a single source of truth, leading to inconsistent implementations and duplicated code. - Designers may rely on design documentation while engineers consult separate technical sources. - Code Connect surfaces design-system documentation and implementation details directly in Dev Mode, reducing the need for developers to switch to external websites or tools. - This helps teams reuse established patterns instead of repeatedly creating custom solutions. ## Start small to encourage adoption - Design systems cannot assume that people will adopt them simply because they exist; reducing friction is essential. - Code Connect lets developers inspect how a design has been implemented without leaving their existing workflow. - Teams should begin with small, high-impact components such as toggles. - Mapping a few components first makes it easier to learn the process, demonstrate value, and expand gradually. - HP’s Gilson Hoffmeister describes Code Connect as a first step toward broader design-system improvements. ## Value both disciplines’ expertise - Effective design-to-code collaboration requires recognizing that designers and developers contribute different forms of expertise. - Code Connect is intended to connect those perspectives by delivering design-system code into Dev Mode. - Better alignment can improve consistency, speed, and the quality of handoff without requiring either discipline to abandon its established practices. Teams should begin with a small set of frequently used components, establish shared terminology and ownership, and use Code Connect to make authoritative implementation guidance available where developers already work.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsDev Mode+2
figma2 min readCurated summary

Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog

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.

Read original(opens in new tab)
Design To CodeFigmaReactHTML+3
figma2 min readCurated summary

Join Us for Framework by Figma: Our Global Design Systems Event | Figma Blog

Figma announced Framework, a global design systems event focused on new tools, best practices, and the future of design systems. The event aims to help teams manage increasingly complex systems while improving collaboration between designers and engineers. It also highlights Figma’s broader effort to connect design systems more closely with code and organizational adoption. ## Event Focus and Agenda - Framework was scheduled as a half-day virtual event on April 16, 2024. - The program included: - Deep dives into new design system features - Best practices from companies such as Verizon - Product sessions about Figma’s future direction - A design-to-code roundtable with Bumble, GitHub, and Hewlett Packard - Expert Q&A sessions - The article also references features announced at Framework, including Code Connect, typography and gradient variables, and the Library Analytics API. ## Building More Adaptable Design Systems - Design systems have evolved from basic style guides into foundations for product design and development. - Figma acknowledges that implementing and maintaining them can be complex. - Its approach aims to support both structured workflows and more flexible, freeform design. - Product sessions were intended to cover how teams can structure, maintain, and increase adoption of their systems. ## Connecting Designers and Engineers - A central goal was to bring design systems practitioners from design and engineering together. - Sessions addressed both design principles and technical implementation. - Figma previewed capabilities intended to reduce the gap between design and development. - The event emphasized cross-functional collaboration as essential to successful design systems. ## Global Design Systems Community - Framework was presented as a global community event, with virtual programming for broad access. - Additional events were planned for Asia on April 18 and Tokyo on April 23, alongside future meetups in London and other cities. - Participants could attend the main-stage announcements and sessions online regardless of location. Figma positioned Framework as both a showcase of new capabilities and an opportunity to learn from the teams shaping modern design systems. Its practical recommendation was to participate in the event, explore the new design-to-code and analytics tools, and apply the shared practices to improve system adoption and collaboration.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsAccessibility+3
figma3 min readCurated summary

Everything You Need to Know About Dev Mode | Figma Blog

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsReact+3
figma2 min readCurated summary

Three Creator Fund projects to know and love | Figma Blog

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.

Read original(opens in new tab)
Design To CodeFigmaHTMLFigma Plugins+3
figma2 min readCurated summary

What Codegen Is (Actually) Good For | Figma | Figma Blog

Code generation is most useful as an augmentation to the design-to-development process, not as a replacement for developers. Figma found that fully automated design-to-code output often fails because teams use different frameworks, codebases, and patterns. Instead, codegen works best when it provides context, suggestions, and a useful starting point that developers can refine themselves. ## Codegen’s Broad Ecosystem - Codegen automatically produces code from rules or specifications. - It ranges from: - IDE completion tools such as Microsoft IntelliSense - Reusable templates and snippets - Visual programming and no-code platforms such as Bubble - AI assistants such as GitHub Copilot and Replit Ghostwriter - AI codegen adoption is high: 82% of developers surveyed by Stack Overflow in 2023 said they already write code with AI tools. - Trust remains low, however; fewer than 3% reported highly trusting the accuracy of these tools. ## Why Fully Automated Design-to-Code Falls Short - Figma initially envisioned Dev Mode as a way to automate design-to-code conversion. - Early results were promising, but developers often found the generated code impractical or not useful. - Producing code that fits a wide range of frameworks, architectures, and team conventions is difficult. - The better goal is “intelligence amplification”: technology should extend a developer’s capabilities while keeping the developer in control. ## From 0 to 0.5 - Codegen is particularly effective at helping developers move from a blank screen to a partial implementation. - In products with established design systems and component libraries, it can: - Suggest the appropriate component - Surface component names and property values - Reduce guesswork during design handoff - Rather than generating a complete solution, codegen helps developers reach a useful starting point faster. ## Applying Codegen to Existing Design Systems - Codegen delivers the most value when customized for a specific team, company, and workflow. - If a design system and component library already exist in Figma, teams may not need a separate automated design-to-code application. - More useful alternatives include: - Referencing design tokens and variables - Viewing component documentation - Building a Figma codegen plugin - Generating custom code snippets - These tools help developers understand a design quickly while allowing them to write code that matches their own codebase. The practical recommendation is to use codegen as a guided assistant: provide suggestions, reusable patterns, and context, but leave architectural decisions and final implementation to developers.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsComponent Library+4
figma3 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.

Read original(opens in new tab)
Design To CodeFigmaDesign SystemsPrototyping+4
figma2 min readCurated summary

Introducing: Figma to React | Figma Blog

Figma introduced an open-source Figma-to-React converter that uses the Figma API to turn designs into React components. The project aims to keep visual design in Figma while preserving application functionality in separate code, allowing designers to update interfaces without overwriting custom logic. It also seeks to make functional code reusable across multiple designs, much like reusable React components. ## Motivation and Goals - The converter builds on growing interest in automatically transforming Figma documents into React code. - Figma identified two main objectives: - Keep component design primarily in Figma so design updates can be synchronized to a website or app. - Separate generated visual code from custom functional code, preventing design updates from overwriting application behavior. - Existing functional code should be attachable to new designs, enabling reuse across different UI layouts. - Figma open-sourced the implementation in its `figma-api-demo` GitHub repository. ## From Figma to CSS - The first technical challenge is accurately reproducing the appearance of Figma designs in React components. - The example used is a sortable list interface with multiple list items, icons, and a dark visual style. - The converter must translate Figma’s visual properties into CSS and React structure. - The article notes that there are multiple possible strategies for reproducing a design, setting up a discussion of the implementation choices that follow.

Read original(opens in new tab)
Design To CodeReactJavaScriptCSS+2