techlist.io
KREN

Design Systems

252 posts

figma3 min readCurated summary

How Pinterest’s design systems team measures adoption | Figma Blog

Pinterest’s Gestalt design systems team created a “design adoption” metric to understand how widely its components are used during the design phase, not just after implementation. Code-based adoption metrics were limited to web components and often lagged behind design activity, while raw Figma instance counts lacked context. Using Figma’s REST API, the team built FigStats to measure Gestalt usage relative to all content in Pinterest design files. ## Why Code Adoption Wasn’t Enough - Gestalt’s existing adoption metric tracked component usage in code. - Code provided concrete data about which components shipped and whether teams modified them. - However, it had two limitations: - It only covered web components, not Gestalt’s iOS and Android components. - It took time for newly designed components to reach production code. - Measuring adoption in Figma provided earlier insight into whether designers knew about and used Gestalt components across all platforms. ## Defining a More Meaningful Adoption Metric - Figma’s built-in library analytics reported: - Component instances - Component insertions - Usage by team - These were useful counts but did not indicate whether usage was significant. - For example, 10 Gestalt components in a 1,000-node design represent only 1% adoption, even though the raw usage count is nonzero. - Pinterest therefore defined adoption relatively: Gestalt usage compared with the total content in a design file or page. - This approach helped distinguish isolated component use from meaningful reliance on the design system. ## Building FigStats with the Figma REST API - The Gestalt team used Figma’s REST API to inspect design files and identify layers originating from Gestalt libraries. - FigStats aggregated this information into a dashboard for visualizing component usage. - The dashboard enabled the team to explore adoption across Pinterest’s design work rather than relying only on manually selected examples. - Measuring actual file content also helped reveal whether designers were using complete Gestalt components or recreating and modifying patterns themselves. ## Using Adoption Data to Guide the Design System - Design adoption became a way to evaluate the value and reach of Gestalt. - Higher usage could demonstrate that investment in corresponding engineering components was justified. - Low adoption could indicate that: - Designers were unaware of an existing component. - The component did not meet their needs. - Documentation or discoverability needed improvement. - A component required redesign or better cross-platform support. - Because design precedes implementation, Figma usage could serve as an earlier signal than production code adoption. Figma’s native analytics provide a useful starting point, but meaningful adoption measurement requires context. Teams should compare design-system usage with the total design surface, use the data to identify gaps, and treat Figma adoption as a complementary metric to code adoption.

Read original(opens in new tab)
Design SystemsFigmaRest ApiData Analytics+2
figma3 min readCurated summary

The Future of Design Systems is Complicated | Figma Blog

Design systems have evolved from simple visual metaphors into complex frameworks supporting many platforms, use cases, accessibility needs, and performance expectations. The article argues that teams need more structure to manage this complexity, but excessive control can suppress creativity. The future lies in balancing consistent systems with flexibility, experimentation, and contributions from the wider design community. ## Complexity Is the New Normal - Early systems such as Google’s Material Design used familiar metaphors—like stacked paper—to help users understand digital interfaces. - Google later abandoned that metaphor as users became more comfortable with digital interactions and products expanded across: - New devices and form factors - Accessibility standards - More sophisticated interactions - Higher performance expectations - Products such as Instagram evolved from single-purpose apps into platforms for discovery, advertising, partnerships, and shopping. - Larger teams now work across multiple interconnected systems, creating a need for better ways to organize design and development work. ## Taming Chaos with Structure - Design teams are adopting processes inspired by software development, particularly branching and merging. - Contributors can work on isolated branches, propose fixes or components, and have system managers review changes before incorporating them into the main system. - Spotify’s Encore supports “local systems,” allowing sub-teams to fork and extend the central system for specialized needs. - Spotify’s advertising team developed a strong collection of video-player components, which later influenced the broader organization. - Open design systems can: - Gather feedback from a wider range of users - Encourage outside contributions - Make products and design decisions more transparent - Build organizational trust and visibility ## When Structure Becomes Too Restrictive - Strict systems can limit experimentation and make designers feel they lack creative freedom. - A design system should reduce the effort required to express ideas, not create additional barriers. - Shopify designer José Torre compares systems to gardening rather than architecture: - Architecture implies that everything is planned and finished. - Gardening involves planting, observing, adapting, and intervening as unexpected growth occurs. - Components such as buttons and menus may develop in unforeseen directions, so systems need room to evolve rather than enforcing rigid boundaries. ## Finding the Balance - Effective design systems must combine consistency with adaptability. - Teams should establish enough structure to coordinate large, interconnected efforts while allowing local experimentation and new patterns to emerge. - Collaboration, contribution workflows, and ongoing maintenance are more valuable than treating a design system as a fixed, finished artifact. Design systems should be treated as living ecosystems: structured enough to provide shared foundations, but flexible enough to support creativity, accessibility, and changing product needs.

