Figma

532 posts

figma2 min readCurated summary

5 Design Skills To Sharpen in the AI Era | Figma Blog

AI is changing product creation by accelerating experimentation and expanding who can participate in design. Figma argues that designers should strengthen adaptable, technology-oriented skills rather than rely only on traditional craft. The first priority is becoming fluent with AI tools and learning to prompt them effectively, while maintaining human judgment and design fundamentals. ## AI Fluency and Prompting - AI skills are becoming essential for designers and increasingly important in non-design roles such as product management, development, and marketing. - More than half of designers and hiring managers consider AI design capabilities—such as rapid prototyping and “vibe coding”—important hiring skills. - Among designers who adopted AI during the past year: - 91% say it helps them create better designs. - 89% say it helps them work faster. - AI can support many activities, including: - Editing images directly within a workflow. - Building prototypes instead of writing traditional product requirements documents. - Testing assumptions and creating tangible artifacts for team alignment. ## Writing Better Prompts - Clear, structured prompts produce more reliable AI-generated results. - Figma recommends organizing prompts around: - The task - Context - Required elements - Behavior - Constraints - Prompting is presented as a repeatable design practice, not merely a way to get a one-off output. - Strong prompts help turn AI into a consistent design partner rather than an unpredictable experimentation tool. ## Broader Changes to Design Work - AI is lowering barriers to participation and blurring boundaries between product roles. - Designers are increasingly expected to work across disciplines and use AI to extend their capabilities. - Prototyping is becoming a faster way to communicate ideas, validate assumptions, and build momentum than relying solely on written documentation. Designers should build practical fluency with AI tools, practice structured prompting, and use prototypes to make ideas concrete—while applying their own judgment to guide and evaluate the results.

Read original(opens in new tab)
figma2 min readCurated summary

How to Supercharge your Design System with Slots | Figma Blog

Slots let designers customize components without detaching them from a design system. By allowing content to be inserted into stable structures—much like components work in code—slots reduce variant sprawl, preserve consistency, and improve design-to-development handoff. Figma recommends starting with high-traffic components and using default content strategically to balance guidance with flexibility. ## Why Slots Matter - Growing design systems often become restrictive, leading teams to: - Create excessive variants - Expand component libraries - Detach instances - Develop workarounds outside the system - Slots allow designers to change content while preserving a component’s underlying structure. - The approach mirrors code-based composition, where developers inject dynamic content into predictable layouts. - Benefits include: - **Design system managers:** fewer variants and less maintenance - **Designers:** more freedom within the system - **Developers:** structures that map more predictably to production - **Automation and AI:** clearer, more interpretable component structures - Figma introduced slots at Schema 2025 and made them available in open beta. ## Start with High-Use Components The greatest immediate value comes from components that teams frequently detach or customize. - Prioritize components that: - Appear often across screens - Are duplicated throughout the system - Have accumulated many variants - Support frequently changing content - Common starting points include: - Dialogs and modals - Menus and lists - Cards and panels - Slots are especially useful when the structure stays stable but the content varies. - Repeating elements such as menu items or list rows no longer require numerous hidden layers for every possible item count. - Designers can add only the items they need while keeping the component connected. - For configuration-heavy components like cards and modals, slots can replace combinations of properties and variants for titles, descriptions, media, and buttons. ## Use Pre-filled and Empty Slots Deliberately Slots can either contain default content or remain empty, depending on the intended workflow. - **Pre-filled slots:** - Provide context and demonstrate expected usage. - Reduce unnecessary work when content is usually predictable. - Are useful for persistent elements, such as an icon in the top-right corner of a card. - **Empty slots:** - Clearly signal that the designer must add content. - Work well when customization is required. - Resemble existing instance-swap patterns used in many design systems. - Authors should choose between the two based on whether content is optional, predictable, or required. Figma’s practical recommendation is to introduce slots where teams already experience the most friction, then use defaults and empty placeholders intentionally to guide customization without sacrificing flexibility.

Read original(opens in new tab)
figma3 min readCurated summary

Workflow Lab: AI Image Tooling and Interactive Prototyping in Figma | Figma Blog

