techlist.io
KREN

Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528Design Systems246User Experience140Prototyping135AI110Figjam98Product Design76User Interface63Generative AI47Collaborative Design47Accessibility41React39+1265
figma3 min readCurated summary

24 Artifacts That Define Craft | Figma Blog

Figma’s “24 artifacts that define craft” presents objects chosen by designers and makers as examples of intentional making. The collection argues that craft is not limited to perfection or complexity; it comes from thoughtful decisions, practiced skill, meaningful constraints, and attention to both process and experience. Whether an artifact is durable, practical, playful, or fleeting, its quality reflects deliberate choices. ## Craft as Intentional Decision-Making - The artifacts come from *Practice*, a Figma book created by its Story Studio and Brand Studio teams and designed with Other Means and type designer Kia Tasbihgou. - Examples range from a vintage puzzle box and precision-mixed daiquiri to an AI poetry camera and a familiar spreadsheet. - Each object reveals its maker’s judgment: - What to refine or leave raw - When to continue experimenting or stop - How to balance durability, usefulness, and delight - The central idea is that great craft “doesn’t happen by accident.” ## Designing Experiences, Not Just Objects - Garden designer Piet Oudolf’s work demonstrates that craft can mean shaping an experience rather than producing a fixed visual artifact. - His freehand garden schematics use loose forms, color nodes, and plant abbreviations while reflecting deep knowledge of how plants interact. - Oudolf avoids renderings because they capture only one artificial moment, rather than the changing experience of being in the garden. - His work shows that expertise can support spontaneity and looseness instead of requiring rigid precision. ## Structure and Flexibility in Graphic Design - Ladislav Sutnar’s *Catalog Design Progress* revitalized industrial catalogs through a combination of strict typographic systems and adaptable layouts. - The catalog provided a consistent visual framework while allowing individual products to receive customized treatment. - Its design transformed an everyday commercial tool into both an organizational system and an example of visual art. - Craft emerges through the balance between standards and room for variation. ## Precision Under Limitation - A Russian Constructivist poster by the Stenberg Brothers illustrates how constraints can intensify craft. - Its sharp geometric stripes and repeated, photorealistic portraits create tension between contrasting visual languages. - Lithography required decisions to be made directly and intentionally, without endless digital-style revisions. - The poster suggests that simplicity is demanding because every compositional choice remains exposed. ## Doing More with Less - Playdate, the yellow handheld console by Panic with hardware by Teenage Engineering, embodies craft through limitation. - Its one-bit screen and small processor prevent technically elaborate graphics but encourage inventive game design. - Distinctive features—including the bright yellow body, limited “seasons” of games, and physical crank—make the constraints part of the product’s identity. - The console demonstrates that craft is about doing something exceptionally well, not adding more features. ## Making the Process Part of the Art - Wintergatan’s Marble Machine combines a music box with a Rube Goldberg-like mechanism. - Its elaborate, human-powered construction makes the act of producing music as engaging as the resulting sound. - The machine invites active participation from both performer and audience, contrasting with passive music consumption. - Its appeal comes from the visible relationship between mechanism, effort, and outcome. ## A Broad Definition of Craft - The selected artifacts span landscape design, publishing, posters, consumer electronics, and musical machines. - Together, they frame craft as a mindset rather than a particular medium or aesthetic. - Craft may appear as precision, improvisation, restraint, system-building, physical labor, or playful interaction. - The common thread is purposeful making: understanding materials and constraints well enough to create something with character and intent. The collection recommends looking beyond polished appearances and examining the decisions behind an artifact. Good craft comes from combining knowledge, discipline, and judgment with the courage to embrace limits and leave room for human experience.

Read original(opens in new tab)
AIProduct DesignTypographyGraphic Design+2
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)
FigmaPrototypingGenerative AICollaborative Design+3
figma2 min readCurated summary

Figma Buzz Is Where Design and Marketing Teams Co-create | Figma Blog