Read original(opens in new tab)
Design SystemsOpen SourceAccessibilityMaterial Design+1
figma2 min readCurated summary

Taking cues from code | Figma Blog

Design systems are becoming more complex as teams collaborate across interconnected products, and Figma argues that design can learn from software engineering. The goal is to introduce structure without eliminating creative flexibility. The article highlights component composition and decoupling structure from presentation as ways to make systems more adaptable and scalable. ## Design Borrowing from Code - Design was once largely local and isolated, with files stored on individual machines. - Modern design involves larger teams, shared ecosystems, and dependencies across products and files. - Design systems help maintain consistency and quality at scale, but excessive structure can restrict exploration. - Figma sees software engineering patterns as useful models for handling this complexity. ## Nesting Components for Flexible Layouts - Simple systems can represent variations through component variants. - As the number of layouts grows, maintaining every variation separately becomes difficult. - Component properties can support limited optionality, such as cards with or without images or pull quotes. - Properties are insufficient when components differ substantially in orientation and structure. - Composition offers a more flexible approach: - Designers create small, reusable sub-components. - These sub-components are nested inside larger, layout-specific components. - The same building blocks can be recombined into many arrangements. - This reduces the need to anticipate every possible layout when designing the system. ## Decoupling Structure from Presentation - Basic design systems often hard-code a single visual theme into each component. - Teams may later add light and dark modes, followed by themes for different products, brands, or sub-brands. - As the number of themes increases, maintaining colors and styles becomes increasingly burdensome. - The article introduces headless design systems as an architectural response to complex theming requirements, separating a component’s underlying structure from its visual presentation. A scalable design system should favor composable building blocks and flexible theming rather than attempting to encode every possible layout and brand variation directly into monolithic components.

Read original(opens in new tab)
Design SystemsDesign TokensComponent ArchitectureTheming+2
figma2 min readCurated summary

A sneak peek at Schema 2022 | Figma Blog

Schema 2022 is Figma’s annual conference focused specifically on design systems rather than design in general. The event combines in-person gatherings in New York, London, and Tokyo with a virtual livestream, bringing together designers, developers, and advocates to discuss practical challenges, emerging standards, and cross-disciplinary collaboration. ## A Global Design Systems Conference - Schema 2022 includes: - In-person events in New York, London, and Tokyo - A virtual event open to anyone unable to attend in person - Community meetups in each host city - Each city features a distinct lineup of speakers representing different areas of design expertise. - The conference is invite-only, but interested attendees can apply online. - Talks were later made available through DesignSystems.com. ## A More Focused Conference Than Config - Whereas Figma’s Config conference addresses design broadly, Schema concentrates on the specialized field of design systems. - Its narrower focus allows speakers and attendees to explore the field’s specific opportunities and challenges in greater depth. - Organizers aim to balance innovative content with introductory material for people who are still new to design systems. ## Collaboration Between Designers and Developers - Design systems require a mix of design, engineering, and organizational skills. - Schema is intended to encourage “creative cross-pollination” between designers and developers. - Designers can share ideas for plugins, extensions, and integrations. - Developers can demonstrate tools and systems they are building. - The event highlights how design systems create a shared language between the two disciplines. ## Design Tokens and Emerging Standards - The W3C Design Tokens Community Group is highlighted as an important part of the program. - Design tokens provide a technology-agnostic way to scale visual design across tools, devices, and platforms. - The group is working toward standards that allow products and design tools to share design-system styles consistently. - Figma’s developer advocates are especially interested in how the group addresses accessibility and internationalization early in the standards process. Schema 2022 presents design systems as both a specialized practice and a meeting point for design and software engineering. Its recommendation is implicit: people working with design systems should use the event and its talks to learn from adjacent disciplines, follow developing standards such as design tokens, and connect with the broader community.

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

