Figma

532 posts

figmaJul 24, 20192 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.

Figma Design Systems Product Design Plugins+1

figmaJul 23, 20192 min readCurated summary

Behind the Plugins: Tiffany Chen, UX Designer @ Microsoft | Figma Blog

Tiffany Chen, a Microsoft UX designer, is developing an accessibility-focused Figma plugin that automates the manual work of annotating designs for accessibility. She sees plugins as a way to fill gaps in design tools, make inclusive design more accessible, and encourage people from diverse backgrounds to enter the design field. Her broader work combines technical feasibility with creative experimentation. ## Accessibility-Focused Plugin - Chen’s plugin is an “accessibility-focused order annotator.” - It automates much of the manual process involved in creating accessibility annotations for designs. - The plugin was planned for release to the Figma community on August 1, 2019. ## Why Chen Builds for Figma - Figma’s plugin system and APIs are easy to use, allowing her to focus on creating rather than debugging setup issues. - Plugins let designers build missing features themselves instead of waiting for design-tool companies to add them. - She describes the Figma community as supportive and enjoyable. ## Expanding Access to Design - Chen wants to help people begin nontraditional design careers, including those from psychology, anthropology, international relations, and computer science. - She believes diverse professional backgrounds bring valuable perspectives and knowledge to design. - Her computer science background influences her designs by balancing technical feasibility with novelty. - She views accessible, powerful tools such as Figma as a way to lower barriers to becoming a designer. ## Combining Technical and Creative Work - Chen’s proudest project began by asking people unusual questions, such as what lies they were told as children. - She transformed their responses into illustrated stories for an art-directed website. - Layering and parallax effects helped her combine storytelling, visual design, and technology. ## Designing with Broader Impact in Mind - Chen admires the principles of B Corporations, which require companies to consider effects on workers, customers, suppliers, and the environment. - She believes the design industry needs both greater awareness of inclusive product experiences and more accessible paths into the profession. Chen’s work demonstrates how plugins can support accessibility while also empowering designers to customize their tools. Her recommendation in practice is clear: use approachable, flexible design technology to make inclusive design easier and broaden participation in the field.

Figma User Experience Accessibility Figma Plugins+3

figmaJul 21, 20192 min readCurated summary

Behind the Plugins: Sam Mason de Caires, UX Engineer at Cloudflare | Figma Blog

Figma’s early plugin beta highlighted how community-built tools could expand the possibilities of design software. Sam Mason de Caires, a UX Engineer at Cloudflare, sees plugins as a way to automate repetitive work and give designers more time for meaningful creative decisions. He also anticipates a future where generative design tools create many variations from data, with designers refining the best results. ## Sam’s Background and Motivation - Sam became a developer because he enjoys building things from scratch and seeing people use them. - His interest in design overlaps with his development experience, allowing him to contribute to design projects at Cloudflare. - He believes developers can support the design community by creating tools that improve speed and confidence. ## Plugins Sam Is Building - Sam had already created four Figma community plugins. - His projects include: - Translation tools - Data replacement - Theme UI generation - Graph creation - Color references designed to support color-blind users - He is particularly interested in using Figma’s API to automate tasks normally completed manually. ## The Role of Automation in Design - Figma’s plugin API gives creators access to the underlying tool and enables custom workflows. - Automating tedious tasks allows designers to focus on higher-value parts of the process. - Sam views plugins as a bridge between development and design, helping users work more efficiently without leaving their design environment. ## The Future of Design Tools - Sam expects major advances in generative design over the next five years. - Instead of designing every possible state individually, designers may provide data describing the desired output. - Design tools could then generate multiple variations, leaving designers to select and refine the strongest elements. - He recommends Adam Morse’s writing on “Chaos Design” for deeper thinking about the evolution of design tools. ## Contribution to the Design Community - Sam plans to continue creating tools and processes that help designers work faster and with greater confidence. - He is inspired by Stripe, praising both its visual quality and its success in making payment processing feel like a desirable product. - He also admires Stripe’s efforts to support broader communities through initiatives such as Stripe Press. Sam’s plugins were scheduled to become publicly available in Figma on August 1, 2019, reflecting Figma’s broader effort to build its plugin ecosystem around community innovation.

Figma Cloudflare Figma Plugins Plugin Api+2

