techlist.io
KREN

Design Systems

252 posts

figma3 min readCurated summary

Automate work. Bring in data. Extend what’s possible with Figma Plugins. | Figma Blog

Figma introduced plugins to make the platform more extensible, reliable, and accessible to both designers and developers. The goal was to let anyone with basic HTML and JavaScript skills build tools that automate repetitive work, bring real-world content into designs, and address needs such as accessibility. After six weeks of beta testing, more than 40 community plugins were publicly available, with private distribution also supported for organization customers. ## Why Figma Built a Plugin Platform - Designers already depended on plugins, but many were unreliable or insecure because they used unsupported APIs. - Designers without coding skills had to wait for someone else—or for engineering resources—to build the tools they needed. - Figma designed its plugin architecture to be: - Secure - Stable - Performant - Familiar to web developers - The company’s guiding idea was that anyone who could build a basic webpage should be able to create a Figma plugin. - Building a plugin system for a web-based design tool required significant architectural investment, intended to encourage more creators and experimentation. ## Plugin Availability and Distribution - Plugins became available to the entire Figma community after the beta. - Users could browse plugins within Figma and install them with one click. - Plugins could be launched from a design file’s right-click menu. - Figma Organization customers could: - Build private plugins - Distribute them across their company - Curate approved plugins - Install plugins on behalf of users ## Utility Plugins for Repetitive Tasks - **Similayer**, created by David Williames, selects layers with similar properties so designers can edit them in batches. - **Super Tidy**, created by Ismael González-Nicolás, renames frames and reorganizes them in the layers list. - These tools reduce manual “pixel-pushing” and help designers keep files organized. ## Generative Plugins for Content and Visuals - **Unsplash** lets designers insert Unsplash images directly into Figma files. - **Content Reel**, created by Microsoft, populates designs with searchable text, avatars, and icons. - These plugins help designers work with more realistic and contextual content instead of placeholders. ## Accessibility Plugins - **Contrast Checker**, from Stark, checks whether colors, visuals, and typography have sufficient contrast and readability. - **Color Blind**, created by Sam Mason de Caires, previews designs through eight types of color vision deficiency. - Together, these plugins help designers identify accessibility problems that may otherwise be difficult to notice. Figma’s plugin launch positioned extensibility as a core part of the product: designers could automate workflows, use realistic content, improve accessibility, and create custom tools instead of waiting for platform features or engineering support.

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

Behind the Plugins: Yitong Zhang, Product Designer @ Coinbase | Figma Blog

Yitong Zhang, a product designer at Coinbase, discusses how design can shape product strategy and address problems earlier in development. He is building a Figma plugin that quickly connects objects with lines to create user flows. His broader view is that designers should move beyond execution, contribute to defining problems, and focus increasingly on systems, strategy, and ethical outcomes. ## Building an Auto Flow Plugin - Zhang’s plugin uses the Figma API to connect any two objects with a line. - The goal is to make drawing user flows faster and easier. - He chose Figma because he enjoys the platform, considers its API strong, and sees Figma as the future of collaborative design. ## From Founder to Product Designer - Zhang entered technology as a startup founder who handled many different responsibilities. - After the startup failed, he pursued design work to support himself. - Design appealed to him because it preserved his favorite part of founding a company: imagining useful products into existence. - His prior experience with design tools came partly from creating anime fan art. ## Design as a Strategic Partner - Zhang is proud that Coinbase moved design beyond simply executing product requirements documents. - Designers now participate as equal partners in shaping product strategy. - He argues that designers should help define the problems they are asked to solve. - Strong execution cannot compensate for a fundamentally bad problem statement. - Early design involvement can lead to more effective, ethical, and impactful products. ## The Future of the Design Industry - Product designers will spend less time on pixel-level production. - Their work will increasingly involve system building and strategic definition. - Brand design is likely to become more distinct and important as technology companies recognize brand as a competitive advantage. - Zhang finds inspiration outside technology, recently looking to architecture for ideas about systems-level design. Designers can increase their impact by joining product discussions early, helping frame the right problems, and developing skills in systems thinking and strategy—not just visual execution.

