Figma

532 posts

figmaFeb 14, 20182 min readCurated summary

With love, from Figma: @mentions and file sorting | Figma Blog

Figma’s February 2018 update introduced two features designed to reduce friction in design workflows: file sorting and @mentions. Users can now organize files by creation date or name, while comments can directly notify specific teammates by email and in-app notification. Together, the features make finding files and coordinating asynchronous feedback more efficient. ## Organizing Files with New Sorting Options - Figma file lists were previously sorted primarily by “Last Modified.” - Users can now sort files by: - Date created - File name alphabetically - Last modified date - These options make it easier to locate older files or maintain a more organized workspace. ## Directing Feedback with @Mentions - Figma introduced @mentions for comments, allowing users to tag a teammate by typing `@` followed by their name. - Mentions are useful for: - Drawing a product manager’s attention to a specific design change - Asking engineers questions about a prototype - Notifying designers that copy edits are complete - Mentioned users receive both an email and an in-app notification. - Users can reply directly to comment notification emails, and their response is added to the Figma comment thread. ## Improving Asynchronous Collaboration - Previously, commenters had to send a document link and tell recipients to search for the relevant comment. - @mentions eliminate that extra step by pointing teammates directly to the discussion requiring their attention. - The features were developed in response to repeated requests from Figma users. Refreshing open Figma tabs enables both updates. These additions provide simple, practical improvements for organizing files and ensuring feedback reaches the right collaborator.

Figma User Experience Prototyping Real Time Collaboration+3

figmaFeb 7, 20182 min readCurated summary

Web design without a web designer? Xfive turns to Figma. | Figma Blog

Xfive, a web development company without in-house designers, used Figma to redesign its outdated website. Content producer Lubos Kmetko created the redesign and used Figma’s browser-based collaboration, prototyping, commenting, and developer handoff features to involve stakeholders across the company. The experience showed that Figma could make website design accessible to non-designers while reducing communication and implementation friction. ## Website problems and redesign goals - Xfive’s homepage and key sections had fallen behind as the company grew. - The site suffered from: - Outdated Customers and Work sections - Confusing navigation - Too many competing calls to action - Numerous landing pages that were difficult to maintain - Because Xfive typically implements client-provided designs, it did not usually employ dedicated designers. - Lubos Kmetko, a content producer familiar with Figma, took responsibility for the redesign. ## Prototyping and stakeholder collaboration - Lubos redesigned the homepage, Customers section, and Work section. - He streamlined navigation and reduced the number of CTAs and landing pages. - Stakeholders from marketing, sales, production, editorial, development, and operations reviewed the mockups. - Figma’s cloud-based workflow allowed anyone with a browser to: - Open the designs through a shared link - Leave comments - Discuss ideas and interactions - Review changes in real time - Feedback and revisions remained synchronized in one location instead of being scattered across files and messages. ## Improving designer-developer handoff - Approved designs were shared directly through Figma rather than sent as files through email or Box. - Developers could inspect designs in the browser using Code Mode. - Figma provided specifications such as dimensions, colors, and padding, along with export options for CSS, iOS, and Android code. - This reduced version-control problems, guesswork, and dependency on tools such as Avocode or Zeplin. - Developers reported that access to precise design details helped them code faster and more accurately. ## Future use of Figma at Xfive - Xfive viewed the redesign as a starting point for adopting Figma in client projects. - Lubos envisioned replacing emailed PDFs and JPEGs with functional, shareable prototypes. - The company planned to use Figma across the process, from early design discussions and implementation details to developer handoff. Figma enabled Xfive to complete a substantial redesign without a traditional designer and created a more centralized, collaborative workflow. For teams working across disciplines or locations, browser-based prototypes, comments, and inspectable design specifications can significantly simplify both design review and development.

Figma User Experience Prototyping Android+4

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.

Figma Design Systems User Interface Vector Graphics+1

figmaJan 31, 20182 min readCurated summary

Figma raises $25MM Series B | Figma Blog

