techlist.io
KREN

Design Systems

252 posts

figma3 min readCurated summary

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceAuto Layout+2
figma2 min readCurated summary

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog

Kimberly-Clark responded to slowing growth, competition, and rising costs by prioritizing its digital presence. By adopting Figma as a collaborative, browser-based design platform, the company replaced fragmented workflows with a shared source of truth and faster stakeholder feedback. This collaboration produced measurable results, including a 71% increase in signups after redesigning a form. ## Digital transformation at global scale - Kimberly-Clark manages more than 400 consumer websites across 175 countries. - Its digital systems support pricing, manufacturing, distribution, merchandising, sales, and operations. - The company needed a more efficient way to create and localize consistent digital experiences for brands such as Kleenex, Scott, and Huggies. ## Problems with the previous design workflow - Designers spent weeks working individually in proprietary Mac applications. - Files had to be uploaded to separate cloud prototyping tools for review. - Stakeholder feedback created repeated edit-and-review cycles. - Developer handoff was difficult when developers did not use Macs. - These delays slowed the launch of new products and digital experiences. ## Figma as a collaborative design platform - Figma consolidated design, prototyping, feedback, and editing in one browser-based tool. - Files were no longer stored locally, and invited stakeholders could view or edit them easily. - Feedback meetings became real-time working sessions rather than discussions held after designs were completed. - Brand, marketing, design, and other teams could participate directly and see changes immediately. - The approach created a shared “single source of truth” and improved alignment. ## Redesigning for measurable user impact - The UX team tracked metrics such as bounce rates, returning visitors, time on site, and signup rates. - One website’s signup form contained 13 fields because marketing wanted extensive information upfront. - The teams collaborated in Figma to reduce the form to five fields. - After launch, signups increased by 71%. - Faster collaboration helped the company resolve design problems quickly and move products to market sooner. ## Next steps - Kimberly-Clark planned a design system connected across Figma, Storybook, and its code repository. - The company viewed its digital transformation as the beginning of a more design-led phase ahead of its 150th anniversary. The case suggests that collaborative design tools are most valuable when paired with user-focused metrics: they can improve internal workflows while directly increasing customer engagement.

Read original(opens in new tab)
Design SystemsFigmaUser ExperiencePrototyping+3
figma2 min readCurated summary

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

Read original(opens in new tab)
Design SystemsFigmaAccessibilityRemote Collaboration+3
figma2 min readCurated summary

Power up your design system with Figma’s agency partners | Figma Blog

Figma announced partnerships with leading digital and design agencies to help organizations build, migrate, and scale design systems. The post argues that effective design systems connect design and code, creating consistency, efficiency, and a shared source of truth. Figma’s agency partners provide both implementation support and strategic guidance for improving collaboration, workflows, and brand expression. ## Why Design Systems Matter - Modern design systems are more than pattern libraries or sticker sheets. - They create a shared language between design and development. - They support creative exploration while adding the structure and rigor needed for implementation. - A well-managed system helps teams work faster, maintain consistency, and establish a single source of truth. - Designing and implementing such a system can be challenging, especially when migrating tools or scaling across teams. ## How Agency Partners Help ### Setting Up a Design System - Agencies can help organizations migrate their existing design-tool stack to Figma. - For existing Figma users, they provide recommendations for organizing systems around specific brand and team needs. - Their support covers architecture, implementation, and initial setup. ### Improving Design and Development Processes - Building a system is only the beginning; teams must also determine how it will be used and maintained. - Partners can define guiding principles, recommend operating processes, and improve collaboration between designers and developers. - Their goal is to reduce inefficiencies caused by gaps between tools, teams, and workflows. ### Defining and Scaling a Brand - Design systems translate a brand into practical design decisions and reusable components. - Agency partners offer strategic brand guidance in addition to technical and process expertise. - This helps organizations maintain a consistent identity as their products, teams, and brands grow. ## Figma’s Agency Partner Network - Figma initially partnered with eight agencies: - BASIC® - frog - HUGE - Idean - One North - R/GA - Instrument - Work & Co - These agencies serve organizations across industries and company sizes. - Examples include BASIC®’s work with brands such as Google, Airbnb, Patagonia, Apple, Beats by Dre, and Herman Miller. - Partner testimonials emphasize faster collaboration, greater transparency, improved organization, and stronger client relationships through Figma. Figma’s recommendation is to use experienced service partners when a team needs help migrating to Figma, structuring or scaling a design system, improving design-to-development workflows, or translating a brand consistently across products.