Read original(opens in new tab)
Design SystemsFigmaProduct DesignPlugins+1
figma2 min readCurated summary

A step-by-step guide to using Figma for retrospectives | Figma Blog

Figma can make agile retrospectives more inclusive and collaborative than a traditional whiteboard. Its multiplayer editing, comments, components, and remote-friendly workflow let everyone contribute simultaneously and clearly. The article recommends using retrospectives as both a practical meeting format and a low-pressure way to introduce a team to Figma. ## Sharing and Permissions - Create a Figma file or duplicate the provided retrospective template. - Use the blue **Share** button to invite teammates by email or generate a link. - Ensure anyone with the link has editing permission if the whole team should participate. ## Organizing Feedback with Frames - Divide the canvas into three frames: - What should we continue doing - What should we stop doing - What should we start doing - Apply constraints to headers, backgrounds, and other child elements. - When a frame is resized to provide more writing space, constrained elements adjust automatically. ## Using Sticky Note Components - Provide sticky note components so participants can quickly add feedback. - Duplicate notes with **Command + D** or by holding **Option/Alt** while dragging. - Component instances support overrides, allowing users to change text, colors, and effects without altering the master component. - Multiplayer cursors and shared visibility make the process engaging for in-person and remote participants. - Remote teammates can follow the discussion directly in the file instead of relying on a camera pointed at a physical whiteboard. ## Customizing the Template - Add the company logo and customize Figma styles with brand colors. - Create components for common interactions, such as “+1” markers for agreement or items needing further discussion. - Design themed cover pages when creating a new file for each retrospective. - Export completed frames for documentation or sharing. Figma’s collaborative canvas provides a flexible alternative to physical whiteboards, especially for distributed teams. Starting with the template and adapting its frames, components, and visual styling can make retrospectives more accessible while encouraging broader adoption of Figma.

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

What’s new on DesignSystems.com: June roundup | Figma Blog

DesignSystems.com’s June 2019 roundup highlights the growing depth and diversity of design-systems practice. The featured articles cover icon creation, agency collaboration, accessible React architecture, and white-label customization. Together, they show how design systems can support consistency while remaining adaptable to different products, teams, and users. ## Iconography from Creation to Handoff - Bonnie Kate Wolf’s guide explains how to create, organize, and implement icons within a design system. - Topics include: - Strokes and fills - Boolean operations - Icon organization - Preparing assets for developer handoff - The guide is intended for both beginners and experienced icon designers. ## Building Design Systems with Clients - Instrument shares an agency perspective based on work with companies such as Nike, Google, Airbnb, Sonos, and LinkedIn. - The agency emphasizes complete, scalable systems rather than one-off design solutions. - Its process depends on close collaboration with clients to establish a shared understanding of: - What a design system should provide - How reusable components will work - How the system can support multiple applications ## Accessible React Containers - Zendesk’s Garden design system introduced “containers” to share keyboard and accessibility behavior across React components. - These containers: - Render no user interface - Handle keyboard and mouse interactions - Support right-to-left layouts - The new open-source `react-containers` library separates these behaviors from Garden’s styling package. - The containers were rewritten to be smaller, more efficient, and more closely aligned with WAI-ARIA Authoring Practices 1.1. ## White-Labeling and User Customization - Dawn Labs developed a system that lets third-party users customize an application while preserving overall consistency. - Its implementation combines: - `styled-components` - `styled-system` - A GraphQL backend - Because users needed more control, the team created a styling escape hatch using global CSS injection and CSS variables. - This approach allows end users to customize the interface without requiring intervention from the original client. The roundup demonstrates that effective design systems must balance structure with flexibility. Teams can use shared standards, accessible component patterns, and controlled customization to create systems that scale across products and audiences.

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

What's new in Figma recap | Figma Blog