Figma Buzz is a new open-beta workspace designed to help brand designers and marketers create on-brand assets together. It addresses fragmented tools and workflows by combining Figma’s design precision with approachable editing and reusable templates. The product aims to speed up production while letting marketing teams create independently within brand guidelines. ## A Shared Space for Design and Marketing - Product launches require extensive marketing materials beyond the original design work. - Designers often need control and precision, while marketers need simple tools for adapting content quickly. - Figma Buzz brings both groups into one collaborative environment. - Designers can copy existing Figma designs into Buzz, build templates, or create assets directly with Figma Design functionality. - Marketers can customize materials without worrying about departing from brand standards. ## Types of Assets Figma Buzz supports a broad range of branded content, including: - Social media posts in multiple platform-specific sizes - Digital display and social advertisements - Flyers, email headers, and promotional announcements - Event invitations, schedules, and badges - Internal communications such as signage, infographics, and one-pagers - Personalized cards and other celebration materials ## Flexible Ways to Start Users can begin creating assets in several ways: - Choose from pre-made templates. - Start with a blank design. - Create images using OpenAI’s `gpt-image-1` or Gemini. - Copy and paste designs from Figma Design. - Use an intuitive inline toolbar for editing. The examples highlighted include Instagram feed and story ads, Pinterest and Twitter/X promotional posts, event invitations, and thank-you cards. Figma Buzz is intended to reduce repetitive executional work, allowing creative teams to focus more on brand strategy and larger ideas while giving marketers the tools to produce high-quality content quickly and consistently.

Read original(opens in new tab)
FigmaGenerative AIGeminiDesign Collaboration+2
figma2 min readCurated summary

Express Yourself with Figma Draw | Figma Blog

Figma Draw is a new workspace within Figma Design that combines streamlined vector editing with expressive illustration tools. It aims to help designers move between precise UI work and more creative, tactile design without switching applications or disrupting their workflow. The feature emphasizes faster iteration, improved control, and a workspace tailored to visual expression. ## A Workspace for Visual Expression - Figma Draw reorganizes Figma’s interface around illustration and vector design. - New expressive tools include: - Brushes and pencils - Dynamic strokes - Progressive blur - Texture and noise effects - Text on a path - The redesigned workspace includes: - **Layers panel:** Thumbnail previews for frames, groups, shapes, vectors, and images make assets easier to navigate. - **Toolbars:** Pen, brush, and pencil tools are more prominent, while specialized vector features are easier to access. - **Properties panel:** Larger previews, sliders, expanded stroke controls, and preselected fills, strokes, and effects reduce repetitive adjustments. ## Faster, More Precise Vector Editing - Quality-of-life improvements make it easier to: - Select vertices - Align and distribute objects - Tab between selected geometries - Close open paths - Update vector handles - Upgraded boolean and outline-stroke engines make combining and subtracting shapes more fluid. - Multiple node editing allows users to select and edit several vector nodes simultaneously. - Keyboard shortcuts support faster workflows: - **Enter** edits selected nodes together. - **Shift-click** adds nodes to a selection. - **Command-click** jumps into vector editing on another node. - The shape builder tool helps construct icons and logos from multiple shapes. - Lasso selection makes it easier to select irregular groups of objects or detailed regions of the canvas. ## Tools for Creative Experimentation - Figma Draw expands Figma beyond production-focused vector work into illustration and visual exploration. - Brushes can create more distinctive marks, while texture and noise effects add tactile qualities. - Progressive blur introduces depth and softness to designs. - The goal is to let designers create icons, illustrations, branding assets, social graphics, and other expressive work without relying on external tools or plugins. Figma Draw is positioned as a way to keep both precise and expressive design work inside one canvas. Designers who regularly switch between interface design, illustration, branding, and visual assets may benefit most from its unified workflow and expanded vector controls.

Read original(opens in new tab)
Graphic DesignFigma DesignIllustrationFigma Draw+2
figma3 min readCurated summary

How Headspace Built an AI Companion that Fosters Trust and Transparency | Figma Blog