What’s new in Figma: September 2022 | Figma Blog

September 2022 brought Figma and FigJam updates focused on collaboration and design-system workflows. Component properties became more flexible through an open beta, while Google Calendar integration made it easier to connect files with meetings. Figma also announced Schema events and released more than 300 templates for common design and team activities. ## More Flexible Component Properties The open beta expands component-property capabilities to make design systems easier to manage and customize: - **Preferred values** provide curated component options when swapping instances. - **Exposed nested instances** let users customize nested-instance properties from the parent component. - **Simplified instances** hide unnecessary layers and details, emphasizing only editable elements for people using the component. ## Figma and FigJam in Google Calendar A new Google Chrome extension connects Figma and FigJam directly to Google Calendar: - Users can attach a Figma or FigJam file to a calendar event. - Teams can add meeting materials without leaving Calendar or manually copying links. ## Schema Design Systems Conference Figma opened registration for Schema, its design-systems-focused conference: - Programming is available virtually and in person. - In-person sessions are planned for New York, Tokyo, and London. - The event brings together design-systems leaders and practitioners to share ideas and improve their systems. ## More Than 300 New Templates Figma and FigJam added hundreds of templates organized by role and use case, helping teams start projects more quickly. Examples include: - Brand guidelines for documenting a brand’s visual source of truth - Product development roadmaps for moving features from idea to execution - Team meeting agendas - Roadmap planning, SWOT analysis, and design critique activities These updates make Figma more practical for collaborative meetings while giving design-system teams greater control over reusable components.

Read original(opens in new tab)
Design SystemsFigmaFigjamComponent Properties+3
figma3 min readCurated summary

Collaboration’s next chapter with Microsoft’s Jon Friedman | Figma Blog

Figma’s integration with Microsoft Teams reflects a broader shift toward seamless, hybrid collaboration across design, communication, and productivity tools. Jon Friedman argues that distributed work expands access to global talent, while collaborative platforms give teams more equal participation and reduce duplicated effort. However, in-person interaction remains valuable for rich social connection, and adopting collaborative systems requires significant cultural change. ## Hybrid Work and Global Talent - The pandemic accelerated Microsoft’s existing shift toward a more globally distributed workforce. - Strong talent exists far beyond company headquarters, including locations such as India, China, Atlanta, and Norway. - Remote work makes it possible to promote and support high-impact employees without requiring relocation. - Microsoft’s earlier experiments with remote-work practices helped the company transition more effectively during the pandemic. ## Collaboration Tools and the Role of In-Person Work - Tools such as Microsoft Teams and Figma can sometimes enable more effective collaboration than in-person meetings. - Digital tools are relatively non-hierarchical, allowing people to participate with a stronger and more equal voice. - The next challenge is determining when in-person interaction is genuinely useful rather than assuming it should be the default. - Virtual work can support spontaneous interaction, but face-to-face meetings provide richer social signals, including body language, appearance, and mannerisms. - In-person experiences remain important for building human connection and shared rituals. ## Design Systems as Creative Infrastructure - Moving from individual contribution to collaboration-first work can require a multi-year cultural transformation. - Friedman initially worried that design systems might restrict designers who enjoy controlling every detail. - Instead, designers embraced the idea because shared systems allow them to avoid reinventing established solutions. - A strong design system is not primarily about enforcing rules; it frees creators to focus on more important problems while maintaining coherence. - Reusable tools and patterns provide a foundation for better, more ambitious work. ## Integrated Tool Chains - Using Figma alongside Teams’ chat and video capabilities allows teams to design, discuss, and iterate in the same ecosystem. - Collaboration can happen synchronously or asynchronously, with fewer barriers between creating and communicating. - Teams also benefits from enabling third-party companies to build on its platform. - Combining Microsoft’s communication infrastructure with Figma’s collaborative design environment supports Microsoft’s broader goal of becoming a company that builds together. The practical recommendation is to treat collaboration tools and design systems as cultural infrastructure, not merely software purchases. Organizations should combine flexible remote practices with intentional in-person interaction and use shared systems to give teams more time for meaningful creative work.

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

What’s new in Figma: July 2022 | Figma Blog