Figma’s spring 2019 updates focused on making everyday design work faster and more scalable. The biggest improvements expanded component workflows and introduced the public beta of the plugin API, enabling the community to build custom tools. The company also highlighted bug fixes and broader product refinements released over the previous three months. ## Component Improvements for Design Systems - Users can select multiple objects and convert them into Components in a single action. - Right-clicking a component instance now reveals related Components in the context menu, making swaps easier. - The **Return to Instance** button lets designers jump to a master component for reference or editing, then return to the instance they were working on. - For local components, instance overrides can be pushed back to the master component, supporting faster iteration and maintenance. ## Public Beta of the Plugin API - Figma launched the public beta of its plugin API after extensive development. - Early community experiments demonstrated how plugins could extend Figma beyond its built-in features. - Examples included: - Generative design tools that repeat text elements radially. - Image-analysis plugins that extract color palettes from selected images. - The strong early response suggested that plugins could support highly specialized creative workflows. ## Quality and Workflow Improvements - Figma dedicated a “quality week” to addressing and fixing a large number of bugs. - The spring release cycle also included rapid improvements to features such as Smart Selection and other frequently used tools. Figma’s spring updates strengthened its core component system while opening the platform to community-built extensions. Designers working with reusable systems could benefit from the component workflow improvements immediately, while the plugin beta offered a foundation for more customized and experimental processes.

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

Looking to improve your Figma workflow? Check out our updated user forum | Figma Blog

Figma relaunched its online forum to help designers learn from one another on subjective, workflow-specific topics that traditional support articles cannot fully address. The updated community introduces clearer channels, new programming such as AMAs and livestreams, and revised guidelines. Bug reports and feature requests are being moved to Figma’s support platform for more focused, private follow-up. ## A More Focused Community Structure - New and renamed channels organize discussions around specific areas of design practice. - The **Design Systems** channel supports conversations about libraries, best practices, and team processes. - Additional channels cover **Prototyping**, **API and Extensions**, and **Workflow and Process**. - **Open Design** lets users share work, request feedback, and find collaborators. - A **Start Here** channel explains the forum structure, guidelines, and code of conduct. ## Moving Support Issues to the Support Platform - Bug reports and feature requests will no longer be handled in the forum. - Figma’s support platform allows one-to-one troubleshooting and the sharing of files or account information that should not be posted publicly. - Support staff can tag and route issues internally. - The support team meets weekly with product and engineering teams to discuss bugs and feature priorities. Figma encourages users to use the relaunched forum to connect, exchange workflow advice, share projects, and learn collaboratively, while directing technical issues and product requests through official support channels.

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

GitHub takes its collaborative culture to a new level | Figma Blog

GitHub adopted Figma to make its design system more collaborative, scalable, and accessible—especially for its distributed workforce. What began as a grassroots effort to standardize design evolved into a dedicated seven-person team and a largely Figma-based workflow. Figma’s browser-based collaboration and API helped GitHub remove tooling barriers, streamline contributions, and bring designers and engineers closer together. ## Building a Dedicated Design Systems Team - In 2015, GitHub lacked staff dedicated full-time to its design system. - Designers repeatedly recreated components, worked with outdated patterns, and lacked consistent documentation. - A grassroots initiative began improving the process and documented workflow. - Within six months, GitHub formed a permanent design systems team. - By 2019, seven of the company’s 25 product designers focused on reusable, interchangeable components. ## Removing Friction from the Design Workflow - Maintaining the design system initially required specialized software and knowledge of complex tools. - Contributors found it difficult to update shared assets such as GitHub’s Octicons SVG icon library. - GitHub tested Figma because it eliminated the need to install desktop software. - Combining Figma with its API enabled an automated, platform-independent contribution workflow. - The design systems team subsequently migrated UI components into Figma, making most design and development resources available in one place. ## Turning Figma into a Remote Collaboration Hub - Figma’s web-based workspace helped GitHub’s remote employees collaborate despite being in different locations. - Designers could work simultaneously in the same file, effectively replacing the physical whiteboard. - Shared design sessions and “design jams” helped ideas gain momentum and encouraged experimentation. - Prototyping became easier because designers could create and adjust flows without switching tools. - GitHub viewed Figma as a natural fit because both products emphasize collaboration between designers and engineers. ## Faster Feedback and More Connected Teams - Figma lowered the barrier for people outside design to participate in the feedback process. - Real-time collaboration helped distributed teams communicate more directly. - By consolidating components, prototypes, and design discussions, GitHub could support more efficient and consistent delivery. GitHub’s experience suggests that a design system works best when its tools make contribution as easy as consumption. For distributed organizations, a browser-based, collaborative platform such as Figma can turn design-system maintenance into a shared engineering and product activity rather than a specialized, isolated process.

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