Read original(opens in new tab)
Design SystemsFigmaDesign ToolsDesign To Development+1
figma2 min readCurated summary

Creating moments of connection | Figma Blog

The Figma post reflects on Config Europe and argues that design’s greatest value lies in creating meaningful human connections. Across organizational change, personal branding, and digital products, the contributors emphasize that successful design combines function with empathy, emotion, and purpose. The central conclusion is to develop technical mastery without losing sight of humanity. ## Designing Beyond a Single Product - Posti Group, Finland’s postal service, used digital transformation to rethink its entire customer journey—not merely build a new app. - The organization established four guiding principles: - **Grow:** Adapt as users’ needs change. - **Delight:** Turn frustrating experiences into positive ones. - **Reduce:** Deliver reliable, efficient services. - **Listen:** Give customers ways to express their needs. - Design became a company-wide framework for defining “what great means.” - Posti’s work recognizes that postal services carry emotional significance, supporting important communications such as love letters, tax documents, and newborns’ social security cards. ## Character Matters as Much as Skill - ConvertKit’s Charli Marie Prangley argues that a designer’s reputation depends on more than technical ability or visual craft. - Personal brand is shaped by character: kindness, creativity, authenticity, and how others experience working with you. - Designers should consider how they want people to describe them and assess whether their public presence reflects their values. - Sharing work and participating in the design community can help build an authentic reputation. - Her advice is to remain genuine because there is an audience that will value an individual perspective. ## Combining Function with Feeling - Halli Thorleifsson of Ueno encourages designers to create work with meaning rather than treating products as “just” websites, apps, or tools. - Design systems and software matter because of the work, relationships, and experiences they enable. - Technology can help people feel connected and that they belong, especially while working remotely. - Config Europe’s virtual format demonstrated this potential by bringing nearly 10,000 participants from more than 150 countries together through talks, chats, networking, and community groups. The practical recommendation is to master your craft while deliberately developing empathy, authenticity, and a sense of purpose. Design is most powerful when it improves both what people can do and how connected they feel.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceRemote Collaboration+1
figma2 min readCurated summary

Inside Figma: my time as a new grad | Figma Blog

The post argues that choosing a first job should involve more than checking boxes such as “interesting problems,” “smart people,” and “good culture.” Josh Shi reflects on joining Figma as a new graduate and encourages readers to examine how work fits into their broader lives, interests, and changing goals. His conclusion is that the most useful job-search framework is built around personal questions rather than universal criteria. ## Rethinking Work-Life Balance - Work and life are not opposing forces in a zero-sum equation. - The hours spent working and not working together constitute a person’s life, and each affects the other. - Job satisfaction can influence life outside work, just as personal circumstances can affect satisfaction at work. - Measuring balance only by the number of hours worked ignores the nature and meaning of the work. - The author acknowledges that treating work as a career is a privilege, especially during economic hardship or when employment is uncertain. - People who have the opportunity to choose should ask: - What kinds of work interest me? - Does this workplace support those interests? - Will I be able to learn and develop? - Can the role adapt as my interests change? - What skills or crafts can I build? - Does the job leave room for other interests? ## Learning as a New Graduate - At Figma, Shi gained new technical experience, including: - Full-stack development - Writing C++ for the web - More significantly, he learned to own features and participate in the full product-development process. - This included scoping projects, clarifying ambiguous goals, and taking ideas from inception through launch. - Mentorship and support from colleagues made it possible for him to challenge himself and take ownership. - The same people he met during his interview continued to provide guidance and expertise after he joined. ## Company Growth and Change - Figma had changed substantially during Shi’s first few years as the company and product expanded. - The company began transitioning toward a hybrid model, illustrating that workplaces evolve over time. - This reinforces the importance of considering not only whether a company fits current interests, but also whether it can accommodate future growth and changing priorities.

