Component Library | Techlist.io

figmaOct 6, 20193 min readCurated summary

Customer journey mapping with Figma | Figma Blog

Customer journey maps help teams build a shared understanding of how people experience a process, including emotions, pain points, and opportunities for improvement. The article explains how Lextech uses Figma to research, create, refine, and validate these maps collaboratively. Figma’s component libraries, collaboration tools, version history, and comments make journey mapping more consistent and easier to share with clients and customers. ## When Customer Journey Maps Are Useful - Journey maps visually tell the story of a customer process, such as shopping for a car or purchasing a product online. - They combine process steps with customer emotions and pain points. - A shared map helps people with different perspectives understand research and identify improvement opportunities. - Journey maps are less suitable for highly nonlinear processes with many branches or dependencies; a two-dimensional user-flow diagram may work better. - They may also add limited value when a process is already well documented through other visual methods. ## Building a Journey Map Component Library - Teams can create reusable components and styles specifically for journey maps. - A shared library improves visual consistency and speeds up the creation of new maps. - Global style or component updates can be applied efficiently when the design changes. - Lextech provides a sample Figma file and component library as a starting point. ## Keeping Maps Organized with Tidy Up - Figma’s **Tidy Up** feature helps adjust spacing between journey steps. - It makes it easier to insert or reorder steps without rebuilding large portions of the map. ## Research and Real-Time Collaboration - Multiple designers can work on the same journey map simultaneously. - Lextech also records interview notes directly in Figma, keeping research and map development in one location rather than spreading information across multiple tools. ## Using Version History - Before sending a map to clients, the team manually timestamps a version in the file’s history. - This creates a reliable reference point if the team needs to revisit an earlier state. - Showing how a map evolved can help clients understand how research findings changed the team’s understanding of the customer. ## Gathering Feedback with Comments - Lextech shares rough journey maps with customers to validate research and uncover missing steps. - Comments provide a centralized feedback channel tied to precise locations on the map. - Teams can ask follow-up questions directly in comment threads. - For asynchronous reviews, the team duplicates the file, shares the map as a single-screen prototype, and invites users to comment. - During live reviews, a designer records participant feedback directly in the file. - Separate file copies can prevent earlier comments from biasing new reviewers and make it easier to compare feedback from customers, clients, and other groups. Figma is most effective when journey maps are treated as collaborative, evolving research artifacts rather than static deliverables. Start with reusable components, keep research and feedback in the same file, and validate the map with real users before using it to guide design decisions.

Read original

Component Library Figma Prototyping Real Time Collaboration+2

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.

Read original

Component Library Figma Design Systems Design Ops+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.

Read original

Component Library Figma Design Systems Accessibility+4

figmaFeb 25, 20192 min readCurated summary

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

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

Read original

Component Library Figma Design Systems User Experience+2

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.

Read original

Component Library Figma Design Systems Atomic Design+2

figmaSep 18, 20172 min readCurated summary

Team Library 1.0 | Figma Blog

Figma’s Team Library 1.0 turns shared components into a centralized foundation for collaborative design systems. Building on feedback from its February beta, the release improves component discovery, documentation, and organization. Figma argues that its centralized, online platform can keep teams synchronized without third-party tools or custom internal systems. ## A Centralized Source of Truth - Teams can share buttons, icons, dialogs, and other components across files and with all team members. - Published components and updates appear immediately in the Team Library. - Users receive notifications when shared components change and can choose whether to apply updates to their local instances. - Centralized storage eliminates manual exporting, syncing, and reliance on tools such as Slack, Google Docs, or custom company software. ## Improved Component Browsing - The beta required repeatedly opening a pop-up that obscured the canvas. - Team components are now available in a dedicated tab in the left sidebar, alongside layers. - Designers can drag components directly from the sidebar into their designs. - A separate local-components tab provides an overview of what will be published. - The sidebar tabs can be switched quickly with `Alt+1`. ## Built-In Component Documentation - The beta provided no place to explain how or when components should be used. - Team Library 1.0 adds documentation fields in the right-hand properties panel. - Teammates can read this guidance while browsing components, keeping usage information attached to the component itself. ## Better Categorization and Organization - The beta organized components only by file, which made larger libraries difficult to navigate. - Components can now also be grouped by frame and group. - For example, button components placed in a group named “Buttons” appear together under that category. - Shared component thumbnails can be visually customized by changing the background color of their containing frame. Figma presents Team Library 1.0 as a practical foundation for building and maintaining living design systems. Teams can adopt shared components with less friction, while documentation and categorization make those systems easier to understand and scale.

Read original

Component Library Figma Design Systems Collaborative Design+1