Reintroducing DesignSystems.com | Figma Blog

Figma relaunched DesignSystems.com as a dedicated resource for people building and maintaining design systems. The site’s new direction is shaped by community feedback and focuses on practical guidance, content for practitioners at every experience level, and a range of perspectives. Figma plans to expand the site regularly through new articles, resources, and community contributions. ## A Community-Informed Relaunch - The redesigned site follows the original launch in May and incorporates feedback from: - Designers - Developers - Content strategists - Design operations managers - Contributors and users represented both large organizations and small, individual teams. ## Three Areas of Focus - **Actionable content** - Articles and resources are intended to provide clear takeaways. - Guidance should be applicable to real design-system work. - **Content for all practitioners and teams** - The site will support beginners as well as experienced design-system professionals. - It will include introductory guides and stories from established teams at companies such as Lyft, Asana, and Harry’s. - **Multiple viewpoints** - Design-system challenges can be approached in different ways. - The site aims to present varied perspectives on similar problems so practitioners can learn from one another. ## Ongoing Community Contributions - Figma describes the relaunch as a starting point rather than a finished product. - Readers are encouraged to: - Share feedback - Submit ideas - Contribute articles or resources - Sign up for site updates The practical recommendation is to use DesignSystems.com as an evolving source of implementation advice and community perspectives, while contributing feedback and experience to help shape its future content.

Read original(opens in new tab)
Design SystemsFigmaComponent LibraryDesign Ops+1
figma2 min readCurated summary

We refreshed Figma's UI: An inside look at our process | Figma Blog

Figma’s 2019 UI refresh aimed to modernize the product without disrupting users. Rather than redesigning its structure, the team focused on visual inconsistencies in typography, layout, color, and iconography, using extensive research and internal discussion to guide decisions. The process began by cataloging problems, then organizing them into broader themes. ## Why Figma Needed a Refresh - The interface had evolved piecemeal as the product expanded. - Teams created custom components when existing patterns no longer fit, producing inconsistent: - Tables, buttons, and input controls - Shades of gray, red, and blue - Visual and interaction patterns - The original UI foundation predated major features such as Multiplayer and Components. - Both users and employees increasingly noticed the inconsistencies. ## Step One: Brainstorming the Problems - Figma held a two-hour session with the entire design team. - Designers explored the product firsthand, documenting quirks, shortcomings, and successful patterns with notes and screenshots. - Findings were collected in a shared Figma file and text document. - Strong group reactions—such as an “oh shit, that’s bad” response—helped identify issues likely to have broad impact. - The team deliberately paused for several days afterward, allowing opinions to settle and new insights to emerge. ## Step Two: Organizing and Synthesizing Findings - The team revisited the brainstorm after the reflection period and debated which problems mattered most. - Designers converted detailed observations into broader post-it themes. For example: - Several notification inconsistencies became “We need a system for how we handle notifications.” - Notes were grouped by similarity, such as: - Color - Legibility - White space - Notifications - This clustering reduced noise and revealed larger systemic issues, including typography, icons, dialogs, toolbars, sharing, layers, components, and file browsing. - Figma found that grouping was useful but overly complex classification was not. - The team abandoned an additional “visual to foundational” axis because it made the framework harder to use. ## Lessons from the Process - A visual refresh often becomes necessary gradually rather than because of one decisive moment. - Broad, understandable categories are more useful than abstract or overly narrow ones. - Time between brainstorming and synthesis helps teams reassess initial reactions. - The refresh prioritized surface-level improvements so users could benefit from a more coherent interface without learning an entirely new product.

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