Figma announced a $25 million Series B funding round led by Kleiner Perkins partner Mamoon Hamid. Existing investors from Index, Greylock, and LinkedIn also participated. The funding supports Figma’s broader vision of making design accessible, collaborative, and web-based rather than limited by siloed tools and workflows. ## Series B Funding - The round was led by Kleiner Perkins’ Mamoon Hamid. - Hamid’s previous investments included SaaS companies such as Slack, Box, and Intercom. - Existing investors Danny Rimer of Index, John Lilly of Greylock, and LinkedIn co-founder Jeff Weiner joined the round. - This was Hamid’s first investment at Kleiner Perkins. ## Figma’s Founding Vision - Figma was founded five years earlier by Dylan Field and Evan Wallace. - The founders believed creative tools should empower users rather than constrain them. - Their goal was to make creation: - Accessible to more people - Collaborative instead of siloed - Built for the web - The company emerged from experimentation with browser-based design tools, supported initially by a Thiel Fellowship. ## Adopting a New Way of Working - Figma acknowledged that changing established design workflows is difficult and takes time. - The company credited its users, employees, and early investors for supporting its vision during that transition. - The funding announcement represented both financial growth and continued validation of collaborative, web-based design. Figma intended to use the momentum from its Series B to continue developing tools that make design more open, collaborative, and accessible across teams.

Figma User Experience Collaborative Design Web Design+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.

Figma Design Systems User Experience Digital Product Design+1

figmaJan 24, 20182 min readCurated summary

Bug Bashing Party at Figma During Quality Week | Figma Blog

Figma’s Quality Week is a company-wide pause from new feature development to focus on fixing accumulated bugs and polishing existing functionality. The initiative reflects Figma’s belief that small usability problems compound for designers who spend hours in the product. By making quality work a recurring tradition, Figma aims to deliver a smoother, more reliable professional tool while also giving employees opportunities to explore unfamiliar parts of the codebase. ## A Company-Wide Focus on Quality - Figma launched its first official Quality Week in early 2017. - Engineers and designers temporarily paused their regular projects to address: - Annoying but non-critical bugs - Broken or incomplete features - Improvements to existing workflows - The company found that focused maintenance work could be as valuable as continuously shipping new features. - Quality improvements are especially important because users spend long periods working in Figma, making small imperfections increasingly disruptive. ## Quality Week 2018 Improvements - Two engineering teams collaborated on a broad set of bugs and prioritized issues that affected Figma’s professional quality. - Notable fixes included: - **Figma Mirror:** Improved stability and reduced crashes in the mobile mirroring app. - **Sketch import:** Added drag-and-drop importing into the editor and improved text-import accuracy. - **Chromebook support:** Enabled users to hold the search key and drag to duplicate objects. - **Layer panel behavior:** Made it easier and more intuitive to nest layers into groups and frames. - Figma acknowledged that the product was not bug-free, but planned to continue focused quality efforts throughout the year. ## Benefits for the Team - Quality Week helped developers and designers work in parts of the codebase outside their usual areas. - The event encouraged collaboration across teams and made otherwise routine maintenance work enjoyable. - Figma celebrated achievements with awards, including recognition for fixing the company’s oldest known bug—an issue affecting Windows users since 2015. ## Feedback and Ongoing Support - Many bugs addressed during Quality Week were reported by Figma’s user community. - Figma encouraged users to submit feedback through: - The in-product Help menu - Twitter - The community forum - Email support - The company emphasized an all-hands support model, where users might interact with engineers or even the CEO. Figma’s approach shows that dedicated time for bug fixing and product cleanup can complement innovation rather than compete with it. Regular quality-focused periods, combined with continuous user feedback, help maintain a reliable and polished product as it evolves.

Figma Design Tools Windows Chromebook+4

figmaJan 18, 20181 min readCurated summary

#FigmaTip Roundup 5.0 | Figma Blog

This #FigmaTip roundup highlights small Figma interactions that can make design work faster and more intuitive. The tips focus on importing multiple images, navigating deeply nested layers, and creating evenly spaced layouts. Together, they demonstrate how Figma’s built-in behaviors can streamline common design tasks. ## Importing Images in Bulk - Drag a folder directly from your desktop into Figma. - Figma imports the folder’s images as a set, avoiding the need to add each file individually. ## Navigating Nested Layers - Hold **Control** and right-click an object. - Use the resulting context menu to view and navigate through the object’s nested layers. - This is particularly useful when several layers overlap or when selecting a deeply nested element is difficult. ## Creating Equal Spacing and Column Grids - Use Figma’s red alignment and spacing guides to quickly position objects at equal distances. - Once the spacing is correct, use the distribute function to arrange the objects into a column-like grid. These shortcuts are worth incorporating into everyday workflows: they reduce repetitive actions and make Figma’s “it just works” interactions more discoverable.

