Design Systems

252 posts

figmaJul 31, 20182 min readCurated summary

How Kiwi.com handles project structure, versioning & components in Figma | Figma Blog

Kiwi.com’s small mobile design team uses Figma to bring design collaboration, prototyping, versioning, and handoff into one shared environment. Their previous Sketch workflow depended on Sketch, Zeplin, Abstract, Marvel, and Dropbox Paper, creating frequent synchronization problems. Figma became attractive because it could centralize these activities and support contributions from around twenty collaborators. ## A Small Team with Many Contributors - Kiwi.com’s mobile design team consists of only two people. - Around twenty others contribute through: - Commenting on design iterations - Correcting copy - Designing cross-platform features - The broader front end and Orbit design system were built in Sketch. - Because Orbit’s mobile components differ visually, the team decided to explore building the mobile system in Figma. ## Problems with a Multi-tool Sketch Workflow - Sketch was used alongside: - Zeplin for developer handoff - Abstract for version control - Marvel for static prototypes - Dropbox Paper for embedded PNGs - These tools frequently fell out of sync: - Prototypes could reflect older tested versions. - Designers might forget to commit changes to Abstract. - Zeplin might not contain the latest approved visuals. - Documentation images could be weeks out of date. - The workflow required constant manual coordination between separate sources of truth. ## Why the Team Chose Figma - Figma offered a way to consolidate design work, collaboration, prototyping, and version history. - Its value became clearer in a team where many people needed access to current designs. - The author initially resisted Figma, preferring a native design application over a browser-based tool. - As Kiwi.com’s collaborative needs grew, the advantages of a shared, synchronized workspace outweighed that hesitation.

Design Systems Figma Prototyping Sketch+2

figmaJul 25, 20182 min readCurated summary

Introducing: Design Dictionary from Figma | Figma Blog

Figma introduced its Design Dictionary to make design terminology more accessible and improve communication across teams. The resource addresses the field’s dense vocabulary, which can confuse newcomers and hinder collaboration between designers, engineers, product managers, copy editors, and stakeholders. Launched with 70 terms and open to community contributions, the dictionary is intended to evolve alongside the design industry. ## Design’s Specialized Language - Design terminology draws from art, printmaking, publishing, usability, and typography. - Terms help experts discuss detailed concepts precisely. - The same vocabulary can intimidate people who are new to design or work alongside designers. ## The Need for Cross-Functional Understanding - Modern digital products involve many roles in design work: - Engineers translate designs into production code. - Copy editors add and refine content. - Stakeholders review and approve designs. - Product managers coordinate the broader process. - Collaboration becomes harder when teams use design terms inconsistently or do not understand them. - Figma experienced this challenge after hiring employees from business, analytics, support, engineering, and other non-design backgrounds. ## The Design Dictionary - Figma created the dictionary as a practical glossary for learning core design terminology. - The initial release included 70 terms. - It was open-sourced so the wider design community could benefit from and contribute to it. - The resource was expected to expand as design practices and industry language evolved. ## Community Contributions - Figma invited readers to suggest terms that cause confusion in their organizations. - Examples included “White Space,” “Stroke,” and “Lorem Ipsum.” - Users could submit new ideas and corrections through a link in the dictionary. Figma’s Design Dictionary is recommended as a shared reference for teams working across design and product development. Its broader goal is to create a common language that makes cross-functional design collaboration clearer and more effective.

Design Systems Figma User Experience Open Source+2

figmaJul 23, 20181 min readCurated summary

#FigmaTip Roundup 9.0 | Figma Blog

This #FigmaTip Roundup presents practical shortcuts and component techniques shared by the Figma design community. The tips focus on arranging objects efficiently, creating mirrored component variants, and customizing spacing adjustments. Together, they show how keyboard shortcuts and reusable components can speed up common design tasks. ## Arranging Multiple Frames - Use **Cmd + `** to pack selected objects vertically. - Use **Cmd + Shift + `** to pack them horizontally. - Combine these shortcuts with Figma’s alignment commands to quickly reorganize several frames or objects. ## Creating Mirrored Components - To make a flipped, reusable component: - **Option-drag** the original component into a new empty component. - Press **Shift + H** to mirror it horizontally. - The mirrored component remains linked to the original, so changes made to the source component are reflected in the flipped version. ## Customizing Spacing with “Nudge Amount” - Figma’s **Nudge Amount** setting controls how far objects move when using the arrow keys. - Adjusting this value lets designers choose more appropriate spacing increments instead of relying only on the default nudge distance. - This is useful for making precise or larger layout adjustments more efficiently. These techniques provide quick ways to improve layout organization, maintain consistent component variations, and fine-tune spacing directly from the keyboard.