Figma’s July 2022 updates focus on strengthening collaboration, expanding global support, and making community resources easier to discover. The company introduced research on effective teamwork, launched a fully localized Japanese experience, and redesigned Figma Community browsing and search. Together, these changes aim to help teams collaborate more effectively and find useful resources faster. ## Research on Effective Collaboration - Figma studied more than 100 teams composed of designers, product managers, engineers, researchers, and writers. - The resulting report, *What Makes Collaboration Click?*, identifies five behaviors associated with better product outcomes: - Co-creation - Rapport - Role clarity - Feedback - Reflection - Figma also announced a livestream featuring product research leaders Cristen Torrey and Andrew Hogan to discuss the findings. ## Figma Expands in Japan - Figma launched a fully localized Japanese product interface, website, and help center. - The company opened a Tokyo office and hired local leadership to support Japanese users and the regional Figma Community. - The expansion reflects Figma’s international user base, with 80% of users located outside the United States. - Figma also introduced the Japanese-focused social account **@FigmaJapan**. ## Improving Figma Community Discovery - Figma redesigned Community browsing to help users navigate its large collection of shared resources. - Users can now more easily distinguish among: - Figma and FigJam products - Use cases such as design systems - Resource types such as files, templates, widgets, and plugins - Search received expanded filtering and sorting options. - Results can be sorted by trending, most popular, or most recent resources. - The changes are intended to make creators’ contributions more discoverable and help users find relevant assets more quickly. Figma’s July improvements combine better collaboration guidance with practical product changes, particularly stronger international support and more efficient Community search and discovery.

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

Illuminating dark mode | Figma Blog

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability. ## Accessibility and User Demand - Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work. - It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible. - The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic. - Figma shipped dark mode in May 2022 after months of product, design, and engineering work. ## The Complexities of Color - The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved. - Figma wanted a solution that: - Made new features support dark mode by default. - Simplified onboarding for engineers. - Reduced regressions when experimenting with themes. - Could support additional themes in Figma and FigJam. - Some decisions were straightforward: - Light editor panels would become dark. - Text and icons would become light foreground elements. - Toolbars and menus already dark in light mode would remain dark. - Other questions required product decisions: - Which parts of Figma should support dark mode? - Should user-created canvas content, such as the canvas background, change with the theme? - Should colors rendered by the C++ editor engine, including the transparency grid, also change? ## Auditing the Product Surface - Before coding began, team members audited Figma’s UI to estimate the work required for each surface. - The project involved far more than the main editor: - Modals - Panels - Toolbars - Dropdowns and submodals - Hidden states and complex edge cases - Each surface needed its full range of views and states considered, not just its most commonly seen appearance. ## Building a Systematic Approach - At kickoff, ten product engineering teams owned major parts of Figma’s interface. - Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces. - The team recognized that a small central engineering group could not manually handle every component and state. - This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development. Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.

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

A look back at Config 2022 | Figma Blog

Config 2022 brought together more than 100 speakers for 24 hours of talks on ambitious, urgent design work. The event covered topics ranging from Web3 and research strategy to design systems and emerging technologies. A central message was that designers can create meaningful local or global change by designing more inclusively and acting with urgency. ## Designing for Different Digital Experiences - Yuan Qing Lim discussed designing for Chinese users who moved directly from limited PC use to widespread mobile internet. - Three themes shaped the discussion: - **“More is More”**: Chinese digital products often embrace rich, maximalist experiences. - **Super apps**: Users expect broad functionality within unified platforms. - **Community**: Digital experiences should reflect strong social and communal behaviors. - The goal is to better serve China’s roughly 1 billion internet users by accounting for local expectations rather than applying Western design assumptions. ## Designing for New Internet Users - Rahul Goradia focused on people who are new to the internet, a group often overlooked by mainstream UX practices. - This population is especially significant in India, where internet access is expected to grow rapidly. - Designers should use usability testing to make e-commerce approachable for newcomers. - Products must account for changing behaviors, particularly as users adapt to a post-pandemic digital environment. ## A Broad Program of Design Topics - Other Config 2022 sessions explored: - Decentralizing design through Web3 - Turning research findings into strategy and product development - Design systems and their limitations - UX writing and product copy - Design tokens and collaboration - Dark-mode implementation - Multi-platform design systems - Designing super apps for Southeast Asia’s cultural diversity The event’s practical takeaway is to design for a wider range of users, challenge assumptions about “standard” digital behavior, and use research and collaboration to make products more accessible and effective.

