figmaJan 25, 2024

Six Myths Holding You Back from Embracing Design Systems | Figma Blog (opens in new tab)

Design systems are not reserved for large companies or teams with advanced design practices. Figma argues that the best system is practical, goal-oriented, and tailored to an organization’s brand, users, and needs—not copied from industry trends or famous examples. By challenging common assumptions, teams can adopt design systems more confidently and incrementally. ## Design Systems Benefit Teams of All Sizes - Small organizations can use design systems to improve efficiency, consistency, and collaboration. - The system’s scale and appearance may vary, but its core purpose remains the same. - Mixpanel’s redesign is cited as an example of using a design system to reduce costs, improve consistency, and make analytics more accessible. ## A Design System Does Not Need Every New Technique - Design trends change constantly, and no single approach is universally correct. - Teams should learn from industry practices without becoming distracted by building a “perfect” or fashionable system. - A useful design system should serve clear organizational goals rather than imitate the latest trends. ## Material Design Is Not a Universal Solution - Google’s Material Design is influential, but it is not automatically suitable for every organization. - Design systems should reflect a company’s brand identity, user needs, and business objectives. - Teams should balance established standards with solutions appropriate to their current context. - Examples such as Uber Base, Spotify Backstage, Pipedrive, Microsoft Teams, and Salesforce Lightning demonstrate that successful systems can differ significantly. ## You Do Not Have to Build Everything From Scratch - The article begins addressing the misconception that every design system must be created internally from the ground up. - Open-source design-system resources and existing UI kits can provide a starting point. - Reusing proven foundations can help teams move faster while adapting components to their own requirements. The practical recommendation is to start with the problems your team needs to solve, then adopt or create only the structure necessary to address them.

material-designdesign-systemsopen-sourcedesign-thinking+3

figmaJan 30, 2023

The Future of Design Systems is Complicated | Figma Blog (opens in new tab)

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.

material-designdesign-systemsopen-sourceaccessibility+1

figmaAug 9, 2020

Explore the Figma Community | Figma Blog (opens in new tab)

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.

material-designfigmadesign-systemsprototyping+2

figmaDec 18, 2018

State of Design Systems 2018 | Figma Blog (opens in new tab)

Figma’s 2018 survey of 499 practitioners shows that design systems were still developing, but were becoming a lasting part of digital product work. Most organizations lacked mature systems or dedicated teams, yet practitioners strongly aspired to more formal, public, and continuously maintained systems. The report also argues that design systems are processes and principles—not merely collections of reusable components. ## Design Systems Were Still in Their Infancy - Two-thirds of respondents described their systems as stage 1 or 2: - Undocumented - Lacking a dedicated maintenance team - 86% wanted to reach stages 3 or 4, involving full-time staff and publicly available systems such as Shopify Polaris. - Speakers at Clarity suggested that design systems would become standard practice, much like responsive design. ## A Dedicated Team Is Not Required - About half of respondents worked at companies with design-system teams, mostly organizations with more than 1,000 employees. - Only one-third believed a dedicated team was necessary. - Smaller teams and individuals can begin incrementally by solving one focused problem, such as establishing consistent line-height rules. - The recommendation was to start small and ship improvements rather than wait for a complete system. ## Systems Usually Follow Existing Products - Only 41% of respondents built a design system alongside a new product. - 52% created one from an existing product, while 7% had experience with both approaches. - Building from a real product can be advantageous because the system addresses actual use cases instead of creating isolated, hypothetical components. - Legacy design can therefore provide a practical foundation for system development. ## Common Design-System Artifacts - Component libraries appeared in 90% of respondents’ systems. - Style guides were included by 83%. - Other commonly mentioned elements included: - Design principles: 57% - Content guidelines: 47% - Code-related resources such as React components, mixin libraries, and design tokens - Only two respondents mentioned linters, highlighting the wide variation in what organizations consider part of a design system. ## A Design System Is More Than Its Artifacts - The most common misconception was treating a design system as a static collection of pattern libraries. - A complete system also includes: - Processes - Guidelines - Principles - Design philosophies - Documentation - Component libraries are outputs of the system, not the system itself. - Without documentation explaining the reasoning behind components and how to use them, even a technically strong system can fail. A practical approach is to begin with a small, real product problem, document the principles behind the solution, and grow the system iteratively rather than waiting for a dedicated team or a fully formed library.

material-designdesign-systemsatomic-designcomponent-libraries+2

figmaSep 26, 2018

Multiplayer, IRL | Figma Blog (opens in new tab)