Headspace built Ebb as an AI companion for reflection between therapy sessions—not as a replacement for human care. Because mental-health AI carries significant safety and trust risks, the team prioritized clinical grounding, transparency, user autonomy, and careful cross-functional design. Early alignment workshops, iterative prototyping, and explicit interface guidelines helped shape Ebb into a friendly but clearly non-human companion. ## Defining Ebb’s Role - Headspace created Ebb in response to growing use of general-purpose AI for emotional support. - The companion was intended to: - Support reflective practices between therapy sessions. - Help people who may be unable to access or afford therapy. - Complement, rather than replace, human care. - The team first clarified the complete user experience and business objectives through FigJam workshops. - This early alignment helped address internal concerns and ambiguity around using AI in mental health. ## Building a Non-Human, Approachable Identity - The team explored names including Odom, Ibo, and Scribe before choosing **Ebb**. - The name suggests the fluidity and changing nature of emotions. - Designers avoided a gendered human name to reduce stereotypes that associate caregiving with women. - Ebb was designed as a friendly, human-adjacent entity without a specific gender. - Brand, product, illustration, animation, and copy teams used FigJam “playgrounds” to explore how Ebb could look and sound. ## Iterative Collaboration and Prototyping - Headspace followed a “build-to-learn” approach, bringing brand and product teams together early. - The teams tested approximately six brand identities before selecting a direction. - Figma allowed designers to apply different visual treatments directly to product screens. - Sharing prototypes in one workspace kept teams connected and enabled rapid iteration. - The team deliberately stress-tested ideas before rejecting them. ## Designing for Trust and Safety - Ebb was trained with input from clinical psychologists, providing a strong scientific foundation. - Designers focused on reducing adoption barriers by helping users understand: - That Ebb is an AI system. - How it can support them. - How their information and conversations are handled. - The interface was designed to make users feel safe expressing themselves. - Users retain agency to exit and delete conversations at any time. - A central principle was that AI should never be invisible: members should always know whether they are interacting with AI or a human. - The team’s broader guidelines emphasized differentiating AI from human-delivered care, reinforcing privacy and safety, supporting member choice, and creating a reflective environment. Headspace’s approach suggests that mental-health AI should be designed transparently and collaboratively, with safety and user control treated as foundational product requirements rather than features added later.

Read original(opens in new tab)
FigmaAIUser ExperienceFigjam+2
figma2 min readCurated summary

How Polaroid Is Building its Next Era of Innovation | Figma Blog

Polaroid is reinventing its iconic instant-photography business for the digital era while preserving its creative heritage. The company uses Figma to unify design across its website, camera products, and mobile apps, enabling faster collaboration and more consistent user experiences. A centralized design system and more capable prototypes help the team validate ideas early and reduce costly development changes. ## Preserving Polaroid’s Creative Legacy - Polaroid became culturally significant through Edwin Land’s instant-camera innovations and its use by artists such as Andy Warhol, Ansel Adams, and David Hockney. - Digital photography threatened the company’s survival, leading to the closure of its last film factory in 2008. - The Impossible Project acquired the factory, recreated Polaroid film chemistry, and eventually obtained the Polaroid brand. - The modern company now combines instant cameras and film with photo printers, connected-camera apps, and other digital products. ## Building a Single Source of Truth - Before adopting Figma, designers worked in separate files and fragmented workflows. - The lack of shared components and a centralized design system caused duplication, slowed iteration, and limited the team to designing primarily for iOS. - Figma’s cloud-based collaboration gives designers and other departments shared visibility, supporting remote work and cross-functional discussion. - Design tokens and variables allow Polaroid to: - Support light and dark modes. - Adapt designs across iOS and Android. - Change default fonts by platform. - Match an app’s theme to a camera’s colorway. - Show users only the camera model they own during device setup. - Figma UI kits provide starting points, while plugins such as Autoflow help map user journeys. ## Using Prototypes to Validate Ideas Earlier - More powerful Figma prototypes let the team test realistic user flows before development. - Users can navigate freely and change settings, producing more natural feedback than earlier prototype methods. - User testing reveals actual behavior instead of relying on assumptions. - Early validation improves product quality, saves time, and prevents expensive revisions later. Polaroid’s experience suggests that a shared design system combined with realistic prototyping can help legacy brands modernize efficiently while maintaining a recognizable creative identity.