Read original(opens in new tab)
Design SystemsFigmaUser ExperienceDesign Tokens+4
figma2 min readCurated summary

Config 2022: Thinking big and acting with urgency | Figma Blog

Figma’s Config 2022 centered on the idea that designers and builders can influence major global and local challenges by thinking bigger and acting urgently. The 24-hour event brought together 100 speakers for 68 talks, while Figma introduced a broad set of product updates aimed at improving responsive design, collaboration, prototyping, and workflow integration. ## Config’s Broader Mission - Config connected a global design community spanning nearly every country. - Dylan Field argued that creatives are not powerless in the face of issues such as economic inequality and climate change. - The event encouraged attendees to use design and technology to create meaningful change, locally and globally. ## Expanded Design and Prototyping Capabilities - **Dark mode** became available on Figma’s desktop and web applications. - **Redesigned auto layout** added more intuitive responsive-design controls, including absolute positioning and negative spacing. - **Variable font support** enabled more expressive and optimized typography. - **Spring animations** allowed designers to create more natural transitions in prototypes. - **Individual strokes** made it possible to customize borders on specific sides of four-sided shapes. - **Updated outlines** exposed hidden objects and bounding boxes across the canvas. ## More Flexible Design Systems - **Component properties** reduced the need for excessive variants. - The feature also improved alignment between design systems and implementation code, supporting smoother developer handoff. - **Review states** enabled teams to approve changes, request revisions, and provide contextual feedback through branching. ## Collaboration and Workflow Integrations - **Spotlight** allowed participants in multiplayer sessions to direct everyone’s attention to a specific collaborator. - New **FigJam widgets** connected collaborative ideas with execution tools: - Jira - Asana - GitHub - Additional FigJam widgets included greeting cards and voice memos for team celebrations. - **International keyboard shortcuts**, initially in beta, improved shortcut support for German, Japanese, and French keyboards. ## Sharing and File Management - **Password protection** gave file owners more control over who could access shared files. - **Favoriting files** made frequently used documents easier to find and access. Figma positioned these updates as tools for making design work more responsive, collaborative, inclusive, and connected to broader product-development workflows. Teams can benefit most by adopting the features that strengthen their design systems, review processes, and collaboration practices.

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

Figma Community Awards 2022 | Figma Blog

Figma introduced its first-ever Community Awards to recognize the plugins, widgets, templates, UI kits, and other resources that help designers collaborate and work more efficiently. With more than 1,600 resources published daily, the awards highlight how the community builds practical and creative tools for Figma and FigJam. Winners were selected through community nominations and voting, then announced at Config. ## Purpose of the Awards - The awards celebrate community members who “imagine, design, and build” together. - Recognized resources support workflows ranging from accessibility and UI design to workshops, ideation, and team bonding. - The program included ten award categories. ## 2022 Award Winners - **Plugin for extending Figma’s utility:** *Similayer* by Dave Williames, for selecting similar layers using multiple properties. - **Plugin for adding content:** *Content Reel* by Eugene Gavriloff and Microsoft, offering reusable text, images, and icons. - **Widget for teams:** *FigJenda* by PG Gonni, an interactive workshop and meeting agenda compatible with the FigJam timer. - **Widget for utility or fun:** *Rock Paper Scissors* by Alex Einarsson. - **Team bonding template:** *Remote Design Sprint* by Miranda Mazzara, Danila Gallardo, and Aerolab. - **Ideation template:** *Customer Journey Map* by Fuad Aslan. - **UI kit:** *Ant Design Open Source* by Mr Biscuit and Vinh Bui, an open-source design system. - **Icon set:** *css.gg* by Lona and Astrit, containing more than 700 CSS, SVG, and Figma icons. - **Educational resource:** *Micro interactions - Prototyping* by Rusmir Arnautovic. - **Graphic resource:** *Sketch Elements Brushes Set* by Streamline. ## How the Awards Worked - Community members could nominate resources through Figma Community profiles. - Nominations were open from April 14–22, followed by finalist announcements on May 2. - Voting took place from May 2–10. - Each resource could be nominated only once, but users could nominate as many different files, plugins, or widgets as they wished. - Nomination totals were kept private to preserve fairness. ## Recognition for Creators - Winners were honored during the awards ceremony at Config on May 11. - They received a physical Figma Community Award and Figma merchandise. - Creators were encouraged to promote their resources and use **#FigmaCommunityAwards**. The awards demonstrate how central community-created resources are to the Figma ecosystem. Designers were encouraged both to recognize tools that improve their work and to publish their own resources for others to discover and use.