#FigmaTip Roundup: Spring cleaning edition | Figma Blog

The post presents a set of Figma organization tips framed as “spring cleaning” for design files and systems. It focuses on reducing clutter, improving file discoverability, and making shared libraries easier for teams to navigate. The central recommendation is to use Figma’s built-in naming, sorting, thumbnail, and organizational features regularly. ## Batch Rename Layers - Select multiple layers, right-click, and choose **Rename**, or use `Command + R`. - Rename layers uniformly, add numerical suffixes or prefixes, or replace parts of existing names. - Regular expressions provide more advanced naming control. - This is especially useful for cleaning up large projects with duplicated or inconsistently named layers. ## Create Custom File Thumbnails - Add a new page at the top of the page list and create a single **640×320** frame. - Use the frame to display a title, description, images, project status, or version information. - Match the frame and canvas background colors for a clean thumbnail. - Custom thumbnails make files easier to scan and identify in the file browser. ## Sort and Review Files - Use the file browser’s sorting options to find clutter. - Sort by **File Name** to locate unnecessary files, including those still named “Untitled.” - Sort by **Date Created** or **Last Modified** to identify outdated or inactive work. ## Clean Up Team Libraries - Review components for redundancy, outdated elements, or items that no longer serve the team. - Remove components by opening the Components tab, right-clicking an item, and selecting **Remove from Library**. - Components can also be hidden from the library by adding a period (`.`) or underscore (`_`) to the beginning of their names. ## Organize Components with Frames and Pages - Use frames and pages to group components and design-system elements into meaningful collections. - This reduces reliance on long names separated by forward slashes. - A clearer structure makes shared libraries easier for teammates to browse and maintain. Regularly applying these techniques can keep Figma files, layers, and libraries manageable as projects grow, improving both individual workflows and team collaboration.

Read original(opens in new tab)
Design SystemsFigmaComponent LibrariesRegular Expressions+1
figma3 min readCurated summary

Pairing is the key to evangelizing your design system | Figma Blog

A successful design system depends on relationships and culture, not just tools, documentation, or component libraries. Robin Rendle argues that pairing directly with designers is the most effective way to build trust, discover system problems, and encourage adoption. Working together turns the system team from a source of criticism into a practical partner that helps teams move faster. ## Treat the Design System as a Cultural Project - Early efforts focused on creating a UI kit and component library, assuming better tools would solve inconsistency. - The author learned that design systems reflect relationships between designers, engineers, product managers, and customers. - Gusto complemented its technical work with: - A Slack channel for questions and feedback - Design system office hours - An introductory UI kit for new employees - These initiatives helped, but pairing proved more effective because it involved working directly with people. ## Pairing Is User Research - Side-by-side collaboration reveals: - Which components and patterns are confusing - Where documentation is incomplete - What feels awkward or works well - Which user needs the design system is failing to address - Pairing replaces assumptions with direct observation of how people actually use the system. - Sessions also help the team evaluate whether: - Designers and engineers know the component library exists - They understand current HTML, CSS, and accessibility practices - Components are being explained in terms of organizational benefits - Useful designs should become official reusable patterns - Unlike office hours, pairing reaches people before they necessarily recognize that they need help. ## Pairing Turns Critique into Collaboration - Design system guidance should feel like accelerating someone’s work, not restricting creativity. - New systems are often complex, poorly documented, and full of hidden constraints: - Limited color choices - Existing components that designers may not know about - Accessibility requirements - Technical limitations embedded in the codebase - Simply imposing these rules can make the design system team seem controlling, causing people to ignore documentation or work around the system. - Pairing creates a more productive conversation where the design system team shares institutional knowledge while learning what product teams need. - Both sides benefit: product teams work faster and learn reusable patterns, while the system team gains insight into real-world requirements. ## Pairing Builds Design System Advocates - Designers and engineers who receive direct, helpful guidance are more likely to understand and support the system. - Personal collaboration builds trust and makes adoption feel like an advantage rather than an obligation. - Each pairing session can turn participants into advocates who carry the system’s practices and rationale back to their teams. Design system teams should prioritize pairing as an ongoing form of user research, education, and relationship-building. The strongest systems are not merely documented and enforced; they are developed collaboratively with the people expected to use them.

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