Read original(opens in new tab)
FigmaDesign SystemsUser ExperiencePrototyping+4
figma2 min readCurated summary

How Figma Helps You Learn Figma | Figma Blog

Figma’s Product Education team has built a learning ecosystem to help users move from beginner concepts to practical design skills. It combines written guides, videos, interactive files, community support, and a refreshed beginner course based on feedback from millions of learners. The central message is that consistent, hands-on practice—and not fear of mistakes—is the best way to become comfortable with Figma. ## An Evolving Educational Ecosystem - The Help Center provides feature documentation, tutorials, and troubleshooting guidance. - YouTube tutorials demonstrate concepts through practical examples. - Interactive playground files let learners experiment safely. - The new **Figma Design for beginners** course teaches users by helping them create a portfolio website. - Students and teachers may qualify for Figma’s Education plan, which provides Professional plan features for free. ## Improving the Beginner Course Through Feedback - Nearly three million people have watched Figma’s original beginner course since its launch in 2020. - Learner feedback highlighted the need for: - More hands-on practice - Clearer explanations of complex features - Real-world examples - Greater emphasis on free features - The updated course includes feature deep dives, guided creative exercises, professional tips, and a usable portfolio website template. ## Turning Knowledge into Skill Figma recommends continuing to learn through practical projects and community interaction after completing the course. - **Start small:** Recreate manageable elements such as interactive buttons or loading animations before attempting a full website. - **Practice often:** Set weekly learning goals and use tutorials to build consistency, confidence, and familiarity with shortcuts. - **Get inspired:** Browse and duplicate projects in the Figma Community to study how other designers work. - **Make mistakes:** Experiment freely, iterate, and use undo shortcuts such as `Cmd/Ctrl + Z`. - **Be kind to yourself:** Skill development takes time, so learners should celebrate incremental progress and accept trial and error. Figma’s recommendation is to begin with the updated **Figma Design for beginners** course, then reinforce the lessons through small, regular projects and community exploration.

Read original(opens in new tab)
FigmaPrototypingUser InterfaceInteraction Design+1
figma3 min readCurated summary

Figma's 2025 AI report: Perspectives From Designers and Developers | Figma Blog

Figma’s 2025 AI report, based on a survey of 2,500 users, shows that AI adoption is accelerating across product development. Agentic AI is growing especially quickly, while established practices such as prototyping, iteration, and collaboration remain essential. However, developers generally see greater quality benefits from AI than designers, and widespread adoption is still limited by concerns about reliability. ## Agentic AI Is Growing Fast - Text generation remains the most common AI product category. - Agentic AI is the fastest-growing category, with 51% of AI builders developing agents, up from 21% the previous year. - Agents perform multi-step tasks by interpreting inputs, reasoning, and taking action. - Building them requires decisions about: - When users should be asked for confirmation - How much information the system should reveal - Whether conversational interfaces or direct controls are more effective - Designers and developers need extensive testing and prototyping to make agent behavior intuitive and trustworthy. ## Human-Centered Best Practices Still Matter - 52% of AI builders say design is more important for AI products than for traditional products, while 95% consider it at least equally important. - Successful teams continue to rely on: - Rapid iteration - Prototyping - Exploring multiple technical and design approaches - Close collaboration between disciplines - 60% of successful AI teams explored multiple approaches, compared with 39% of unsuccessful teams. - AI product development differs from conventional software work because outputs and interactions can change unpredictably. - Human judgment remains critical for explaining AI behavior and keeping people involved in AI-assisted actions. ## Smaller Companies Are Investing More Aggressively - 61% of users at companies with 1–10 employees say AI is very or critically important to their market-share goals. - The number of small-company respondents calling AI essential to their products doubled from the previous year. - Smaller businesses may be moving faster because they have fewer organizational constraints and can experiment more easily. - They may also view AI as a way to accelerate growth and compete with larger companies. ## Developers and Designers Perceive AI Differently - Developers report higher satisfaction with AI tools: - 82% are satisfied with AI tools. - 68% say AI improves their work quality. - Designers report lower—but still substantial—levels: - 69% satisfaction. - 54% saying AI improves quality. - Developers use AI more directly in core responsibilities such as code generation; 59% do so, compared with 31% of designers using AI for core design work such as asset generation. - 68% of developers use prompts to generate code, and 82% are satisfied with the results. - The gap suggests that AI currently fits more naturally into developers’ daily workflows, while designers are still evaluating where it provides meaningful value. ## Efficiency Has Outpaced Trust - 78% of respondents agree that AI significantly improves work efficiency. - Only 32% say they can rely on AI output in their work. - This contrast highlights the difference between AI’s potential to speed up tasks and its ability to produce consistently dependable results. - Teams must therefore focus not only on adoption, but also on quality control, human oversight, and designing workflows that account for AI’s limitations. Figma’s findings point toward an AI-driven future, but successful adoption will depend on disciplined experimentation, thoughtful product design, and systems that keep humans informed and involved.