Read original(opens in new tab)
Design SystemsFigmaPrototypingFigjam+4
figma3 min readCurated summary

Little Big Updates: fixes and features for a better workflow | Figma Blog

Figma’s “Little Big Updates” introduces 32 small but meaningful improvements aimed at making Figma and FigJam faster, more accessible, and easier to navigate. The updates cover text editing, keyboard shortcuts, component publishing, libraries, exporting, and FigJam collaboration. Together, they streamline common workflows and reduce friction for designers and teams. ## Faster Editing and Accessibility - Text editing is up to 10 times faster in Figma and FigJam. - macOS accent-menu support is available by long-pressing letters. - HEIC image uploads are supported, making it easier to use iPhone photos. - Bullets remain consistent across mixed text styles. - Home and End keys navigate to the beginning or end of text areas. - External-link interstitials have been removed to preserve workflow continuity. - Retina screenshots pasted from Chrome will use the correct dimensions. - Text highlights on blue FigJam backgrounds are now more visible. ## Canvas Navigation and Keyboard Shortcuts - `⌘L`/`Ctrl+L` copies links to files and selected frames in the desktop app. - `⌘R`/`Ctrl+R` renames elements while the interface is hidden. - Holding `⌘`/`Ctrl` while clicking selects top-level frames directly. - Quick actions (`⌘+/` or `Ctrl+/`) can show or hide the FigJam UI. - Quick actions can also unlock all objects. - Hovering over the FigJam toolbar reveals additional keyboard shortcuts. - Connector text now supports new lines with Return or Enter. - Objects continue snapping to the grid while being dragged. ## Design Tools and Components - Vector network regions can be filled with different colors. - Components and instances can be searched when inserting (`Shift+I`) or swapping. - Any component can be published via its right-click menu. - Components can be searched in the publishing modal. - Published files now have a distinct icon for easier identification. - Invalid components can be located directly from the publishing modal. - The publishing modal allows users to choose which components appear in the asset list. - Unpublished changes can be published directly from the relevant interface. - A “Return to instance” option is available when selecting a main component. - SVG strokes on parent objects export correctly. - Libraries can be accessed directly from organization subscription settings. ## FigJam Improvements - FigJam shapes support more flexible resizing. - Right-clicking an element copies a direct link to it. - Stamps can be dragged directly from the stamp wheel. - The red shape color is now a truer red. - Team libraries are prioritized in the library-selection modal. - Connector text editing is simpler with standard Return or Enter behavior. The updates demonstrate how incremental improvements to shortcuts, performance, publishing, and collaboration can substantially improve everyday workflows. Designers and teams can explore the changes through Figma’s accompanying Community file.

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

What’s new in Figma: October 2021 | Figma Blog

Figma’s October 2021 updates focus on making collaboration more flexible, prototyping faster, and design work easier to scale. FigJam gained widgets, plugins, templates, code blocks, advanced shapes, and open sessions, while Figma introduced interactive components and several workflow improvements. Together, these features aim to balance structured teamwork with experimentation and spontaneous collaboration. ## Work Better Together in FigJam - **Widgets** can be added directly to FigJam files to support activities such as: - Taking team selfies with Photo Booth - Checking team sentiment with Alignment Scale - Mapping organizational structures with Org Chart - **Plugins** help users develop and synthesize ideas more efficiently: - Tour Guide turns jam boards into slideshow presentations. - Color Picker expands color options for stickies and shapes. - Unsplash provides access to image libraries. - The FigJam toolbar now provides access to: - Plugins and widgets - Templates for brainstorming, workshops, research, and other activities - Code blocks and new shapes for technical collaboration - **Open sessions** allow visitors to join FigJam files without creating an account. ## Bring Designs to Life with Interactive Components - **Interactive components** create reusable interactive elements, reducing the amount of manual prototyping required. - Designers can experiment and iterate more quickly while collaborating with their teams. - Interactions inherited from main components are hidden on instances, making complex prototypes easier to understand and edit. - Additional prototyping improvements include: - `Shift + E` to switch between Design and Prototype tabs - Canvas visibility for interactions, allowing everyone to inspect and explore them - An option to disable keyboard navigation in prototype viewers for more realistic user testing - Copying and pasting prototype interactions to reduce repetitive work ## Explore and Design at Scale - Figma emphasizes supporting design systems while still leaving room for experimentation and new ideas. - The update introduces **branching**, presented as a way to help teams manage and explore design-system work at scale.

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