Figma’s Workflow Lab demonstrates how teams can combine AI image editing, vector tools, and interactive prototyping to test conversion-focused product experiences quickly. For Trivet, a recipe app, the goal is to increase referral-program signups without disrupting the user journey. The team explores three approaches—an immersive modal, an integrated feed card, and a full-screen overlay—each using different visual strategies to balance attention and usability. ## The Signup Problem - Trivet’s referral banner is generating fewer clicks and signups than expected. - The team must determine whether the banner is: - Too subtle to attract attention - Too disruptive to support a smooth experience - The sprint tests three levels of visibility: - A modal - An in-feed card - A full-screen overlay - The team evaluates not only layout, but also tone, visual tension, and how attention affects conversion. ## Direction One: Use Visual Treatment to Spark Curiosity - A modal creates a more immersive interruption than an in-feed card. - Photography is used to support messaging about “unlocking” exclusive recipes. - Recipes are partially blurred so they appear visible but inaccessible. - Figma’s glass effect, refraction, and progressive blur create a frosted, layered surface. - The visual treatment makes the reward feel tangible while justifying the interruption. ## Direction Two: Add Personality to the Interface - The referral message is integrated directly into the feed to feel more supportive and less disruptive. - A hand-drawn cake illustration replaces photography because it requires less visual space. - Figma’s Remove background and Vectorize tools turn the raster sketch into an editable vector asset. - The designer: - Adjusts colors using brand variables found through inline fill search - Uses the Cut tool to refine edges while preserving paths - Rotates anchor points with bounding boxes to polish details - The result is a reusable, scalable illustration that adds texture and approachability to the card. ## Direction Three: Create a Full-Screen Overlay - A full-screen experience maximizes visibility and clearly signals priority. - The larger format requires photography strong enough to carry the entire interaction. - Instead of replacing an imperfect image, the designer adapts it to the layout. - The workflow uses precise image-editing tools such as Erase object to remove distracting elements, including a spoon. - This approach prioritizes visual impact, though it introduces the greatest interruption to the user experience. ## From Design Exploration to Prototyping - The workflow connects Figma Design, AI image tools, FigJam, and Figma Make. - Designers can move from visual experimentation to interactive prototypes without waiting for production assets. - A broader team—including product, content, growth, and engineering—can compare the concepts and evaluate which level of attention best supports signups. The practical recommendation is to test visual intensity against user experience rather than assuming maximum visibility will perform best. Figma’s integrated image and prototyping tools make it faster to create and compare multiple directions before committing to implementation.

Read original(opens in new tab)
figma2 min readCurated summary

Building Frontend UIs with Codex and Figma | Figma Blog

Figma’s Codex integration creates a two-way workflow between coding and visual design. Using the Figma MCP server, developers can turn Figma designs into implementation context for Codex, then bring running interfaces back into editable Figma files. The result is a faster cycle for building, comparing, refining, and collaborating on frontend experiences. ## Starting an Application from a Design - Developers can select frames or nodes in Figma Design, Figma Make, or FigJam. - They copy a direct selection link by right-clicking a frame and choosing **Copy as → Copy link to selection**. - The link is provided to Codex with an implementation prompt, such as using existing design-system components. - Codex calls the MCP server’s `get_design_context` tool to retrieve: - Layout information - Styles and visual properties - Component details - Other design context needed for code generation - The MCP server supports additional tools and prompts for extracting information from Figma files. ## Bringing Code Back to the Canvas After iterating on the implementation, developers can import the live interface into Figma rather than recreating it manually. - The application must be rendered locally or on a publicly accessible web server. - Codex uses the `generate_figma_design` tool to convert the running UI into editable Figma frames. - Codex guides users through: 1. Creating or selecting a Figma file 2. Choosing a workspace 3. Setting up the application for capture 4. Opening the application in a browser session - The capture toolbar supports: - **Entire screen:** Captures the currently displayed screen - **Select element:** Captures a specific UI component - **Open file:** Opens the resulting Figma design for inspection ## Iterating Between Code and Design Once the interface is in Figma, teams can use the canvas to explore and refine the product. - Add design-system components. - Convert styles, fonts, and colors into variables. - Adjust layouts and add annotations. - Design interactions, empty states, and alternative flows. - Collaborate on multiple visual directions. - Send the refined design back to Codex through the same MCP workflow. The article presents this round trip as a continuous loop: design informs code, code produces a working interface, and the interface returns to Figma for further exploration. This lets teams begin from either a design or an implementation while preserving context and reducing the friction between developers and designers.

