Every month Component Collector curates a list of the design system's most-used Figma components. These components range from UI elements like buttons and input fields to layout tools such as website heroes and progress trackers. Each component is designed to enhance Figma projects by offering high-quality, versatile elements that are easy to integrate. Past highlights include a variety of map styles, detailed metadata for Google Maps standards, and responsive designs that ensure functionality across devices. This selection reflects the most popular tools among designers, aimed at streamlining the design process and elevating project aesthetics.
Join our monthly newsletter. Subscribe now and receive the latest Figma component updates, design trends biased around UI/X, and the occasional free credits for Component Collector.
The 'Search with Autocomplete Tray' component for Figma offers a sophisticated search interface equipped with autocomplete and type ahead features. This component enhances user experience by providing real-time suggestions and predictions as users type, streamlining the search process and improving efficiency. Ideal for websites and applications that prioritize quick and accurate search functionality, this component is designed to be both intuitive and responsive, ensuring seamless integration into any project while catering to modern user expectations.
The Minimal Desktop Authentication component offers a simple and elegant solution for user onboarding processes on desktop apps and websites. This component includes essential views for sign-up and two-factor authentication (2FA / MFA), all presented in a simple centered design focused on clarity and pacing. This Figma component includes both light and dark modes and strikes the perfect balance between style and practicality.
The Location Map Hero component for Figma offers a variety of map styles and detailed metadata, designed to align with popular Google Maps standards. This website hero layout is crafted for responsiveness, ensuring seamless adaptation across different devices. It guarantees your maps look exceptional on any screen, enhancing the visual appeal and functionality of your projects.
The 'Calendar Datepicker Input' component is a sleek and user-friendly UI element for date selection in web and app projects. This Figma component integrates a pop-up, (or modal), calendar view, allowing users to easily pick dates for booking systems, event scheduling, and task setting. This component 100% auto layout, responsive, and easy to modify or repurpose in Figma designs. an effective starting point for any date selection UI.
The Header Navigation Mega Menu Dropdown component gives designers flexible options for organizing pages in global navigation. This Figma component has size variants to accommodate different volumes of content with options for icons, buttons and descriptions. The design is highly adaptable and provides a functional foundation for modern navigation UI.
The Vector Noise Texture component provides designers with high-quality, versatile vector-based textures that add a creative noise effect to any project. Ideal for backgrounds, overlays, or to give a visual boost to your design elements, these textures are a must-have in any design toolkit. They are perfect for web and mobile applications, marketing materials, and branding projects, ensuring a modern and dynamic aesthetic. With Figma compatibility, these textures can be easily adapted to fit your specific needs and branding guidelines. We use this all of the time, it's just large enough to be easy to use in Figma. (Too many vector objects will really slow down performance.)
Checkboxes and Radio Input simplifies selection processes; optimal for forms and dashboards requiring user inputs.
The Rounded Button component, designed for user interactions such as CTAs, prompts, or interaction points, has seen a surge in popularity within SaaS products. This component's smooth, user-friendly design not only enhances aesthetic appeal but also improves user experience across various design frameworks.
The Categorized Fullscreen Calendar UI component offers a comprehensive and responsive solution for managing and displaying categorized events in an organized format. This Figma component is fully designed with auto layout and adapts seamlessly to various screen sizes, ensuring optimal functionality and readability across all devices. It's an ideal interface for applications requiring a detailed overview of events, appointments, or tasks, sorted into intuitive categories for ease of access and clarity. The fullscreen layout provides an expansive view which gives some necessary space for calendar event metadata.
Lastly, this component also serves as effective guide for constructing complicated tables in Figma. The weekly days are essentially columns containing rows of varying heights that must still respect an underlying grid.
The Progress Tracker component is a dynamic, timeline-style tool designed to guide users through intricate account setup processes or multi-step tasks. This Figma Component visually displays the user's current progress in a series of steps, clearly highlighting completed, ongoing, and upcoming stages. This component is invaluable for enhancing user orientation and motivation, especially in complex procedures, by providing a clear roadmap of the journey ahead and a sense of accomplishment for each completed phase. Its intuitive design ensures users always know where they are in the process, reducing confusion and improving overall user experience.
The Big Photo Website Hero component offers a commanding header design for desktop websites, featuring a prominent, full-width image (or full-column-width) as its focal point. Accompanied by bold, white overlay text, this 'hero' design ensures high visual impact and immediate user engagement upon landing on the page. It's an essential tool for any site looking to make a strong first impression with striking imagery and clear messaging.
The Mobile Checkout Form component template is specifically designed for a website-based, mobile checkout experience, suitable for e-commerce websites and SaaS platforms with product offerings. It offers a user-friendly, single-column layout that adapts flawlessly to smaller screens, ensuring all steps from product review to payment submission are clear and easily navigable. This Figma component is crafted to simplify the checkout process, minimize typing, and expedite transactions, providing a smooth and efficient pathway to purchase that’s essential for the on-the-go consumer.
Simple Comparison Table lays out comparative data; apt for product comparisons, feature breakdowns, or choice assistance.
Pricing Page Wireframe Layout component for Figma offers a streamlined and organized design for showcasing pricing options. It includes:
- Sections for multiple pricing tiers, each with space for plan names, features, and pricing details
- Optional highlight areas for featured or popular plans
- Layouts for additional elements, such as FAQs, testimonials, and call-to-action buttons
This wireframe is ideal for businesses, SaaS companies, or service providers who want a clear and effective way to present pricing options. The fully customizable layout makes it easy to adapt to any brand or project, ensuring a polished and persuasive pricing page experience.
The Infographic Timeline' component offers a visually striking and elegantly designed solution for showcasing chronological events or milestones. This aesthetic infographic template timeline merges aesthetic appeal with functional design, featuring flexible label styles, and a harmonious color palette. This Figma component is ideal for project roadmaps, historical timelines, process flows, and social media content. It provides a flexible narrative for presenting either a few detailed events, or larger number of simpler events.