Design Systems Figma User Interface Keyboard Shortcuts+1

figmaJun 20, 20182 min readCurated summary

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog

Figma 3.0 aims to replace fragmented, desktop-based design workflows with a unified web platform. Its major additions—more capable prototyping, shared styles and libraries, and an Organization tier—help teams keep designs, feedback, prototypes, and systems connected. The overall goal is to reduce tool switching, synchronization work, and redundant subscriptions. ## More Capable Prototyping Figma 3.0 expands prototyping so teams can create realistic interactive experiences directly from their designs: - **Device frames** provide context for designs across iPhones, Android devices, and Apple Watch. - **Fixed objects** keep headers, footers, status bars, and buttons attached to frame edges during scrolling. - **Scrollable areas** support nested frames, vertical lists, horizontal carousels, and scrolling in any direction. - **Transitions** such as dissolve, slide, and push make prototypes resemble native mobile applications. - Prototypes remain synchronized with the underlying design, eliminating screen exports and manual updating. - Comments stay linked to the design, while prototypes can be presented from a mobile browser. - Figma is also investing in an API for integrations with other prototyping tools and web applications. ## Styles and Team Libraries Figma Styles is now generally available, following extensive user research and a private beta. - Styles and Team Libraries allow companies to create and maintain shared design systems. - Teams can centralize reusable visual attributes and apply them consistently across projects. - The feature is intended to reduce inconsistencies and help organizations manage company-wide design standards. ## Organization Tier Figma is previewing a new Organization tier designed for larger companies. - It focuses on scaling design management across large organizations. - Together with shared components, commenting, developer handoff, and web-based collaboration, it is intended to support moving most of a team’s workflow into Figma. Figma 3.0’s practical recommendation is to consolidate design, prototyping, feedback, and design-system management in one web-based environment, while using Figma’s API when specialized integrations are still necessary.

Design Systems Figma Prototyping API+3

figmaJun 12, 20182 min readCurated summary

A Sketch user's perspective on switching to Figma | Figma Blog

After using Figma for a month, Marco Pacifico argues that Sketch teams—especially distributed product teams—could gain substantially by switching. Figma combines Sketch-like design capabilities with prototyping, collaboration, developer handoff, version control, and cloud storage in one web-based tool. Its central advantage is reducing the syncing, uploading, and coordination overhead that slows design iteration. ## Web-Based Design and Real-Time Collaboration - Figma runs in browsers, with native apps available for offline work. - Work is automatically saved to a shared cloud space, eliminating manual file organization and updates. - A single URL serves as the source of truth for designers, developers, and stakeholders. - Teams no longer need to repeatedly upload screens, sync files, or distribute PNGs. - The author reports that Figma feels at least as performant as Sketch, including with large files. ## A Replacement for the Sketch Ecosystem The article presents Figma as combining the capabilities of several tools traditionally used alongside Sketch: - Sketch-like drawing tools and interface. - Clickable prototyping comparable to Craft and InVision. - Built-in comments, tagging, resolution tracking, and Slack integration. - Developer handoff with dimensions, styles, and downloadable assets. - Version history that allows users to restore or fork earlier designs. - Multiplayer editing with visible cursors and real-time drawing. - Live viewing of another collaborator’s screen and cursor. - Flexible components, intuitive constraints, and shared team libraries. - Dropbox Paper embedding. ## Faster Design Iteration - Designers can conduct reviews, make changes, and receive immediate feedback in the same file. - Iteration can shrink from days to minutes because teams avoid: - Re-uploading screens to InVision. - Reordering prototype screens after synchronization. - Waiting for teammates in other time zones to commit or upload work. - Recovering from broken third-party plugins after software updates. - Changes are visible immediately, so there is no separate synchronization step between the design file and prototype. ## A More Inclusive Design Process - The design file becomes a shared space where team members and stakeholders can discuss work directly. - Anyone with the link can participate through comments and collaborative review. - Real-time access makes design discussions more seamless and reduces barriers between distributed teammates. ## Practical Recommendation For teams currently assembling Sketch, Abstract, InVision, Craft, Zeplin, and collaboration tools into one workflow, the author recommends evaluating Figma as a unified alternative—particularly when rapid iteration and distributed collaboration are priorities.

