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 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 Search Results Page UI component provides users with a simple and organized starting point when designing search result pages. It is designed for both desktop and mobile experiences and includes options for filters, sorting, and varied search inputs all within a proven search-based design pattern.
The Article Grid component presents a modern way to showcase articles using a neumorphic design style. This grid layout features subtle drop shadows and soft edges, creating a sleek, three-dimensional look that makes each article card stand out. Perfect for digital magazines, blogs, or any content-rich websites, this Figma card component includes different sizes and elegantly stacks within itself in a grid format. The neumorphic design adds a touch of class and depth to your webpage, ensuring a delightful reading experience for your audience.
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.
Checkboxes and Radio Input simplifies selection processes; optimal for forms and dashboards requiring user inputs.
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.)
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 '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 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 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 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.
Simple Comparison Table lays out comparative data; apt for product comparisons, feature breakdowns, or choice assistance.
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.
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.
This component offers a structured template for designing mobile app settings interfaces. Prioritizing user-friendly navigation, it organizes various configuration options, toggles, and preferences in an intuitive layout. It is useful in designing supporting app pages needed for users to control personalization and app settings experience.