Read original(opens in new tab)
Design SystemsWeb DevelopmentProduct DevelopmentC+++1
figma2 min readCurated summary

Embracing the tension between code and design | Figma Blog

Figma argues that design and code should not be forced into identical workflows, but should learn from each other. Designers need freedom to explore, while developers benefit from structure, reuse, and consistency. At Config Europe 2020, Figma announced features intended to connect these strengths through more code-like design systems and more efficient handoff. ## Design Systems That Mirror Code - Teams often maintain separate component libraries for design and development, even when the components represent the same product elements. - Differences between the two systems can cause miscommunication and slow implementation. - Figma introduced **Variants**, which group related versions of a component—such as button sizes, styles, interaction states, or platform-specific versions—into one component. - Variants are intended to make Figma components more closely resemble reusable code components and simplify the asset panel. ## Interactive Prototyping with Variants - Before Interactive Components, designers often had to connect multiple frames and overlays to simulate component behavior. - **Interactive Components** allow designers to define prototype transitions directly between Variant states. - This makes component instances immediately interactive in prototype mode and reduces the work required to simulate UI behavior. ## Auto Layout Inspired by CSS - Auto Layout already allowed designs to respond automatically to content changes, such as expanding a button when its label changes. - Figma planned to make Auto Layout more closely match the web’s CSS box model and Flexbox. - Planned improvements included: - A simpler user interface - Stretching elements along both axes - Independent padding controls - Better spacing options for common patterns, such as navigation icons ## Making Large Design Systems Easier to Use - The redesigned **Instance Swap Menu** helps users navigate large component libraries with: - Thumbnails - Search - Keyboard shortcuts - These improvements reduce the need to remember exact component names or browse long lists manually. ## Improving Developer Handoff with Inspect - The new **Inspect Tab** replaces Figma’s Code panel and presents implementation-relevant information more clearly. - It displays the selected layer’s name prominently, helping designers and developers identify what is being built. - Developers can inspect values for Variants, colors, shadows, content, typography, borders, and other properties. - Values and complete key-value snippets can be copied directly into code. Figma’s overall direction is to preserve the creativity of visual design while adding the structure and reusability associated with software engineering. Features such as Variants, Interactive Components, improved Auto Layout, and the Inspect Tab aim to make design systems easier to maintain and translate into production.

Read original(opens in new tab)
Design SystemsFigmaPrototypingCSS+4
figma2 min readCurated summary

Making Design Within Reach for online shoppers | Figma Blog

Design Within Reach (DWR) redesigned its e-commerce site to recreate the personalized showroom experience online, responding to changing consumer expectations and increased online shopping during COVID-19. In partnership with BASIC®, DWR adopted a transparent, collaborative workflow using Figma, conducted extensive customer research, and launched a responsive site with live sales support. The redesign increased sales and established a scalable design system for Herman Miller’s broader family of brands. ## A Transparent Agency Partnership - DWR partnered with BASIC® to combine the agency’s e-commerce expertise with DWR’s internal brand and product knowledge. - Both organizations worked as one co-creative team rather than in separate workstreams. - Shared Figma files allowed designers in different companies and time zones to collaborate in real time. - Continuous access to the latest files eliminated version-control issues and effectively created 14-hour workdays across teams. - Figma prototypes also made it easy for executives and other stakeholders to review progress through shareable links. ## Bringing the Showroom Experience Online - The redesign was informed by 110 hours of customer research and testing with more than 200 participants. - Interactive Figma prototypes enabled rapid usability testing and iteration. - The site launched in July 2020 with responsive layouts and video chat connecting shoppers with sales associates. - Customers using the new live chat features were nine times more likely to complete an online purchase. - DWR saw an immediate increase in purchases after launch instead of the typical temporary decline following a major website release. ## A Scalable Design System - The redesign became the foundation for Herman Miller’s first design system spanning multiple brands. - DWR and BASIC® created a shared set of reusable components and a consistent visual language. - Developers can implement standardized components more quickly. - Content authors can assemble pages by dragging in prebuilt components, updating images, and editing text. - Cloud-based Figma libraries make it easier to share assets and scale the system across internal teams and external partners. DWR’s experience suggests that combining close agency collaboration, user-centered research, real-time design tools, and reusable components can make complex showroom-style retail experiences effective online while preparing a brand for future growth.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceResponsive Design+3
figma2 min readCurated summary