Interactive components: Less wiring, more inspiring | Figma | Figma Blog

Figma’s October 2021 update introduces interactive components as a way to bring reusable interactions and animations directly into the design workflow. By reducing manual prototype wiring and the number of required frames, the feature helps teams create, iterate on, and share more realistic prototypes. Additional improvements make switching between design and prototyping, managing complex canvases, and reusing interactions faster. ## Interactive Components - Interactive components let designers define interactions and animations between variants in a component set. - Component instances become immediately interactive in prototyping mode. - A single frame can replace many frames for states such as: - Multiple selected checkboxes - Open accordion menus - Button hover states - Teams reported prototype frame reductions of up to 10 times. - Designers can edit component states beside where the component is used and duplicate versions to explore alternatives. - Interactive components can be distributed through shared libraries, allowing teams to reuse preconfigured interactions with one click. - Figma improved performance, load times, stability, observation mode, and auto layout support after the beta period. ## Faster Prototyping Workflows - The shortcut **Shift + E** toggles between the Design and Prototype tabs without losing context. - Interactions inherited by instances from main components are hidden on the canvas, reducing visual clutter from numerous blue prototype arrows, or “noodles.” - Prototype interactions can be copied and pasted into frames, reducing repetitive setup work. ## Broader Impact on Design Teams - Interactive components narrow the gap between visual design and interactive behavior. - Reusable interactions help designers focus on user flows instead of manually wiring repeated states. - Shared libraries make it easier for less experienced Figma users to build functional prototypes. - The feature also supports more experimental prototypes, including animated objects, music notation, and interactive games or toys. Figma’s recommendation is to use interactive components and its playground file to make prototyping a more integrated, reusable, and iterative part of the design process.

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

How Elsewhen builds digital products for their clients | Figma Blog

Elsewhen, a UK-based digital product consultancy, uses Figma as a collaborative workspace throughout the product-development process—not just for final designs. Its partnerships with Spotify and Inmarsat show how shared tools, reusable assets, and structured collaboration can reduce operational friction while supporting creativity and faster delivery. ## Improving Design Productivity at Spotify - Spotify wanted to measure and improve designer productivity without reducing creative quality. - Rather than counting screens, components, or hours spent, Spotify and Elsewhen focused on identifying workflow obstacles and opportunities for improvement. - They created the **Design Productivity Blueprint**, an open-source Figma file containing: - Workshops - Interview templates - Frameworks for analyzing design-team workflows - The goal is to help designers spend less time on routine work and more time exploring and solving problems creatively. ## Creating a Design System for Inmarsat - Inmarsat’s distributed workforce and reliance on external design agencies made collaboration difficult. - Designers and developers lacked a shared source of truth for components, files, and assets. - Designers frequently rebuilt common components from scratch, slowing product development and making onboarding harder. - Elsewhen created Inmarsat’s first Figma-based design system using an existing self-service portal project as its foundation. - The system established reusable standards for: - Typography - Buttons - Icons - Grids - Other common interface components - Centralizing these assets allowed internal teams, developers, and partner agencies to access the same resources and build products more quickly. ## Figma as a Collaborative Home Base - Elsewhen uses Figma across exploration, workshops, prototyping, and client collaboration. - Real-time access removes routine steps such as exporting, uploading, and distributing design assets. - Shared files and component libraries improve communication between consultants, clients, designers, and developers. - The broader lesson is that better collaboration systems can improve both productivity and the quality of creative work. Elsewhen’s work suggests that organizations should treat design tools as shared operational infrastructure. Establishing common workflows, reusable components, and accessible sources of truth can help teams reduce duplication, onboard faster, and deliver stronger products.

Read original(opens in new tab)
Design SystemsFigmaPrototypingCollaborative Design+2