Design Systems Figma Prototyping Real Time Collaboration+3

figmaMay 29, 20183 min readCurated summary

How Virta Health uses Figma to help patients reverse type 2 diabetes | Figma Blog

Virta Health uses Figma as a collaborative foundation for designing healthcare experiences aimed at reversing type 2 diabetes. The company’s transparent, shared design process helps teams create consistent patient interfaces, involve non-designers, and move from ideas to implementation quickly. Figma’s real-time collaboration and reusable components have become central to Virta’s design culture and operational speed. ## Designing for High-Stakes Healthcare - Virta provides treatment for type 2 diabetes and other chronic metabolic diseases without medication or surgery. - Its mission is to reverse diabetes for 100 million people by 2025. - Reported results after one year include: - 94% of insulin users reducing or eliminating insulin use. - 60% of patients reversing type 2 diabetes. - Because healthcare products directly affect patients’ lives, interfaces must be intuitive, predictable, and reliable. ## Real-Time Collaboration Across Teams - Virta’s 11-person design team operates as a transparent internal hub for designers, developers, marketers, and physicians. - Since the company adopted Figma early, its designs have been accessible and current from anywhere and on any machine. - Designers share files in Slack, where teammates can immediately open the canvas, comment, duplicate work, and suggest improvements. - New team members can get productive quickly because the latest designs and decisions live in Figma. ## Consistency Through Components - Virta treats consistency as essential: patient and physician workflows should behave predictably across the app. - Figma components let designers reuse interface elements instead of recreating them manually. - The team developed a component library based on structural components and nested components. - Components support responsive desktop and mobile versions within a shared system. - Virta is applying the same structural principles to its codebase to reinforce consistency between design and implementation. ## Empowering Non-Designers - Figma allows marketing, product, leadership, developers, and physicians to participate directly in design work. - During the VirtaHealth.com relaunch, the entire process—from ideation through developer handoff—took place in Figma. - Shared visibility enabled faster feedback and helped the first page launch within a month. - Marketing teams use templated Figma files for social graphics, landing pages, and other collateral. - Non-designers can create assets independently, then tag designers for targeted reviews or illustration requests. - This self-service approach eliminated multiple design cycles and reduced the process by weeks. Virta’s experience suggests that collaborative design tools are most valuable when they become part of the company’s operating model, not merely a place to create mockups. Shared files, reusable components, and broad participation helped the company deliver faster while maintaining the consistency and clarity required in healthcare.

Design Systems Figma Prototyping User Interface+2

figmaMay 9, 20183 min readCurated summary

Material Design + Figma Styles = 🔥 | Figma Blog

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.

Design Systems Figma Design Tokens Responsive Design+2

figmaMay 8, 20182 min readCurated summary

Figma Styles beta: A new way to apply text and layer attributes | Figma Blog

Figma’s 2018 Styles beta introduced a modular system for applying text and layer attributes consistently across documents. Instead of bundling typography, color, and alignment into complex combinations, Styles separated them so each could be managed and updated independently. The feature also allowed different styles within a single text field, making design systems easier to maintain for both individuals and teams. ## Modular Text and Layer Styles - Styles could be created separately for: - Text properties - Fills and colors - Layout grids - Effects - Strokes - Styles were available through team libraries, helping teams share current versions. - Team members could enable shared Styles and receive notifications when they changed. ## Reducing Text Style Complexity - Traditional tools combined font, color, and alignment into a single text style. - A project with three text formats and three colors could require nine separate styles, even before accounting for alignment. - Changing a color—such as an inaccessible light-gray link color—required manually updating every affected style. - Figma separated form, color, and alignment so each attribute could be edited independently. - Updating a source fill style automatically propagated the change throughout the design. ## Applying Multiple Styles Within Text Fields - Other design tools often restricted a text field to one style. - Formatting part of a sentence as a link or section heading could break its connection to the original style. - Figma allowed users to highlight portions of text and apply different text or fill styles. - These partial styles retained their links to the source styles and updated when those styles changed. ## Beta Rollout - The private beta was intended to reduce daily styling problems and support scalable team design systems. - Migration was planned to begin with smaller teams before larger ones. - The migration was one-way, so teams needed to consider the change before participating. Figma recommended Styles as a more flexible foundation for consistent design systems, especially for teams managing shared typography and visual attributes at scale.