Creating multi-brand design systems | Figma Blog

Design systems should provide consistency and speed without becoming rigid constraints. Shopify, Condé Nast, and Harry’s emphasize flexible architectures, brand-specific tokens, continuous iteration, and strong connections between design and code. The most effective system is one that adapts to changing needs while remaining simple enough for teams to use. ## Flexibility Over Rigidity - Overly prescriptive rules can limit creativity and push designers outside the system. - Harry’s uses layered architecture: - Base components offer simple, low-complexity solutions. - More advanced layers, such as starter kits, support custom work. - This approach makes the standard path efficient while preserving room for exploration. - Condé Nast uses modular components and design tokens to support brands such as *Vogue*, *The New Yorker*, and *Bon Appétit*. - A token can represent the same purpose while holding different values—for example, “prominent text” can map to a different font for each brand. ## Design Systems Must Evolve - Building a system is only the beginning; teams must observe how it performs in real use. - Analytics and usage data help identify which libraries and components are being used and where changes are needed. - Shopify aims to create systems that “bend but not break,” rather than polished artifacts that teams are afraid to modify. - Teams should watch how the system fails—including how it affects end users—in order to improve and reinvent it. ## Connecting Design to Code - Translating design components into code improves efficiency and reduces friction between designers and engineers. - Condé Nast stores its token system in JSON and uses a custom plugin to import and export token changes. - This setup helps the company launch new markets quickly while maintaining a smooth design-to-development handoff. - Even teams without multiple brands can start by associating a purpose with each value, such as naming a color or typography style by its intended use. - Purpose-based naming exposes unnecessary complexity and makes systems easier to evaluate. ## A System Designed for the Team - There is no universal design-system model. - The right structure depends on a team’s size, organization, technical environment, and priorities. - Systems should establish useful foundations while leaving enough flexibility for different products, brands, and future requirements. Teams should begin with simple, reusable foundations, connect design decisions to code where practical, and continually revise the system based on actual usage rather than treating it as a finished artifact.

Read original(opens in new tab)
Design SystemsJavaScriptDesign TokensWeb Development+2
figma3 min readCurated summary

How we use Figma templates to facilitate collaboration at Shopify | Figma Blog

Shopify developed a standardized Figma template to make project files easier for designers, product managers, engineers, and other collaborators to navigate. The template applies Shopify’s lightweight “Get Sh*t Done” framework—Think, Explore, and Build—while presenting build-ready work first. Consistent file structure, clear status indicators, dates, links, and annotations reduce confusion about a project’s current state and next steps. ## The Problem: Collaboration Creates File Complexity - Figma makes collaboration easy, but projects accumulate designs, prototypes, feedback, and multiple versions over time. - Teams were using different file-organization methods, making it difficult to find: - The latest designs - Approved layouts - Prototypes intended for user testing - Relevant project context and contacts - Shopify’s template provides a predictable structure across files and helps teams start projects faster. ## The Template’s Project Structure - The template is based on Shopify’s “Get Sh*t Done” framework: - **Think:** Understand the problem space. - **Explore:** Investigate and test possible solutions. - **Build:** Finalize the chosen direction for implementation. - Pages appear in reverse process order, with build-ready work placed first so collaborators see the most important information immediately. - Teams should create the cover and project overview first, then begin documenting the Think phase before moving into exploration. ## Cover and Project Overview - The cover communicates: - Project name - Owning team - Current project status - A cover also makes files easier to identify in Figma’s grid view. - The status indicator should be updated as the project progresses. - The project overview provides: - Additional context - Links to briefs, research, and related documents - Contact information for questions and feedback - Links to documents or Slack profiles can be added directly to the Figma file for quick access. ## Think: Establish the Foundation - The Think section collects the information needed to understand the project and begin design work. - Useful content includes: - User flows and journey maps - Job stories - Design sprint explorations - Screenshots and previous designs - Inspiration and links to external documents - Its purpose is to preserve the project’s background and problem space before solutions are explored. ## Explore: Investigate Possible Solutions - Explore is the flexible collaboration area where teams diverge, test ideas, and converge on promising approaches. - Recommended practices include: - Create separate pages for different devices or form factors. - Add titles to explorations and flows. - Use badges to show the state of each exploration. - Add a date to every new page to indicate freshness. - Keep user-testing prototypes on separate pages. - Use sticky notes for commentary, ideas, and feedback. - This section is expected to contain substantial collaboration, comments, and alternative layouts. ## Build: Prepare the Chosen Direction - Once a solution is selected, move the relevant pages or layouts from Explore into Build. - This keeps finalized work separate from experimentation and makes implementation-ready designs easier to find. - The structure supports a clear transition from exploration to delivery while preserving earlier thinking and feedback. Using a shared template like Shopify’s gives every collaborator the same mental model for navigating Figma files. Teams should adapt the sections as needed, while consistently maintaining project status, dates, ownership, context, and a clear separation between exploratory and implementation-ready work.