Dribbble Scores with Live Design Collaboration for its Remote Team | Figma Blog

Dribbble adopted Figma to make collaboration feel more like working together in the same room despite its fully remote, globally distributed team. Figma replaced a fragmented collection of tools with a shared, real-time workspace and a single source of truth for designs. The result was faster iteration, clearer feedback, and less time spent managing files and communication. ## Remote Collaboration Challenges - Dribbble’s design team included seven product designers and developers working across multiple time zones. - Remote work helped attract talent and offered flexibility, but made spontaneous collaboration more difficult. - The team relied on video conferencing and several disconnected tools, without a seamless way to work together. - Designers lacked visibility into one another’s work, while file management and multiple feedback channels reduced time available for design. ## Figma as a Shared Design Workspace - Figma allowed multiple people to work in the same file simultaneously, recreating the experience of brainstorming in a room or on a whiteboard. - Online files were easier to find and access, eliminating the need to ask colleagues for the latest version. - Designers could stay within one tool instead of repeatedly switching between applications. - Figma’s handling of vectors, images, and copy-paste attributes also appealed to Dribbble’s designers. - The team eased adoption by importing existing design files and recreating familiar interface components in Figma. ## Faster Pairing and Feedback - Figma supported Dribbble’s practice of using design pairs to solve problems and deliver products quickly. - A single, current file reduced communication friction and kept designers aligned on the latest changes. - Multiplayer editing made it easier to hold frequent critiques, duplicate frames, explore alternatives, and comment in real time. - The team could solve design problems in minutes rather than days; in one example, five people collaboratively produced an approved profile design in about 20 minutes. ## Integration with Dribbble - Dribbble used Figma’s API to build an integration for publishing work directly to Dribbble. - Users can select a layer in Figma and choose **Integrations → Dribbble** to begin the Dribbble desktop upload flow. For fully remote design teams, a shared real-time workspace can replace fragmented collaboration processes. Dribbble’s experience suggests that adopting a single source of truth helps teams communicate more clearly, iterate faster, and spend more time designing.

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

The power of Figma Drafts | Figma Blog

Figma Drafts provide a private space for experimentation before designs are ready for team-wide visibility. Josh Dunsterville argues that separating rough exploration from polished project files reduces fear of judgment and encourages faster, more creative iteration. The central principle is simple: create first, organize and share later. ## Why Drafts Matter - Traditional design workflows often encourage sharing only polished, “presentable” work. - This can lead designers to prioritize tidy files, perfect pixels, grids, and layer names over exploring solutions. - Drafts act as a private personal folder, independent of broader team or project permissions. - Individual draft files can be shared when appropriate, but drafts cannot be opened globally to an entire team. - The concept resembles a physical notebook: informal, incomplete, and free from pressure to look finished. - This environment can also help overcome designer’s block by removing the need to plan every detail before starting. ## Using Drafts for Exploration - Drafts can hold anything from quick app concepts to experiments with Figma features. - Untitled files, rough shapes, default colors, and messy layouts are acceptable. - The key workflow is: **create first, organize second**. - Designers should use drafts to quickly capture and test ideas without worrying about presentation quality. ## Moving Ideas into Projects - When a draft is ready for further development or team collaboration, it can be moved into a project. - Files can be transferred by: - Dragging them into the desired project. - Selecting the “Drafts” location inside the file and choosing a project. - If an idea may be useful later, duplicate the draft before moving it so the original remains as a snapshot. - Drafts can remain the messy source of truth, while project files are cleaned up for broader use. - File-browser filters such as file name, creation date, and last-modified date help manage drafts as they accumulate. Drafts are most valuable when treated as a low-pressure digital notebook rather than a staging area for finished work. Keep early thinking private and messy, then promote only the ideas that merit organization and collaboration.

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

Bulb Shines Bright with Solar as its Design System | Figma Blog