Design Systems Figma User Experience Accessibility+2

figmaFeb 6, 20181 min readCurated summary

FigmaTip Roundup 6.0 | Figma Blog

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.

Design Systems Figma User Interface Vector Graphics+1

figmaJan 30, 20182 min readCurated summary

Figma announces design system meetups in 6 cities around the world | Figma Blog

Figma announced a series of design system meetups in six cities worldwide to help designers share challenges, lessons, and best practices. The initiative began in Lagos, Nigeria, where more than 300 people attended, and was shaped by strong community interest in design systems. Figma concluded that larger meetups were more inclusive and useful than the dinner-sized events originally planned. ## Meetup Locations and Schedule - Lagos, Nigeria — January 27 - Toronto, Canada — February 23 - Bangalore, India — details forthcoming - Amsterdam, Netherlands — details forthcoming - New York, United States — details forthcoming - Los Angeles, United States — details forthcoming Each event would be adapted to its local design community and include presentations from local designers. Figma representatives would attend where possible. ## Community-Driven Organization - The meetups grew out of thousands of responses to a questionnaire launched with DesignSystems.com. - Designers volunteered to host or partner on events. - Figma abandoned its original dinner format after receiving more interest than small venues could accommodate. - The broader meetup format allowed more designers to participate and share “war stories” about building design systems. ## The Lagos Meetup - Lagos was selected because of its growing design and technology scene and its large concentration of Figma users in Africa. - Figma’s cloud-based platform and free tier were especially valuable in Lagos, allowing designers to work from offices, home, or internet cafés. - Hotels.ng designer Namnso Ukpanah organized the event. - Speakers included designers from hotels.ng, Andela, and Paystack, along with Figma CEO Dylan Field. - More than 300 people attended. ## Expanding DesignSystems.com Figma planned to use information from the questionnaire and meetups to create a more comprehensive version of DesignSystems.com. Designers interested in bringing an event to their city were encouraged to express interest, volunteer as hosts, or contact Figma for details. The initiative demonstrates that design systems benefit from open, local communities where practitioners can exchange practical experience. Designers seeking similar events could support the effort by organizing locally or participating through DesignSystems.com.

Design Systems Figma User Experience Digital Product Design+1

figmaDec 14, 20173 min readCurated summary

18 designers predict UI/UX trends for 2018 | Figma Blog

The article gathers predictions from 18 designers about UI/UX in 2018, emphasizing that the field should improve users’ experiences rather than prioritize novelty or designer ego. Common themes include accessibility, ethical responsibility, collaboration, and closer integration between design and development. It also warns that efficiency and standardized systems can become harmful when adopted without critical thought. ## Accessibility and Inclusive Design - Designers argue that accessibility should become a central responsibility rather than an afterthought. - Common problems include: - Using ultra-light gray text for essential content - Adding unnecessary animation - Making interfaces harder to understand for visual flair - Inclusive design is described as an important trend that the industry needs, even if it is unlikely to attract attention or headlines. - The article suggests that many teams avoid accessibility work because it requires sustained effort rather than producing immediately visible results. ## Design Collaboration Inspired by Engineering - Design teams may begin working more like engineering teams. - Possible developments include: - Formal design reviews similar to code reviews - Design tools that identify inconsistencies like code linters - Open-source design patterns and shared UX standards - This approach could make collaboration more systematic and help establish common practices for user experience and information design. ## Ethics and Designer Responsibility - Designers are encouraged to recognize the influence their work has on people’s behavior and decisions. - UX choices should be evaluated for their ethical consequences, not only their usability or business value. - The broader prediction is that designers will become more accountable for how products affect users and society. ## Risks of Overreliance on Design Systems - Standardized systems such as Material Design and Microsoft’s Fluent Design may become increasingly dominant. - One concern is that designers will adopt these systems automatically without questioning whether they fit a product’s users or context. - Design systems can improve consistency, but they should not replace independent judgment or thoughtful problem-solving. ## Convergence of Design and Development Tools - Design and development tools are expected to become more integrated and centralized. - Technologies such as CSS Grid, custom variables, Vue, and React could make implementation more efficient and flexible. - Greater efficiency should create more time for designers to focus on responsible design and more inclusive experiences. - The article frames technical progress as valuable only when it supports better outcomes for users. Overall, the predictions recommend treating accessibility, ethics, and inclusion as core design requirements—not optional trends—while using collaboration frameworks, design systems, and new development technologies thoughtfully.