Read original(opens in new tab)
Design SystemsFigmaPrototypingDesign Collaboration+2
figma2 min readCurated summary

Explore the Figma Community | Figma Blog

The Figma Community is rolling out to all users as a public library of files that can be searched, inspected, duplicated, liked, and remixed. The post highlights how designers and organizations are using the platform to share design systems, illustrations, workflows, and creative experiments. Figma presents the launch as an early foundation for a broader community built around generosity, collaboration, and reusable resources. ## A New Space for Shared Design Resources - The Community gives users access to thousands of published Figma files, including: - Design systems - Icon packs - Wireframes - Illustrations - Prototypes and games - Users can browse by tags, search files, claim profile handles, follow creators, like files, and duplicate resources. - Publishing initially remains limited to beta participants while Figma continues refining the product. - Contributors include organizations such as Microsoft, Google, and Mixpanel, as well as independent designers and illustrators. ## Material Design Baseline Kit - Jessie Z of Google’s Material Design team created a downloadable foundation for people building their own design systems. - The kit has two parts: - **Material Theme:** Lets users customize typography and color palettes while seeing the effects on components, states, and layouts. - **Sticker sheet:** Provides a more traditional collection of reusable components. - The resource is intended both as a practical starting point and as a way to learn Material Design guidelines and develop a product’s visual identity. ## Open Figures Illustration Library - Illustrator Bonnie Kate Wolf created Open Figures as a flexible library of reusable illustrations for Blush. - Unlike her previous work within company-specific guidelines, the project allowed her to develop an independent visual style. - The illustrations can support product storytelling, presentations, or personal creative projects. - Building the library also exposed accessibility considerations: interchangeable clothing and character parts had to work for users, including wheelchair users. ## Spotify Ways of Working - Barton Smith, Cliona O’Sullivan, and Spotify’s Figma working group published their approach to organizing and collaborating in Figma. - They shared the file because many companies lack a standard model for structuring Figma workspaces. - The resource offers the community a view into Spotify’s internal practices. - Spotify planned to keep revising the system as the team learned what worked and what needed improvement. Figma’s recommendation is to explore the Community, follow useful creators, and reuse or adapt the resources that fit your work. The launch emphasizes that its value will grow as more people publish practical tools, creative work, and proven ways of working.

Read original(opens in new tab)
Design SystemsFigmaPrototypingAccessibility+2
figma3 min readCurated summary

Inside Figma: reflections on a remote internship | Figma Blog