Read original(opens in new tab)
figma2 min readCurated summary

The Future of Design Is Code and Canvas | Figma Blog

The post argues that the future of product creation combines code with visual design canvases rather than treating them as separate, linear stages. Figma’s integration with Claude Code lets developers send rendered browser work into Figma as editable layers, enabling teams to explore alternatives visually and move changes back into code. The broader goal is to help builders avoid tunnel vision and choose better solutions before committing to implementation. ## Code and Canvas as Complementary Tools - Code is powerful for building and expressing ideas, while the canvas is better for comparing and navigating many possibilities. - Figma supports: - Divergent exploration of multiple approaches - Side-by-side comparison of designs - Direct manipulation of visual details - Big-picture evaluation before implementation ## Claude Code to Figma - Users can install the Figma MCP and type “Send this to Figma” in Claude Code. - The browser’s rendered state is translated into fully editable Figma layers. - After refining the design in Figma, Figma MCP can transfer design changes back into the codebase. - This creates a bidirectional workflow between production code and visual design. ## Moving Beyond Linear Workflows - Traditional product development often followed a sequence: brainstorm, design, then code. - AI and connected tools allow work to begin in a terminal, prompt box, visual interface, or sketch and move between formats. - Teams can now reconsider direction during development instead of simply advancing the first workable concept. ## Design as the Main Differentiator - As AI makes it easier to generate almost any articulated possibility, the difficult work becomes identifying the best solution. - Design judgment, craft, and point of view remain essential. - Figma positions the canvas as a space for stepping back, examining alternatives, and escaping the momentum of building the first version. The practical recommendation is to combine code-driven speed with canvas-based exploration: use code to create, Figma to compare and refine, and MCP integrations to keep both workflows connected.

Read original(opens in new tab)
figma2 min readCurated summary

From Claude Code to Figma: Turning Production Code into Editable Figma Designs | Figma Blog

Claude Code to Figma lets users capture working interfaces from production, staging, or localhost and convert them into editable Figma frames. The workflow combines code’s speed for building functional prototypes with Figma’s strengths in collaboration, comparison, and exploration. Its central argument is that teams can move faster without stopping at the first working implementation. ## From Code to an Editable Canvas - Developers can capture real UI screens from Claude Code workflows. - Captured screens can be pasted into any Figma file as editable frames. - The workflow supports interfaces running in production, staging, or locally. - Multiple screens can be captured in one session, preserving flow sequence and context. ## Start Anywhere, Then Collaborate - Code-first exploration is fast but often isolated: one person manages the branch, server, and context. - Sharing screenshots, recordings, or local builds creates friction when feedback is needed. - Once imported into Figma, screens can be organized, duplicated, refined, annotated, and shared. - Teams can discuss and explore the interface without switching environments or modifying code for every idea. ## Build the Best Idea, Not Just the First One - AI makes it easier to produce an initial prototype quickly, shifting attention toward evaluating alternatives. - Figma Make supports a similar workflow by bringing generated prototypes onto the design canvas. - Claude Code to Figma extends this approach to code-created interfaces. - Both workflows aim to turn an initial tangible result into deeper design exploration. ## Explore Systems and Variations Visually - Side-by-side frames make patterns, inconsistencies, gaps, and trade-offs easier to identify. - Teams can duplicate frames, rearrange steps, and test structural changes without reimplementing code. - Keeping alternatives visible supports continued exploration, including previously rejected ideas. - Designers, engineers, and product managers can make decisions using the same high-fidelity artifact. - Shared context helps surface questions and resolve direction earlier. Claude Code to Figma is intended as a bridge between functional prototyping and collaborative design. Teams can use code to quickly discover what works, then move the result into Figma to compare options, gather feedback, and establish shared direction.