Design Systems User Experience React Accessibility+4

figmaDec 13, 20172 min readCurated summary

Stitch Fix accelerates design sprints by collaborating in Figma | Figma Blog

Stitch Fix uses Figma to make design sprints faster, more collaborative, and easier to manage across departments. Its browser-based workflow gives everyone access to one shared source of truth, eliminating file handoffs and tool-installation delays. Real-time collaboration and reusable components let the team focus on solving UX problems instead of managing files or repeating production work. ## Sprinting in the Cloud - Stitch Fix brings designers, engineers, marketers, and project managers together to brainstorm, whiteboard, and prototype solutions. - Because Figma runs in the browser, participants can join shared files through a URL, regardless of whether they use Macs or PCs. - The team avoids exchanging files and installing separate applications for design, prototyping, and developer handoff. - Head of Product Design Ellen Beldner describes Figma as a replacement for the combined workflow of Sketch, InVision, and Zeplin. - A shared cloud file creates a single source of truth from the beginning of the sprint. ## Brainstorming and Critiquing in Tandem - Design sprints often reveal technical challenges or unexpected effects elsewhere in the user experience. - Figma’s Multiplayer feature allows team members to inspect and edit the same design simultaneously. - Instead of gathering around one computer or emailing exported files, teammates can review specific areas directly in the shared file. - Ellen can leave comments, provide immediate feedback, or draw mockups to explain suggested changes. - Designers can return to the same URL later to review detailed critiques without scheduling additional walkthrough meetings. - Working in one file prevents conflicting versions and helps the team stay aligned as prototypes become higher fidelity. ## Shared Components Reduce Busywork - Tight sprint schedules leave little time for repeatedly recreating common UI elements. - Figma’s shared components provide reusable instances of interface elements. - When the master component changes, all instances update automatically. - During a card-based design-system sprint, Stitch Fix used components to test different card combinations efficiently. - Team members could continue placing component instances while others worked on navigation and related areas. - This automation freed designers to focus on broader UX questions rather than repetitive production tasks. ## Practical Conclusion Stitch Fix’s experience suggests that browser-based collaboration, real-time feedback, and reusable components can significantly streamline design sprints. Teams seeking faster cross-functional iteration should prioritize a shared design environment that reduces tool friction and keeps everyone working from the same source.

Design Systems Figma User Experience Prototyping+4

figmaNov 29, 20172 min readCurated summary

How to build your design system in Figma | Figma Blog