Jenning Chen reflects on her remote internship at Figma and the process of taking improvements to the style picker from concept to launch. Despite concerns about isolation and communication, Figma’s intentional remote culture helped her build relationships, learn the product, and receive support. Her project added search, a color-style list view, and visible text-style metrics while giving her experience across Figma’s technology stack. ## A Warm Welcome - Slack messages, virtual coffee chats, and a collaborative welcome card helped Chen feel connected from the start. - Although the internship was fully remote, Figma maintained the open and welcoming culture that had first attracted her years earlier. ## Building Relationships Remotely - Chen initially worried that remote work would make it harder to form relationships or ask for help. - Company-wide events created regular opportunities to meet colleagues: - Show-and-tell meetings for sharing work and learnings - Thursday tech talks about coworkers’ interests and projects - One-on-ones about Figma’s product and growth - Virtual cooking classes, escape rooms, and scavenger hunts - These activities helped replace informal office interactions and encouraged connections beyond her immediate team. ## Developing Product Fluency - Before beginning her project, Chen needed to understand Figma’s features and design terminology. - She relied on her mentor, teammates, and Slack channels for answers. - Colleagues were willing to schedule calls and work through obstacles with her, making remote collaboration more effective than she expected. ## Improving the Style Picker - The style picker lets users browse and apply paint, text, effect, and layout-grid styles. - As users accumulated more styles, the original grid-based interface became difficult to navigate: - Important style information was obscured. - Users had to scroll through long lists. - Finding a specific style was inefficient. - Working with product designer Shana Hu, Chen implemented: - **Search:** Lets users find styles with a few keystrokes. - **Color styles list view:** Displays style names clearly beside thumbnails. - **Text style metrics:** Shows font size and line height directly in the picker. ## Technical and Launch Challenges - The project exposed Chen to multiple parts of Figma’s stack: - TypeScript and C++ in the editor - Ruby in the backend - She presented the work at an internal show-and-tell and received supportive feedback from coworkers. - Launch preparation required migrating millions of existing text styles to add font-size and line-height metadata. - The migration took an entire day, alongside the work of incorporating critique feedback and fixing last-minute bugs. The internship demonstrated that a thoughtfully structured remote environment can support mentorship, relationship-building, and meaningful ownership. Chen’s experience also shows how an intern can contribute to a high-impact product feature while gaining broad technical and product knowledge.

Read original(opens in new tab)
Design SystemsFigmaTypeScriptC+++2
figma2 min readCurated summary

Announcing Config Europe: a call for speakers | Figma Blog

Figma announced Config Europe, a free virtual conference taking place on September 17, 2020. After its San Francisco event showed both the value of community connection and the limitations of an in-person format, Figma chose an online conference to make participation more accessible. The company invited community members—especially first-time speakers—to submit talks, panels, lightning rounds, and workshops. ## From In-Person Conference to Virtual Event - Figma’s first Config conference brought together 1,200 attendees in San Francisco, with additional viewers online. - Sessions covered topics including design systems and open source’s influence on urban planning and infrastructure. - Plans to take Config to cities worldwide were paused as the global situation changed. - Figma ultimately decided that a virtual format could still fulfill Config’s mission of amplifying community voices and enabling people to learn and share. ## Call for Speakers - Speakers could submit proposals by **July 31, 2020**. - First-time speakers were explicitly welcomed and encouraged. - Accepted speakers would receive: - IT support and equipment - Help from product specialists and editors - Opportunities to develop talks, panels, lightning rounds, or workshops - Proposals not selected for Config Europe might be considered for other Figma opportunities, such as livestreams or blog posts. ## Conference Content Tracks The agenda was organized around four main themes: - **Building and maintaining design systems** - Starting and scaling systems - Creating components and style guides - Getting teams to adopt shared systems - **Figma deep-dives** - Improving workflows with plugins, Auto Layout, components, and other features - **Process, culture, and team-building** - Recruiting, hiring, team culture, and remote-work practices - **Opening up design** - Making design more inclusive, accessible, and participatory for non-designers ## Attending Config Europe - The event was free and open to anyone, anywhere. - Figma planned to publish the agenda and open registration on **August 20, 2020**. - Prospective attendees could sign up to receive updates when registration became available. Figma’s recommendation was to submit ideas through the Config Europe speaker portal or register for event updates. The announcement emphasized that the virtual conference was intended to preserve the collaborative spirit of Config while making it accessible to a broader global community.

Read original(opens in new tab)
Design SystemsFigmaOpen SourceAuto Layout+1
figma2 min readCurated summary

How BT continues to push the telecommunication industry forward | Figma Blog