Figma launched Local Communities to help designers connect, learn, and collaborate in person after successful Design System Meetups across eight cities and four continents. The initiative began with groups in more than 20 cities, supported by regional Designer Advocates who gather feedback and help organize events. Figma’s goal is to build communities around members’ real local needs—not just product tips and workflows. ## From Meetups to Local Communities - Design System Meetups sparked deeper conversations about: - Running effective design critiques - Open design culture - Everyday challenges and successes - New professional partnerships - The events showed Figma that its community wanted more opportunities for in-person connection. - Local Communities launched in cities including Accra, Amsterdam, Berlin, Boston, Copenhagen, Lagos, London, New York, San Francisco, Seattle, and Tel Aviv. ## A Community Shaped by Local Needs - Cities were selected based on factors such as: - Existing Figma evangelists and meetup organizers - Concentrations of Figma users - Geographic diversity - Communities are intended to support learning, networking, and sharing beyond basic Figma instruction. - Members can suggest workshops, pitch events, or request a new community in their city through an online form. ## Regional Designer Advocates Figma created three Designer Advocate roles to support communities across different regions and time zones: - **Tom Lowry — North America** - Previously a senior UX designer at OpenText. - Created Figma tutorials, component architecture guidance, and the Material Design resource kit. - Also taught an online course about building design portfolios. - **Zach Grosser — Europe** - Former communications designer at Square, where he created executive presentations and the IPO roadshow deck. - Introduced Figma to Square’s design team in 2013. - Joined Figma to support design education after becoming an early product adviser and moving to Amsterdam. - **Namnso Ukpanah — Africa** - Organized a Lagos design systems meetup that attracted more than 300 designers and developers. - Helped onboard 21 Figma ambassadors across 11 cities and seven countries. - Continued this community work while serving as lead designer at Hotels.ng. ## Community Participation - Designer Advocates act as Figma’s local representatives and help turn community ideas into events. - Figma encouraged members to propose topics such as: - Hiring diverse design teams - Speed networking for freelancers and organizations - Workshops and other city-specific events - The program remained open-ended, with Figma relying on local participants to identify what their communities needed most. Figma’s recommendation is to participate actively: share ideas, propose events, or help establish a Local Community where one does not yet exist.

material-designfigmadesign-systemsui-ux+1

figmaMay 9, 2018

Material Design + Figma Styles = 🔥 | Figma Blog (opens in new tab)

Figma’s Styles feature makes Material Design easier to customize for different brands while preserving a shared, systematic foundation. The article presents a Material UI kit that uses global styles and nested components to theme colors, typography, elevation, grids, shapes, and icons across an entire design system. This approach helps teams move beyond generic stock interfaces toward consistent but distinctive branded experiences. ## The Challenge of Theming Material Design - Material Design improves usability and consistency across Google and Android applications. - Using the same components everywhere can make products feel generic and less connected to their brands. - Material’s broad component library creates a challenge: designers need an efficient way to customize an entire system rather than editing components individually. - Themed Material Design aims to preserve the system’s strengths while enabling more memorable brand expression. ## Figma Styles for Global Customization - Figma Styles define reusable global text, fill, stroke, effect, and grid settings. - Updating a style automatically changes every instance across the document. - Styles can be shared through team libraries and reused across projects. - This makes Styles well suited to theming large UI kits and design systems. ## Material Colors, Typography, Elevation, and Grids - **Colors:** Fill styles control primary and secondary colors, typography emphasis levels, and surface swatches. Changing a brand palette can update many components at once. - **Typography:** Text styles cover Material’s type specifications, using Roboto by default but allowing teams to substitute their own typeface. Font changes may require adjustments to size and spacing. - **Elevation:** Preset shadow styles represent Material’s elevation levels, simplifying shadows that may otherwise require combinations of up to three drop shadows. - **Grid:** A reusable 4dp baseline grid can be applied to frames and components, alongside custom desktop, tablet, or mobile grids. ## Combining Styles with Components - Nested components allow teams to globally control the shape of buttons, floating action buttons, and cards. - Designers can switch between sharp corners, cut corners, and rounded corners by toggling nested component visibility. - Changes propagate throughout the system, though updates across hundreds of components may take several seconds. - Individual component instances can still override shared settings when specialized styling is needed. ## Icon Libraries - Material offers five icon styles. - To keep the main kit manageable, each icon style was organized into a separate sticker-sheet document. - Teams can copy icons directly or publish the sheets as shared libraries for use across projects. Figma Styles combined with components provide a practical way to build Material-based systems that are globally consistent, easily maintained, and adaptable to individual brands.

material-designfigmadesign-systemsdesign-tokens+2

figmaFeb 6, 2018

FigmaTip Roundup 6.0 | Figma Blog (opens in new tab)

The sixth FigmaTip Roundup collects practical techniques and community-created resources for speeding up design work in Figma. It highlights a Material Design System, more precise color editing for grouped objects, and Figma’s support for smoother “squircle” corners. ## Material Design System for Figma - R. Kamushken’s user-made Material Design System includes a fast table constructor. - The feature was introduced in version 1.3. - The resource is available for download through Setproduct. ## Editing Strokes and Fills Independently - Figma allows designers to change the stroke color of a group without altering its fills. - Objects in the group that have fills but no strokes remain unaffected. - The roundup presents this as a workflow advantage over tools such as Illustrator and Sketch. ## Smoother Corners with Squircles - The post announces a feature for creating ultra-smooth corners using squircles. - This provides an alternative to standard rounded rectangles for producing more polished interface shapes. The roundup encourages designers to adopt these community-discovered resources and features to make everyday Figma workflows faster and more precise.

material-designfigmadesign-systemsui-design+1