Figma’s 2017 post argues that design systems can begin with simple, practical building blocks and grow into sophisticated libraries of reusable components. Rather than prescribing one method, it showcases how teams use Figma’s constraints, components, and Team Library to support different organizational needs. The examples suggest that design systems improve consistency while also strengthening collaboration among designers, engineers, product managers, and non-designers. ## Starting with Simple Building Blocks: Gusto - Gusto’s experience addresses the common challenge of deciding where to begin. - The team used basic, reusable elements as the foundation for its component library. - The approach demonstrates that a design system does not need to be comprehensive at launch; it can develop incrementally. ## Creating Marketing and Communications Assets: Square - Square’s marketing team built an internal system for communications design. - The system included reusable assets such as: - Color palettes - Logo sets - Other brand and communication resources - Figma helped the team organize and share these assets across its internal workflows. ## Empowering Non-Designers: Virta Health - Virta Health documented the process from auditing existing components to producing final mockups. - Designers used reusable components that allowed non-designers to assemble designs through drag-and-drop workflows. - The design system improved communication between designers, engineers, and product managers by giving teams a shared visual language for discussing ideas. ## Using Nested Components: OpenText - OpenText explored nested components to create more flexible and powerful UI patterns. - Components could be combined into more complex structures, including controls with multiple button states. - This approach supports scalable systems in which changes to foundational components can flow through larger interface patterns. ## Applying Atomic Design Principles: SetProduct.com - SetProduct.com used atomic design as the organizing framework for its system. - The hierarchy progresses from small elements to complete interfaces: - Words and icons - Buttons and other phrases - Cards and other sentences - Full screens or chapters - Figma components support both local editing and broader, reusable design-system updates. Figma’s examples show that teams should begin with the problems and workflows specific to their organization, then gradually build a reusable system around them. Features such as constraints, nested components, and Team Library can support systems ranging from simple asset collections to highly structured component architectures.

Design Systems Figma Component Library Atomic Design+2

figmaNov 28, 20172 min readCurated summary

Advanced Project Permissions for design systems | Figma Blog

Figma introduced Advanced Project Permissions to give design-system teams finer control over who can edit or access projects. Available to paying Professional Teams, the feature adds view-only and invite-only options alongside the existing team-wide editing model. It is designed to protect systems from accidental changes while allowing maintainers to develop and test privately. ## Why Design Systems Need More Control - Design-system maintainers often need to work privately before releasing components to the broader organization. - Once published, the system should be protected from accidental edits by designers who primarily consume its components. - Figma’s Team Library enabled cross-file and cross-team component sharing, but additional project-level privacy and access controls were needed. ## New Project Permission Options - Professional Team editors can choose one of three access settings when creating a project: - Everyone on the team can edit - Everyone on the team can view - Invite-only access for selected collaborators - Existing projects can be updated by opening the **Share** dialog and changing their permissions. - The feature creates a boundary between design-system “maintainers” and “viewers.” ## Effects on Team Workflows - View-only permissions reduce the risk of well-intentioned team members modifying carefully maintained components. - Invite-only projects allow maintainers to experiment and refine a system before wider deployment. - Larger teams may give individual designers fewer opportunities to directly change the system, depending on the balance between maintainers and viewers. - Figma was exploring pull-request-like workflows so designers could suggest changes while maintainers retained ownership. Overall, the permissions provide a practical foundation for managing robust design systems: restrict editing to maintainers, use view-only access for consumers, and consider structured contribution workflows for future improvements.

Design Systems Figma Collaboration Access Control+2

figmaNov 27, 20172 min readCurated summary

Introducing DesignSystems.com | Figma Blog

Figma introduced DesignSystems.com as a central resource for learning about and building design systems. The site aims to address practical challenges—such as consistency, communication, organizational culture, and implementation—rather than presenting only polished success stories. Figma also planned community events, including sponsored design-system dinners, to encourage candid offline discussion. ## Why Design Systems Matter - As products grow across multiple screens and teams, designers need processes that scale. - Companies increasingly compete through user experience, making consistency and efficient collaboration more important. - Common questions include: - Whether design components should be connected to code - Whether dedicated teams are necessary - How to start a design system - Whether design systems could replace designers - Figma had already supported this work through features such as team libraries, which allow companies to share component libraries across files and teams. ## DesignSystems.com as a Community Hub - The site was created as a place to learn, create, and discuss design systems. - It intends to cover: - Difficult implementation problems - Real-world failures and “war stories” - Lessons learned and best practices - The cultural and economic effects of design systems - Figma encouraged designers to contribute their successes, failures, and unresolved questions. ## Bringing the Conversation Offline - Design-system work involves organizational politics and social dynamics that can be difficult to discuss publicly. - Figma sponsored dinners where designers could openly debate how design systems affect their organizations. - The first dinner took place in San Francisco, with plans to support similar gatherings hosted by design communities worldwide. DesignSystems.com was positioned as both an educational resource and a community-building effort. Figma’s recommendation was to learn from honest implementation experiences and connect directly with peers facing similar challenges.

Design Systems Figma User Experience Design Components+1