Read original(opens in new tab)
figma2 min readCurated summary

State of the Designer 2026: Designers Are Leaning Into the Messy Middle | Figma Blog

Designers are navigating rapid change by using AI as a complement to—not a replacement for—human craft. Figma’s 2026 survey of 906 designers finds that AI is helping many work faster, collaborate better, and improve quality, while strong craft remains central to satisfaction and business performance. The report’s overall conclusion is optimistic: designers are embracing uncertainty and turning new pressures into creative momentum. ## AI Improves Speed, Collaboration, and Quality - The survey was conducted by NewtonX across North America, APAC, Europe, LATAM, and the Middle East. - Respondents answered in English, Spanish, French, Italian, Portuguese, Japanese, and Korean. - 89% of designers say AI helps them work faster. - 80% say it improves collaboration. - 91% believe AI tools improve their designs, countering concerns that AI-generated work will reduce quality. - Designers who actively use AI are 25% more likely to report job satisfaction. - AI users are also more likely to say they drive business impact and contribute to company growth. - By automating or accelerating workflow tasks, AI gives designers more time for high-impact ideas. ## Craft Remains a Human Differentiator - As AI makes prototyping more accessible, craft becomes a key way for products to stand out. - Designers define craft in several ways: - Visual polish: 58% - Thoughtful problem-solving: 47% - Clear, intuitive UX: 36% - Emotion and delight: 35% - Consistency across products: 15% - Craft can mean technical skill, careful execution, intentional decisions, artistry, or solving difficult product problems. - Designers who associate craft with visible emotional and creative outcomes often receive more recognition than those whose craft involves less visible tactical work. ## Design Excellence Supports Morale and Growth - Designers are twice as likely to feel positive about their work when leaders prioritize design excellence. - Teams that value craft report stronger morale, faster business growth, and a clearer sense of momentum. - Leadership support, recognition, and opportunities for development help designers maintain quality while adapting to new tools. - The report links investment in craft with better outcomes for both designers and their organizations. Organizations should treat AI as a way to extend designers’ capabilities while continuing to invest in human judgment, creativity, quality, and recognition.

Read original(opens in new tab)
figma3 min readCurated summary

Why Demand for Designers Is on the Rise | Figma Blog

Companies are investing more in design, with 82% of leaders reporting that demand has either increased or remained steady. The post argues that AI is not reducing the need for designers; instead, it is increasing demand for people who can use AI tools, design AI products, and connect design with strategy and business growth. Fast-growing organizations are leading this hiring momentum, while employers increasingly favor experienced, AI-fluent candidates. ## Design hiring is increasing across industries - Nearly half of hiring managers say demand for designers has increased, and most of them report growth of at least 10%; more than a quarter report increases of 25% or more. - Technology companies lead hiring, but demand is also growing in sectors such as retail, publishing, aviation, and other non-tech industries. - Companies are hiring designers to improve digital experiences, strengthen online presence, and create new customer value. - Planned hiring varies by company growth: - 46% of fast-growing companies expect to increase hiring. - 40% of average-growth companies plan to do so. - 33% of slower-growth companies expect increased hiring. - High-growth companies view design as a way to test ideas earlier, move faster, differentiate products, and drive revenue. - Although only 20% of managers believe the overall hiring market is improving, 40% plan to add design headcount within six months. - Design job postings among Designer Fund portfolio companies reportedly rose about 60% in 2025 compared with 2024. ## AI is fueling demand for designers - Rapid advances in AI models and tools are creating demand for designers who can immediately work with evolving AI processes. - Employers want both: - Proficiency with AI tools in everyday design workflows. - Experience designing AI-powered products. - 73% of hiring managers report an increasing need for AI-tool proficiency. - 79% report an increasing need for knowledge of designing AI products. - AI fluency is increasingly treated as a hiring requirement rather than an optional advantage. - Companies are prioritizing candidates who combine technical ability, strategic thinking, experimentation, and approaches such as human-in-the-loop and human-augmented AI. ## Seniority and broader judgment matter - The article begins a discussion of companies prioritizing senior talent, particularly as teams face pressure to deliver quickly. - Hiring managers are looking for designers with strong skills, judgment, and experience—not only executional ability. - The combination of design expertise, strategic thinking, and AI capability is becoming increasingly valuable. Designers can improve their prospects by developing practical AI fluency alongside core design skills, learning how to design AI products, and demonstrating strategic judgment and business impact.