Read original(opens in new tab)
FigmaAI AgentsPrototypingGenerative AI+3
figma3 min readCurated summary

The Art Of Art Direction | Figma Blog

Art direction is a collaborative practice built on balance: aligning a brand’s identity, an illustrator’s style, and a project’s constraints without suppressing creative individuality. Figma’s Maria Chimishkyan and Jefferson Cheng argue that strong art direction depends on trained visual judgment, clear communication, and trust in collaborators. The best results often emerge when the initial concept is clear but the final execution remains open to surprise. ## Craft in Illustration and Art Direction - Illustration craft develops through repetition and practice until technical skills become intuitive. - For art directors, craft also means “training the eye”—filtering the vast number of visual artifacts in the world and recognizing what resonates. - Good art direction requires: - Strong editing and decision-making. - A compelling starting concept. - The ability to communicate ideas clearly. - Collaboration throughout the process. - The art director’s role is not only to direct, but also to create the conditions for collaborators to become personally invested in the work. ## Choosing the Right Illustrator - Finding an illustrator is compared to casting an actor: the artist must suit the project while bringing a distinctive perspective. - Important qualities include: - A clear understanding of their own style. - The ability to communicate ideas in unexpected ways. - Confidence working through ambiguity. - Once the core idea is established, art directors give illustrators room to execute rather than over-managing every decision. - Artists may be selected specifically because they have not tackled the requested subject before, allowing them to stretch into unfamiliar constraints. ## Turning Complex Ideas into Visual Narratives - Technical or dense subjects are often reduced to a concise metaphor before visual development begins. - Art directors then decide whether the metaphor should be represented literally or abstractly. - Abstract interpretations can leave more room for viewers—and illustrators—to find meaning. - Examples include: - Hoi Chan’s dreamy botanical illustration for an article using gardening as a metaphor for engineering feedback. - Haik Avanian’s clay-like illustrations for Config talks, including an exaggerated heirloom tomato that became especially memorable. - The strongest work can move beyond its original metaphor and create an independent emotional or visual experience. ## The Advantage of Being an Illustrator - Art directors with firsthand illustration experience better understand: - How mysterious and time-consuming creative work can be. - The expectations and pressures illustrators face. - How to give realistic, constructive feedback. - Experience encourages greater empathy and trust in collaborators. - Over time, the art directors learned to stop pre-visualizing the final result and instead let the illustrator guide the project toward an unexpected outcome. - Effective feedback should make collaborators excited and invested, sometimes encouraging them to push their work further. Art direction works best when it combines a clear foundation with creative freedom. Define the purpose and constraints, choose collaborators whose perspectives add something distinctive, and trust them enough to let the final work evolve beyond the original plan.

Read original(opens in new tab)
FigmaVisual DesignAnimationIllustration+3
figma2 min readCurated summary

The Power of Play | Figma Blog