BT, a telecommunications company founded in 1846, modernized its product development by reorganizing teams into cross-functional product squads. These squads adopted Figma to replace fragmented design tools and improve collaboration among designers, engineers, product owners, content designers, and stakeholders. The shift reduced costs, increased design visibility and consistency, accelerated delivery, and helped BT maintain collaboration during the move to remote work. ## The Evolution to Product Squads - BT created smaller teams responsible for end-to-end product delivery. - Designers began working directly with product owners, engineers, content designers, and other specialists. - The new structure encouraged collaboration but exposed workflow problems: - Too many disconnected tools, including Docs, Sketch, InVision, and Jira. - Time-consuming file transfers and handoffs. - Multiple feedback channels and communication barriers. - Difficulty maintaining cohesive design across product lines. ## Migrating to Figma - BT’s design operations team piloted Figma with one product squad for two months. - The pilot produced quick benefits: - Real-time collaboration became easier. - Design handoffs were simplified. - Teams could design, prototype, and present in one place. - Engineers and product owners gained earlier visibility into design work and could contribute before decisions were finalized. - Following the pilot, BT rolled Figma out across all product squads. - Stakeholders could review and comment on work through a link from any device. ## Business and Organizational Benefits - **50% lower design-tool costs:** Figma replaced Sketch and InVision. - **Greater influence for design:** Better visibility brought design into more business decisions and investment discussions. - **Improved consistency:** Figma created a foundation for a future centralized design system spanning BT’s brand, products, and business units. - **Business continuity:** During COVID-19, Figma provided a shared online workspace for remote teams to communicate and solve problems. - **Faster decision-making:** Teams began conducting live experience walkthroughs with executives instead of preparing polished presentation decks. - **Higher transparency and efficiency:** Cross-functional teams developed a shared understanding of work and goals. BT’s experience shows that adopting a collaborative design platform can support more than design efficiency. Combined with cross-functional product squads, it can reshape organizational workflows, reduce costs, strengthen stakeholder involvement, and help a large company continue innovating.

Read original(opens in new tab)
Design SystemsFigmaPrototypingDesign Collaboration+3
figma2 min readCurated summary

How Clearstep simplifies the experience of finding care online | Figma Blog

Clearstep built a symptom-checking and care-routing platform to make finding healthcare less stressful and more actionable. The platform helps users determine whether they need care, identify suitable providers based on location and insurance, estimate costs, and schedule appointments. The team relied on iterative design, shared styles, and real-time collaboration in Figma to manage complex patient flows and customized health-system branding. ## Designing a Complex Healthcare Experience - Clearstep launched its platform in 2018 to guide patients from symptom evaluation to appropriate care. - Its features include: - Symptom checking and care recommendations - Provider matching based on location and insurance network - Insurance eligibility checks - Cost estimates - Direct appointment scheduling - Because the product influences thousands of patients’ healthcare decisions, the team prioritized both speed and accuracy in design. ## Testing Information-Dense User Flows - The team iterated extensively on how users move through symptom checking and compare care options. - Figma’s Smart Selection made repetitive tasks, such as reordering care options, faster through drag-and-drop editing. - Typography and button copy were refined through user testing because small changes affected navigation and decision-making. - Automatically resizing button text allowed the team to test different wording efficiently. ## Managing Custom Branding - Clearstep licenses its platform to health systems, requiring white-labeled versions with different customer branding. - Designers created new Figma files for each client and quickly added custom color palettes. - Color Styles enabled multiple designs to be updated at once. - Approved styles could be published to a shared Library so every editor worked from the same branding system. ## Collaborating Remotely - Figma’s multiplayer features allowed Peter Garber and Annie Kramer to edit, review, and improve designs simultaneously. - Shared text and color styles kept design and engineering work synchronized. - Prototypes could be shared through browser links, allowing the broader team to review changes in real time. - Named, color-coded cursors, observation mode, and comments reduced reliance on screen sharing and made feedback easier to track. ## Moving from Design to Implementation - Engineers used Figma’s Color Styles, Code panel, spacing labels, and export tools to translate designs into working interfaces. - Developers could access assets directly rather than relying on manual downloads or lengthy handoff conversations. - Centralized styles helped preserve consistency between the final designs and implementation. Clearstep’s approach shows how collaborative design tools can help healthcare teams simplify complicated workflows, support customer-specific branding, and move efficiently from tested interface concepts to implementation.

Read original(opens in new tab)
Design SystemsFigmaUser ExperiencePrototyping+2