Read original(opens in new tab)
figma2 min readCurated summary

For the Love of Craft: Vectorize Images in Figma Design and Draw | Figma Blog

Vectorize is Figma’s new AI image-editing tool for converting raster images into editable vector artwork. It helps designers preserve the character of sketches, photos, and hand-drawn lettering while making them scalable and easy to refine directly in Figma Design or Figma Draw. The tool is intended to reduce tool switching and avoid recreating expressive source material from scratch. ## Converting Raster Drawings into Vectors - Users can drag an image into Figma and select **Vectorize** to convert it into an editable vector with one click. - Vector artwork can be adjusted in size, shape, composition, and individual details. - The **Recolor** control can simplify artwork into a more manageable set of colors and shapes. - Figma color variables can be applied to keep illustrations consistent across brands, themes, and collateral. - This workflow turns physical sketches or rasterized drawings into reusable, adaptable design assets. ## Editing Hand-Drawn Lettering - Photos, scans, calligraphy, and paper sketches can be transformed into editable logos or wordmarks. - After vectorization, designers can modify individual letters, curves, strokes, spacing, and anchor points. - Background removal and bounding boxes help isolate and reposition lettering elements. - The resulting artwork can be recolored, scaled, and incorporated into cover art, interfaces, or branding. - Hand-drawn lettering retains its original character while becoming flexible enough for further digital design work. Vectorize is best suited to designers who want to bring expressive physical or raster-based work into an editable Figma workflow without sacrificing its original personality.

Read original(opens in new tab)
figma2 min readCurated summary

Figma Achieves C5 Accreditation | Figma Blog

Figma has achieved C5 accreditation, Germany’s cloud security standard developed by the Federal Office for Information Security (BSI). The milestone strengthens Figma’s credibility with customers in Germany, Austria, and Switzerland by independently validating its security, availability, confidentiality, risk management, and operational transparency. It also supports organizations with strict regulatory and compliance requirements. ## C5 Accreditation and Cloud Security - C5 provides a recognized framework for evaluating cloud service security and reliability. - Independent accreditation confirms that Figma meets rigorous requirements for: - Information security - Risk management - Service availability - Confidentiality - Operational transparency - Figma is now listed in the BSI C5 register, allowing customers to review its security controls and operational practices more easily. ## Benefits for DACH Organizations - The accreditation gives organizations greater confidence when using Figma for cloud-based collaboration. - It is particularly relevant to customers in: - Government and the public sector - Financial services - Other highly regulated industries - Customers can more easily assess Figma against internal compliance, security, and assurance requirements. ## Continued Investment in the Region - Figma’s regional initiatives include: - Full German-language localization - European Union data storage options for enterprise customers - Expanded enterprise security and compliance capabilities - Nearly 90% of DAX 40 companies use Figma to design and build products collaboratively. Figma’s C5 accreditation reinforces its position as an enterprise-ready collaboration platform for organizations across the DACH region, especially those facing complex regulatory and security demands.

Read original(opens in new tab)
figma2 min readCurated summary

The New Business Case For Design Systems | Figma Blog