Figma User Interface Desktop Applications Grid Layout+1

figmaJan 17, 20183 min readCurated summary

How to convince your team to switch to Figma | Figma Blog

Buffer’s move to Figma was presented as a cultural change, not merely a software upgrade. Figma helped break down design silos by making files accessible, collaborative, and usable across platforms. James Morris’s approach was to build support through experimentation and demonstrations rather than simply arguing for the switch. ## Buffer’s Transparency and Collaboration Challenges - Buffer valued transparency, but its existing design tools isolated designers from other departments. - Designs were difficult to locate in Dropbox and often required paid software or newer versions to open. - Developers and product managers worried about accidentally overwriting files. - Figma’s cloud-based files could be opened through shared URLs, with free view-only access for collaborators. - Linux users could access designs without buying a Mac or specialized desktop software. - Viewers could comment and inspect design data for implementation. ## Step 1: Create an Open Exploration Period - Morris introduced a company-wide period for testing different design and collaboration tools. - Teams were encouraged to experiment and identify which tools best addressed their workflow problems. - He gathered feedback and explained how Figma could solve Buffer’s communication issues. - Rather than relying only on a persuasive presentation, he trusted hands-on use to demonstrate Figma’s value. ## Step 2: Show, Don’t Tell ### Collaborative Whiteboarding with Product Managers - Morris used remote whiteboarding sessions to let product managers experience Figma directly. - He and a Canadian PM brainstormed together in real time, using shapes and diagrams much like a collaborative Google Doc. - This allowed them to develop ideas together without waiting for a formal specification. - Figma’s ease of use became apparent through practical collaboration. ### Winning Over Engineers - Morris gave engineers direct links to Figma files and let them explore independently. - Engineers could inspect CSS, Swift, and Android XML values through the free view-only experience. - Stable URLs created a single source of truth, replacing exported images and confusing Dropbox locations. - Figma’s browser-based architecture and use of WebAssembly also appealed to engineers interested in advanced web technology. ### Addressing Designers’ Concerns - Designers could be more difficult to persuade because some feared open, transparent workflows. - Others doubted that a browser-based application could match the speed and performance of desktop software. - The article begins describing the use of incentives—“candy”—to help designers try Figma, but the provided text ends before that section is completed. The practical recommendation is to make tool adoption an open, low-pressure experiment. Give each team a concrete way to experience the benefits—real-time whiteboarding for product managers, inspectable files for engineers, and performance demonstrations for designers—so the change becomes evident through use.

Figma Android CSS Webassembly+3

figmaJan 9, 20183 min readCurated summary

How Figma Transformed This Berkeley Design Class | Figma Blog

UC Berkeley’s CS 160 course used Figma to make digital product design more accessible to computer science students. The cloud-based tool solved problems involving incompatible devices, steep software learning curves, and limited collaboration. As a result, students spent more time applying usability principles and less time learning complicated design software. ## Challenges in Teaching Digital Design - CS 160 teaches human-computer interaction through 3–4-person teams building Android apps around themes such as healthcare and elections. - The course struggled with: - Students using Linux, Windows, Macs, or no personal computer. - Limited computer-lab solutions for incompatible software. - Adobe tools requiring substantial training. - Students with prior design experience often handled wireframing and prototyping, while others focused on coding or user testing. - Enrollment demand was high enough that the course’s original 100-student limit had to be doubled. ## Figma Made Design More Accessible - Figma was free for students and worked across different operating systems. - Its simple interface allowed students without design backgrounds to learn the basics quickly—one student reported becoming productive in about an hour. - Built-in features supported teaching: - In-context comments for instructor feedback. - Version history for reviewing progress. - Simultaneous editing by multiple students. - Integrated prototyping for presentations. - Students could focus on concepts such as Nielsen’s usability heuristics instead of spending most of their time learning Photoshop. ## More Effective Project-Based Learning - Students applied classroom lessons directly to their projects, reinforcing the concepts through practice. - One healthcare-themed team designed an app helping people with alcoholism locate nearby Alcoholics Anonymous meetings. - Figma’s quick prototyping was especially useful because teams had only about an hour of face-to-face collaboration each week. - Teachers and TAs could comment directly on relevant parts of a design rather than sending unclear, broad feedback by email. ## Collaboration Across Disciplines - Real-time editing enabled students to brainstorm, observe one another’s work, and contribute regardless of their design background. - Teams could work outside class without worrying about conflicting file versions or accidentally overwriting one another’s work. - The course used Figma to bring coding and design together, giving computer science students a more collaborative introduction to product design. Figma’s main contribution was reducing technical and logistical barriers so students could concentrate on design thinking, usability, and teamwork. For similar project-based courses, accessible cross-platform tools with real-time collaboration and contextual feedback can make design education more inclusive and effective.