Laura Fehre’s experiment creating the Figma-based “Mani Mansion” shows how play can unlock creativity when perfectionism and rigid expectations get in the way. Although she initially rejected structure, she discovered that a flexible design system made experimentation easier and more enjoyable. The project ultimately became less about producing a perfect digital salon and more about creating something delightful and inspiring. ## Finding Inspiration in Everyday Experiences - Fehre drew inspiration from the childhood game *Barbie Nail Designer* and her own nail-salon appointments. - She explored real nail salons to capture their sounds, scents, textures, and ’90s aesthetic. - Sketches of plush seating, neon signs, and glossy counters helped translate the physical experience into an interactive Figma playground. - Her goal shifted from designing for efficiency to creating a space where users could lose track of time. ## When Disorder Needs Structure - Fehre initially made every nail shape unique, hoping to create a wild and unconventional experience. - This approach made layering and combining elements difficult, producing endless duplicates and a frustrating file. - She realized that structure and reusable components were necessary to support creative freedom. - The experience also exposed her insecurity about rusty graphic-design skills and unrealistic expectations. ## Reframing Problems as Play - Collaborating with fellow Designer Advocate Miggi Cardona helped Fehre turn creative frustration into experimentation. - They played with nail shapes and patterns without focusing on whether the results were “useful.” - Fehre recognized that trying to impress others had made failure feel threatening. - Letting go of perfection allowed setbacks to become opportunities for learning, humor, and discovery. ## Designing and Sharing the Final Manicure - Fehre created a mood board combining disco glitter, ’80s Versace influences, bold black clothing, “baddie” energy, and Valentine’s Day hearts. - A systematic set of nail shapes and colors gave her enough consistency to explore combinations freely. - She brought the resulting design to her nail technician as creative inspiration rather than an exact template. - The final manicure demonstrated how digital play can inspire real-world collaboration and expression. The practical lesson is that structure and play are not opposites. Designers can use systems as a foundation, then experiment freely within them—especially when the goal is delight rather than perfection.

Read original(opens in new tab)
FigmaDesign SystemsGraphic DesignVector Design+1
figma3 min readCurated summary

Version Control: How a UX Writer Weighs One Word Against Another | Figma Blog

A UX writer explains how a seemingly simple menu label for Figma’s offline prototyping feature revealed deeper questions about user expectations and product behavior. The team tested technically accurate, goal-oriented, and action-focused wording, but each option created confusion about what would happen after clicking. The central lesson is that UX copy must connect users’ intentions with the system’s actual behavior. ## The Challenge: Explaining Offline Prototyping - Users wanted a way to present prototypes reliably without an internet connection. - Engineers built an initial version that loaded prototype content in advance. - The remaining challenge was finding a few words that accurately explained the feature without requiring technical knowledge. - The writer argues that language exposes underlying product assumptions: choosing a verb forces the team to clarify what the system is really doing. ## Version One: “Preload Prototype” - “Preload prototype” accurately described the technical behavior: - Prototypes normally load screen by screen. - The feature gathers the necessary content upfront and retains it for later presentation. - However, “preload” implies that loading happens before the prototype appears, like “preheating” an oven. - Users had already loaded the prototype, so the prefix “pre-” did not match their experience. - Alternatives such as: - “Load full prototype” - “Load all screens” - “Load all assets” - These labels created a trust problem: users might reasonably assume that a prototype shown on screen was already fully loaded. - The wording needed to communicate that the initial load was incomplete without making the product seem unreliable. ## Version Two: Focusing on the User’s Goal - The team shifted from describing the technical process to describing the intended outcome: - “Present prototype offline” - “Prepare to present offline” - These phrases connected more directly to the user’s motivation: presenting without an internet connection. - However, “Present prototype offline” suggested that clicking the option would immediately begin presenting, even though it only prepared the prototype. - “Prepare to present offline” was more accurate but ambiguous: - Users would not know what preparation involved. - They would not know how far in advance to select it. - Both options might have worked within a larger workflow with explicit preparation steps, but they felt too imposing and unclear for a simple toggle menu. ## Language as an Interface to Computing - UX writing treats menu labels as actions or intentions: - Imperatives tell the program what to do. - Phrases can also express what the user wants to accomplish. - Terry Winograd’s principle that “people act through language” captures the problem: words connect a user’s mental model to a computer’s behavior. - When the wording, user intention, and system result are out of alignment, the interaction becomes confusing. - The article’s third iteration begins by examining what users can actually control, but the provided text ends before that approach is explained.