Design systems are no longer merely efficiency tools or static component libraries; they are strategic investments that can influence revenue, customer loyalty, global expansion, and product quality. Research from the Design Executive Council shows that organizations are increasingly measuring design-system value through customer and business outcomes, not just reduced rework or faster handoffs. The strongest business case connects design-system work to metrics executives already care about. ## Linking Design Systems to Customer Outcomes - Teams can measure design-system impact through adoption, retention, engagement, satisfaction, and support metrics. - Freshworks attributed its design system to: - A 28% reduction in customer service costs - Faster support-ticket resolution - SAP collects more than one million in-app user feedback data points to improve its design system. - Freshworks uses CSAT scores, A/B tests, and funnel diagnostics to identify onboarding friction and guide new components, patterns, and features. - These metrics help design teams demonstrate business value while creating a roadmap for improving customer experience and product “stickiness.” ## Scaling Company Values and Product Quality - Design systems can scale not only brand identity but also company principles and product standards. - Linear uses its design system to support a culture of craft and quality, which contributes to customer loyalty and net revenue retention. - The system is intentionally flexible and continuously updated rather than governed by rigid rules. - Its goal is to ensure that products feel thoughtfully crafted while allowing teams to adapt components as needed. ## Supporting Global Growth and Localization - Design systems help companies expand internationally while maintaining consistency, brand identity, and cultural relevance. - Hyundai Motor Group uses one system across more than 30 vehicle models and three brands—Hyundai, Kia, and Genesis—while preserving each brand’s distinct identity. - Grammarly built localization into its design-system strategy from the beginning by: - Employing in-house linguists - Accounting for cultural nuances - Treating right-to-left readability as a core design input - Distributed teams across North America, South Korea, and Poland use a shared foundation to handle different languages, hardware constraints, screen sizes, and cultural expectations. - Hyundai’s 42dot uses custom Figma plugins to test multilingual user experiences. The practical recommendation is to frame a design system around outcomes that business leaders already value—customer satisfaction, retention, revenue, global growth, and product quality. Productivity improvements remain useful, but the most persuasive evidence comes from showing how design-system decisions change customer and business performance.

Read original(opens in new tab)
figma2 min readCurated summary

Issue No.14: Software Is Culture | Figma Blog

Software increasingly shapes how people communicate, play, create, eat, and connect. Figma’s January 2026 newsletter argues that as AI evolves from tool to teammate, software will become more responsive to human needs—and its cultural influence will grow. The issue explores this idea through design, language, gaming, food, and physical fabrication. ## Design Is Culture - Familiar interactions such as pinch-to-zoom, infinite scroll, and tap-to-like were once novel inventions. - These interface patterns have had a major influence on how an entire generation thinks and feels. - The newsletter highlights 10 iconic interactions to examine their broader cultural impact. ## Language Is Culture - Social media and recommendation algorithms help new slang spread rapidly, including expressions such as “6-7,” “aura,” and “rizz.” - Linguist Adam Aleksic explains that algorithms influence not only how people speak, but also how they think and relate to one another. - “Algospeak” has become a measure of virality and a distinctive feature of online communication. ## Gaming Is Culture - Video games have grown from simple experiences like Pong into a $184 billion industry built around expansive worlds, characters, game modes, and side quests. - Despite this complexity, players often navigate games through a small set of controller inputs. - Epic Games UX designer Aashrey Sharma examines how these simple controls enable rich interactions and what they suggest about the future of interfaces. ## Food Is Culture - British Columbia’s small farms are under pressure from factory farming and rising costs, with farmers reportedly leaving the industry at an alarming rate. - Entrepreneur Aaron Veale used Figma Make to build a marketplace connecting local growers with restaurants. - By prompting the AI tool, he produced a working minimum viable product in less than three weeks, demonstrating how AI can help individuals address urgent community problems. ## Fabrication Is Culture - Designer Kelsey Fairhurst combines digital design with hands-on manufacturing to create “softline brutalist” stainless-steel flatware. - Her Forks Plus project grew through years of research and work between a Brooklyn studio and a Cleveland fabrication shop. - The story presents software and design tools as companions to physical making rather than replacements for it. The newsletter’s central recommendation is implicit: treat software as a cultural force, not merely a productivity tool. Designers and builders should consider how the interfaces and AI systems they create will shape behavior, language, creativity, and everyday life.

Read original(opens in new tab)
figma3 min readCurated summary

Meet the Maker: Kelsey Fairhurst’s Irresistibly Bold Flatware | Figma Blog