Bulb adopted Figma to create and maintain Solar, a shared design system for its rapidly expanding range of products. The system addressed inconsistencies caused by different agencies, codebases, and design patterns while preserving Bulb’s collaborative culture. By centralizing components and standards in Figma, Bulb enabled designers, developers, researchers, writers, and stakeholders to contribute throughout the design process. ## Building a Consistent Design Function - Bulb’s 13-person design team supports multiple product groups and disciplines. - Its five or six products had originally been designed and built by different agencies. - Although Bulb’s visual brand was cohesive, products contained inconsistent interfaces, codebases, and design patterns. - Establishing a design team from scratch gave Bulb the opportunity to define a unified design system and workflow. ## Collaboration Across Disciplines - Bulb selected Figma because it supported the company’s culture of transparency and collaboration. - Project pods typically include a designer, researcher, content writer, and developer. - Non-designers can access files, suggest changes, and stay informed without requiring permission from a designer. - Engineers and designers use Figma together to discuss designs and verify that work follows shared standards. - Researchers also use Figma for brainstorming, sketching, and prototyping with designers because its interface is accessible to non-designers. ## Creating the Solar Design System - Bulb wanted a single source of truth for design consistency across its products. - Figma team libraries allowed changes to master components and styles to propagate across designs. - The team began by documenting every product page in Figma, creating a visual site map that exposed inconsistencies. - Designers and other collaborators established design principles to evaluate and normalize components such as buttons, checkboxes, and dropdowns. - Standardized patterns were gradually rolled out across eight products. ## Keeping the System Simple - Bulb deliberately limited Solar to a small color palette and a modest set of design patterns. - The team’s guiding principle was to start small and keep the system manageable. - A more complex design system requires more effort to maintain and can undermine consistency. Bulb’s experience suggests that a successful design system depends on both the right collaboration tool and disciplined scope. Organizations should begin with a small, shared set of principles and reusable patterns, then expand only when necessary.

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

Figma Raises $40MM Series C Round led by Sequoia | Figma Blog

Figma announced a $40 million Series C funding round led by Sequoia Capital, with participation from new and existing investors. The funding supports Figma’s mission to make visual design accessible, collaborative, and web-based. The company plans to expand its enterprise offering, improve performance and design-system tools, develop extensibility, and strengthen its global community. ## Funding and Strategic Investors - Sequoia Capital led the round, joined by Coatue, Founders Fund, Jeff Weiner, Mike Krieger, Andrew Wilson, Dan Rose, and existing investors Index, Greylock, and KPCB. - Figma selected investors with experience building enduring companies and communities. - The company highlighted Sequoia’s investments in GitHub and PlanGrid as evidence of relevant expertise. ## Expanding Collaborative Design - Figma argues that productivity software is increasingly becoming collaborative and shared. - Major design teams at Square, Uber, Twitter, and GitHub had adopted Figma. - The new funding will support: - Expansion of Figma Organization, its enterprise offering - Improvements for individual designers and small teams - Continued development of collaborative workflows ## Performance and Design Systems - Despite being viewed as faster than native competitors, Figma sees significant opportunities to improve loading and rendering performance. - With more than one million signups, the company emphasizes delivering a high-quality experience at scale. - A major focus is making Figma the best platform for building and managing design systems. ## Platform Extensibility - Figma is developing platform and extension capabilities to support varied design workflows. - The company is deliberately avoiding a fixed release timeline because extensions must be stable and secure. - Extensibility is presented as essential to making the design process genuinely open. ## Building a Global Community - Around 80% of Figma’s weekly active users were located outside the United States. - The company had 26 user groups in cities ranging from Lagos to Toronto. - Figma planned to improve connections among users worldwide through meetups, local groups, and other community initiatives. - Community is described as a foundation for Figma’s future and a key reason Sequoia was an appealing partner. Figma intended to use the Series C investment not simply to grow the business, but to deepen its collaborative product, improve its technical foundations, and build a global community around accessible design.

Read original(opens in new tab)
Design SystemsFigmaCollaborationDesign Tools+2