Figma User Experience Prototyping User Interface+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.

Figma Design Systems User Experience Prototyping+4

figmaDec 11, 20171 min readCurated summary

#FigmaTip Roundup 4.0 | Figma Blog

The post is a roundup of community-submitted Figma tips designed to help users work more creatively and efficiently. It highlights practical techniques for cropping, creating patterns, resizing layouts, and inspecting designs, showing how small features and shortcuts can improve everyday workflows. ## Cropping Images with Masks - Use masks to crop images into custom shapes rather than relying only on rectangular frames. - Masks provide a flexible way to control which parts of an image remain visible. ## Creating Patterns with Symbols - Reuse symbols to build repeating visual patterns. - Duplicating and arranging symbols can quickly produce decorative or structured compositions. ## Resizing Frames with Constraints - Set constraints on frame elements to control how they behave when the frame is resized. - Constraints help preserve relationships between elements across different dimensions. ## Inspecting Designs with Outline Mode - Press **Command + Y** to switch to Outline Mode. - This view makes it easier to inspect vector paths, layers, and the underlying structure of a design. The roundup encourages designers to experiment with Figma’s masks, symbols, constraints, and keyboard shortcuts to make common design tasks faster and more adaptable.

Figma User Interface Design Tools Graphic Design+4

figmaDec 6, 20172 min readCurated summary

More time, more money: How Figma accelerates agency workflow | Figma Blog

Figma helped Unfold, a 10-person Florida design agency, reduce versioning, collaboration, and handoff problems by keeping work in a shared cloud platform. Its browser-based workflow lets clients, designers, and developers access the same up-to-date files regardless of operating system. Founder Eddie Lobanovskiy estimates the agency saves at least 30% of its communication time and can take on more client work. ## Replacing File Conflicts with Cloud Collaboration - Before Figma, Unfold struggled with overwritten files, conflicting versions, and a patchwork of plugins. - Figma’s cloud-based files provide a single source of truth accessible through a URL. - Teams can share designs, collect feedback, and collaborate without requiring everyone to use the same computer or software. - Unfold used Figma’s Sketch importer to move existing projects into the platform. ## Keeping the Entire Design Process in One Place - Clients can join live brainstorming sessions through Figma’s multiplayer functionality. - Designers and clients can work simultaneously in the same document, accelerating idea generation. - Mood boards are created directly in Figma by dragging images from the web into project files. - High-fidelity designs remain available at the same URL, eliminating repeated exports and uploads. - Pinned comments keep feedback attached to the relevant design frame rather than scattered across email or messaging tools. ## Simplifying Developer Handoff - Previously, Unfold had to accommodate developers using non-Mac computers and sometimes convert files to PSD through Illustrator, which damaged layer structures. - Figma’s code mode lets developers inspect designs, export assets, and retrieve CSS, Android, and iOS specifications. - Developer access remains synchronized with the latest design automatically. - Developers can use view-only access, so clients do not necessarily need paid editor accounts. - Cross-platform access removes the need to persuade clients or developers to purchase specific software or hardware. ## Taking on More Work - Figma made Unfold’s workflow faster and more fluid by reducing administrative and coordination overhead. - The agency found projects more pleasant to manage and felt capable of serving more clients. - The main business benefit was not only saved time, but also fewer process disruptions and smoother collaboration. Figma’s shared, cross-platform workspace gave Unfold a practical way to centralize design, feedback, prototyping, and developer handoff—helping the agency communicate less, move faster, and increase its capacity.

Figma Prototyping Android iOS+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.

Figma Design Systems 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.

Figma Design Systems 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.

Figma Design Systems User Experience Design Components+1