Kelsey Fairhurst turned a travel-fork idea into Forks Plus, a “softline brutalist” flatware brand combining sculptural forms, colorful handles, and stainless steel. The business grew through years of self-directed research, manufacturing experiments, and collaboration with specialized partners. Her process now blends hands-on fabrication with Figma-based design for marketing and digital brand materials. ## From a Travel Fork to Forks Plus - In 2019, Fairhurst designed a purple acrylic travel fork with a removable cover after realizing she needed one on a train ride. - The prototype sparked an interest in making physical objects and led her to develop stainless steel flatware. - Forks Plus features exaggerated hardware, sculptural silhouettes, and powder-coated handles in bright colors. - Fairhurst’s experience curating midcentury dishware through dishware.nyc influenced her attraction to bistro-style flatware. ## Learning to Manufacture at Small Scale - With only one flatware manufacturer remaining in the United States, Fairhurst had to develop a smaller-scale production process herself. - She spent roughly a year researching techniques and potential suppliers online, cold-emailing machinists, powder-coating facilities, and other manufacturers. - A connection with Cleveland machinist Garry Yarowski led to mentorship and a custom benchtop CNC machine. - Fairhurst learned G-code, the programming language used to control CNC machines and laser cutters. ## Improving the Production Process - Counterboring rivet holes proved especially difficult: - The carbide tools cost about $300 each. - Incorrect machine code or angles could shatter the tools. - The holes had to be drilled precisely 0.05 inches deep so the rivets sat flush. - After two and a half years of experimentation, the process improved from 46 minutes for two holes to under a minute. - Fairhurst can now counterbore approximately 250 handles per day. - Production includes laser cutting, deburring with a belt grinder, forming forks and spoons with a 20-ton hydraulic press, knife serration, powder-coating, polishing, and final assembly. - Some specialized steps are outsourced to regional partners, while finishing and assembly happen in her Brooklyn studio. - A fork now takes about 30 minutes to produce, compared with the much slower process during the brand’s early development. ## Designing the Brand in Figma - Fairhurst uses Figma to create Forks Plus’s website, email campaigns, and social media materials. - She values the program’s tactile, hands-on feel, which matches her approach to physical making. - Her partner, Bryant Wells, designed the flatware dies in 3D CAD and built the Forks Plus website. Overall, Forks Plus demonstrates how persistent experimentation, local manufacturing relationships, and digital design tools can help a designer build a specialized product business from the ground up.

Read original(opens in new tab)
figma3 min readCurated summary

Prototypes Are the New PRDs | Figma Blog

Prototypes are increasingly replacing traditional Product Requirements Documents because they communicate product intent more clearly than static text. Figma argues that interactive, high-fidelity prototypes help product managers explore uncertain problem spaces, generate alternatives, and build alignment earlier. Using Figma Make, PMs can turn vague ideas into tangible experiences that teams can critique and refine. ## Product Management Is Becoming More Prototype-Driven - PMs are increasingly prompting and prototyping alongside designers and engineers instead of relying primarily on documents for review. - Interactive prototypes show behavior and nuance that mocks, diagrams, slide decks, and written requirements often leave teams to imagine. - A working example can create momentum, expose assumptions, and make discussions more concrete. ## Exploration: Defining the Problem Space - Prototypes help teams investigate poorly understood problems before committing to a specific solution. - Figma PM Tara Nadella used Figma Make to explore “Check designs,” a design-system linter that identifies raw values and recommends variables. - By experimenting with rough flows and interactions, she clarified questions about: - Whether to use wraparound plugins - How the end-to-end experience should work - Which visual and interaction choices were intuitive - Prototyping helped her form an informed opinion before the team progressed too far with an early concept. ## Exploring Multiple Directions - Figma Make reduces the blank-canvas problem by quickly producing several approaches to evaluate. - Make kits ground generated prototypes in real product components, making them more realistic than generic AI mockups. - The Copy design feature converts Make previews into editable Figma Design layers, allowing teams to: - Create variations - Add visual refinement - Move designs back into Figma Make for continued prototyping - Sean Lee used Figma Make to test how Figma Slides might automatically apply brand colors based on a user’s prompt. - He remixed existing Slides templates to simulate automated color selection, helping the team demonstrate the idea rather than merely describe it. - AI image tools further speed up exploration by removing backgrounds, isolating objects, and reframing images directly on the canvas. ## Practical Guidance from Figma PMs - **Use real design systems:** Attach libraries and start from a base UI so prototypes reflect the actual product. - **Take breaks:** Returning to a prototype later can reveal inconsistencies and overlooked details. - **Use templates:** Make templates establish a polished baseline and provide controls over what teammates can modify, supporting consistent exploration and brand alignment. ## Validation - After generating ideas, teams still need to determine which concepts deserve investment. - Prototypes support this transition by helping secure stakeholder buy-in and gather user feedback. - Because users can react to an experience rather than an abstract description, prototypes can produce more meaningful validation and help confirm whether a direction is sound. The article’s central recommendation is to build early and use prototypes as living requirements. Teams should ground those prototypes in their real design systems, iterate collaboratively, and use them to replace assumptions with observable behavior.