figmaJul 17, 20192 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.

Figma Design Systems Collaboration Agile+1

figmaJul 15, 20193 min readCurated summary

Product design portfolio tips from a Figma recruiter | Figma Blog

A strong product design portfolio should be built around the needs of its audience: busy design leaders who may spend only seconds or minutes reviewing it. The goal is to make your abilities, experience, and approach immediately clear through focused project selection, simple navigation, and consistent presentation. Tailoring the portfolio to the role is more effective than trying to represent every project in your career. ## Understand Your Audience and Goal - Portfolios are commonly reviewed by design managers, creative directors, heads of design, or VPs of design. - These reviewers quickly look for: - The type of design you do - Your talents and interests - Relevant experience for the role - How you approach design problems - Your overall design ability - The portfolio should emphasize information relevant to the specific position rather than requiring reviewers to search through extensive content. ## Make the Landing Page Easy to Scan - Use a cohesive system for project thumbnails: - Keep logos or screenshots consistent in size. - Apply similar styling, such as matching backgrounds or drop shadows. - Label projects consistently with details like company, role, and medium. - A clear, orderly layout reduces the mental effort required to understand the portfolio and encourages reviewers to explore more projects. - Creative layouts are acceptable when differences are intentional and help communicate priorities rather than appearing arbitrary. - Put project previews directly on the landing page so visitors can reach the work in one click. - Avoid unnecessary navigation steps such as separate “About” pages, work icons, or project-selection screens before showing the portfolio. ## Choose Projects Strategically - Select projects according to your career goals: - Highlight mobile, web, or virtual-reality work when targeting those fields. - Emphasize relevant industries, such as fintech or healthcare, when changing sectors. - Do not attempt to include the full breadth of your career; hiring managers may not have time to review everything. - Older work from prestigious brands should not automatically be included if it no longer represents your current abilities. - Use the résumé to show the range of companies you have worked with. - Include older work only when it remains especially notable or relevant. - If you lack experience in the medium or sector you want to enter, create side projects to build targeted examples. - For example, a mobile designer seeking web work should develop web-focused projects. - Similar transitions apply to print designers moving into UX/UI, visual designers pursuing research, or engineers moving toward front-end ideation. ## Practical Recommendation Treat the portfolio like a design challenge: identify the audience, define the goal, and present only the clearest evidence that you are suited to the role.

Figma User Experience Prototyping Product Design+2

figmaJul 8, 20192 min readCurated summary

Bring your Figma prototypes to life with GIFs | Figma Blog

Figma introduced animated GIF support in prototypes, allowing designers to add motion, video elements, and subtle animations without leaving the prototyping workflow. GIFs remain static in the editor but animate when users click “Present.” The update also adds customizable cover frames, improved momentum scrolling, and touch cursors for mobile prototypes. ## Using GIFs in Figma Prototypes - Add a GIF to a Figma file using tools such as ScreenFlow, LICEcap, Principle, or After Effects. - Click **Present** to view the animation in the prototype. - GIFs appear as static images in the editor. - Designers can open the GIF properties modal and scrub to select a representative cover frame. - Custom cover frames are useful for GIFs with blank opening frames or multiple similar animations. ## Improvements for Mobile Prototypes - Mobile prototypes now include OS-aware momentum scrolling. - New touch cursors make interactions feel more like a real mobile device. ## Design Inspiration The article highlights several effective uses of animation: - **Uber:** Animated splash screens serve as both welcome moments and loading states. - **Slack:** Rotating loading quotes make waiting more engaging. - **Material Design:** Simple linear and circular progress indicators communicate activity clearly. - **Headspace:** Illustrative onboarding animations help explain the product and maintain user attention. - **Hyperlapse:** Video-based onboarding demonstrates practical product scenarios. - **Mapbox:** A looping hero animation shows the capabilities of its location technology. - **Mailchimp:** Subtle animated illustrations add texture and personality to web pages. Designers can experiment with Figma’s starter file or consult the support article for setup instructions.

Figma User Experience Prototyping Motion Design+2

figmaJun 25, 20192 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.

Figma Design Systems Figma Plugins Components+2

figmaMay 2, 20192 min readCurated summary

5 ways to level up your prototyping workflow in Figma