Read original(opens in new tab)
FigmaUser ExperiencePrototypingWeb Performance+2
figma3 min readCurated summary

Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog

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.

Read original(opens in new tab)
FigmaUser InterfaceReactJavaScript+4
figma2 min readCurated summary

Figma has confidentially submitted a draft S-1 with the SEC | Figma Blog

Figma announced on April 15, 2025, that it had confidentially submitted a draft S-1 registration statement to the U.S. Securities and Exchange Commission. The filing gives the company the option to pursue an initial public offering, but the IPO remains conditional on SEC review and further decisions by Figma. ## Confidential S-1 Submission - Figma submitted a draft Registration Statement on Form S-1 to the SEC. - The filing concerns a potential offering of Figma’s Class A common stock. - Because the submission is confidential, Figma has not yet committed to completing an IPO. - The announcement was made under Rule 135 of the Securities Act of 1933. ## No Offering Details Yet - Figma has not determined: - The number of shares that might be offered - The potential price range - The timing of a public offering - Any future sale or solicitation of securities would occur only after the SEC completes its review and applicable registration requirements are satisfied. - The announcement itself is not an offer to sell securities or a solicitation to buy them. Figma’s announcement signals that it is preparing for a possible transition to public ownership while emphasizing that the process is preliminary. Investors will need to wait for later filings and SEC review before receiving financial details or confirmation of an IPO.

Read original(opens in new tab)
FigmaAIUser ExperienceCollaborative Design
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)
FigmaUser ExperienceFigjamDesign To Code+4
figma2 min readCurated summary

The Long and Short of It: Issue no.10 | Figma Blog

“Skill share,” Figma’s April 2025 issue, gathers practical lessons for designers, developers, and product builders ahead of Config 2025. Its central argument is that strong products depend not only on speed or technical execution, but also on craft, communication, storytelling, experimentation, and long-term thinking. The issue encourages readers to keep learning across disciplines and apply these skills collaboratively. ## Craft as a Competitive Advantage - Linear CEO Karri Saarinen shares ten principles for creating products that stand out. - The advice reflects a shift away from “move fast and break things” toward deliberate quality and attention to detail. - Craft is presented as an organizational value that should influence every level of product development. ## Better Designer–Developer Handoff - Successful handoff depends on collaboration rather than simply transferring designs to engineering. - Figma’s guide focuses on three principles: - Encourage curiosity between designers and developers. - Keep communication open throughout the build process. - Establish a shared understanding of what “good” means. - The goal is to reduce friction, clarify expectations, and preserve design intent during implementation. ## Writing and Storytelling for Product Builders - Clear writing helps teams explain technical architecture, new features, product roadmaps, and broader visions. - Storytelling is not limited to writers or marketers; people in every product role benefit from articulating ideas effectively. - Strong communication can make complex concepts easier to understand and build support for new directions. ## Building for the Long Term - In a period of rapidly advancing AI tools, product teams must focus on making things work well—not merely making them work. - Dylan Field and Garry Tan discuss experimentation, play, and exploring an “idea maze” as essential parts of product development. - They also address vibe coding, AI-assisted creation, and the importance of preserving human craft even as AI models become more capable. - Founders are encouraged to remain deeply focused on quality and to develop products with lasting value. ## Broader Exploration - The issue also includes a “Rabbit hole” section featuring additional visual and editorial explorations. - Together, the featured topics present skill development as an ongoing process spanning design, engineering, communication, and strategy. The practical takeaway is to treat craft and collaboration as core product skills. Teams can improve their work by communicating clearly, aligning early, experimenting freely, and maintaining high standards even when new tools make development faster.

Read original(opens in new tab)
FigmaAISoftware DevelopmentDeveloper Handoff+2