Read original(opens in new tab)
tossOriginal article

Painting the Wheels of a Moving Train: (opens in new tab)

Toss Design System (TDS) underwent its first major color system overhaul in seven years to address deep-seated issues with perceptual inconsistency and fragmented cross-platform management. By transitioning to a perceptually uniform color space and an automated token pipeline, the team established a scalable infrastructure capable of supporting the brand's rapid expansion into global markets and diverse digital environments. ### Legacy Issues in Color Consistency * **Uneven luminosity across hues:** Colors sharing the same numerical value (e.g., Grey 100 and Blue 100) exhibited different perceptual brightness levels, leading to "patchy" layouts when used together. * **Discrepancies between Light and Dark modes:** Specific colors, such as Teal 50, appeared significantly more vibrant in dark mode than in light mode, forcing designers to manually customize colors for different themes. * **Accessibility hurdles:** Low-contrast colors often became invisible on low-resolution devices or virtual environments, failing to meet consistent accessibility standards. ### Technical Debt and Scaling Barriers * **Interconnected palettes:** Because the color scales were interdependent, modifying a single color required re-evaluating the entire palette across all hues and both light/dark modes. * **Fragmentation of truth:** Web, native apps, and design editors managed tokens independently, leading to "token drift" where certain colors existed on some platforms but not others. * **Business expansion pressure:** As Toss moved toward becoming a "super-app" and entering global markets, the manual process of maintaining design consistency became a bottleneck for development speed. ### Implementing Perceptually Uniform Color Spaces * **Adopting OKLCH:** Toss shifted from traditional HSL models to OKLCH to ensure that colors with the same lightness values are perceived as equally bright by the human eye. * **Automated color logic:** The team developed an automation logic that extracts accessible color combinations (backgrounds, text, and assets) for any input color, allowing third-party mini-apps to maintain brand identity without sacrificing accessibility. * **Chroma Clamping:** To ensure compatibility with standard RGB displays, the system utilizes chroma clamping to maintain intended hue and lightness even when hardware limitations arise. ### Refined Visual Correction and Contrast * **Solving the "Dark Yellow Problem":** Since mathematically consistent yellow often appears muddy or loses its "yellowness" at higher contrast levels, the team applied manual visual corrections to preserve the color's psychological impact. * **APCA-based Dark Mode optimization:** Utilizing the Advanced Perceptual Contrast Algorithm (APCA), the team increased contrast ratios in dark mode to compensate for human optical illusions and improve legibility at low screen brightness. ### Designer-Led Automation Pipeline * **Single Source of Truth:** By integrating Token Studio (Figma plugin) with GitHub, the team created a unified repository where design changes are synchronized across all platforms simultaneously. * **Automated deployment:** Designers can now commit changes and generate pull requests directly; pre-processing scripts then transform these tokens into platform-specific code for web, iOS, and Android without requiring manual developer intervention. The transition to a token-based, automated color system demonstrates that investing in foundational design infrastructure is essential for long-term scalability. For organizations managing complex, multi-platform products, adopting perceptually uniform color spaces like OKLCH can significantly reduce design debt and improve the efficiency of cross-functional teams.