Figma prototyping can be made faster and more realistic by reusing connected components, managing scrolling content centrally, and simulating natural interaction timing. The post presents five techniques that reduce repetitive setup while improving testing, presentation, and collaboration workflows. ## Master Components for Repeated Connections - Turn persistent navigation, such as tab bars or hamburger menus, into master components. - Link each item in the master component once; new instances inherit those prototype connections. - For components from a team library, place the library instance inside a new local master component. - Deep-select nested layers to create links without detaching the instance. ## Components for Scrolling Content - Convert long scrolling content into a component to preview how different device viewports initially crop it. - Set constraints for internal elements and enable **Clip content**. - Configure the desired scrolling direction through **Overflow Behavior** in prototype mode. - Place and resize component instances within designs to compare viewport-specific views while managing content centrally. ## Timed Delays and Overlays - Use the **After Delay** trigger to make transitions feel less abrupt. - Combine timed delays with overlays to simulate loading states or intermediate feedback. - For example, a form can show a submission state, brief loading sequence, and success message before navigating to a confirmation page. ## Table of Contents for Multiple Flows - Create a table-of-contents frame as the prototype’s starting screen. - Link each option to a different user flow, allowing one shared URL to present multiple design alternatives. - All flows must be located on the same Figma page. ## Observation Mode - Use Observation Mode to follow a collaborator’s view in the editor or prototype. - It supports remote user testing by showing where users are and how they interact with the design. - It is also useful for helping meeting participants follow along during presentations. These techniques make Figma prototypes easier to build, reuse, test, and present. Centralizing repeated behavior in components and using realistic timing and navigation can significantly streamline the workflow.

Figma User Experience Prototyping Interaction Design+3

figmaApr 30, 20192 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.

Figma Design Systems Prototyping API+1

figmaApr 24, 20192 min readCurated summary

Getting to the bottom of line height in Figma | Figma Blog

Figma explains why it is changing text layout so that extra line height is distributed above and below letters and measured more modernly. The decision grew out of a historical review of typography, from metal type to digital fonts, where old physical constraints and platform inconsistencies shaped today’s behavior. The update is optional, and existing files remain unchanged unless users choose to update them. ## Figma’s New Approach - Figma will distribute extra line height above and below text rather than handling it through older conventions. - Line height will be measured in a more modern way. - The change is optional: - Existing files will not change automatically. - Users can update older text at their own pace. - Figma developed the approach through research and testing because its users employ text in many different contexts. ## The Early Centuries of Typesetting - Metal type separated typography into two roles: - Type designers created letterforms. - Typesetters arranged physical blocks into readable pages. - Font size referred to the height of the metal block, not necessarily the visible letters. - Two fonts with the same nominal size could have different letter heights and baseline positions. - Typesetters could place lines directly together, a practice called setting type solid. - To improve readability, they inserted thin strips of lead between lines. - This spacing was called “leading,” pronounced “ledding.” - For example, 16-point type with 4 points of leading produced a 20-point line height. - Choosing the right amount of leading depended on the font, font size, and line length. - The physical system imposed constraints: - Leading could be added but not removed. - Fonts generally arrived as fixed, unchangeable blocks. - Baselines and internal font proportions varied between typefaces. ## Digital Typography Introduces New Problems - Computers replaced physical type blocks with collections of numerical data stored in font files. - Fonts had to support different platforms and formats, including Windows, Macintosh, and OS/2. - Rendering differences, bugs, and platform-specific behavior made typography less consistent. - Digital typography also created new freedoms: - Text could extend beyond traditional font boxes. - Elements could overlap. - Typesetters could add, reduce, or completely remove leading. - Unlike metal type, digital fonts could define arbitrary default line heights, often making them taller than the nominal font size for improved readability. Figma’s changes attempt to preserve useful typographic principles while adapting them to the flexibility—and historical complications—of digital text layout.

Figma CSS Typography Web Design+2

figmaApr 21, 20192 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.

Figma Design Systems Prototyping Github+3

figmaApr 14, 20192 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.

Figma Design Systems Component Library Design Ops+1

figmaApr 3, 20192 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.

Figma Design Systems User Experience User Interface+2

figmaApr 2, 20192 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.

Figma Design Systems Component Libraries Regular Expressions+1

figmaApr 1, 20193 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.

Figma Design Systems Accessibility CSS+4