2023 Figma Component Trends Overview
The Rise of Simplicity in UI Design
2023 has seen a definitive trend towards simplicity in UI design, with basic components like buttons and icons reigning supreme among Figma users. This preference underscores a broader shift towards minimalist design principles, emphasizing functionality and ease of use.
Bridging the Knowledge Gap
Despite Figma's growing popularity, there's a notable gap in users' understanding of its full capabilities. Many designers are still on the learning curve, seeking to master the art of creating effective components within Figma's innovative framework.
The Complexity Within Simplicity
Complex components such as dropdowns and navigation bars, constructed from multiple simpler elements, have emerged as popular choices. This trend highlights the creative ways designers are combining basic components to solve more complex design challenges.
Web Over Apps
When it comes to layout components, web-based projects have outpaced app designs in popularity. This preference indicates a stronger focus on responsive web design, possibly driven by the wider reach and accessibility of web platforms compared to apps.
Conclusion
The trends of 2023 paint a picture of a design community that values simplicity, seeks to deepen its understanding of powerful tools like Figma, and creatively overcomes design challenges by combining basic elements into complex solutions. As Figma continues to evolve, it will be fascinating to see how these trends develop and what new patterns will emerge in the world of digital design.
Every month, (and in this case, for all of 2023,) Component Collector curates a list of the top and most-used Figma components. These components range from UI elements like buttons and input fields to full layout 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.
1.
Rounded Button
The Component Collector Rounded Button facilitates user actions; can be used for CTAs, prompts, or interaction points across designs.
2023 was the year of rounded border radii. Rounded buttons were incredibly popular, and so this basic component dominated. As basic as this Figma component is, there is still some nuance in its construction. We carefully considered the ratios allocated for padding, rounding, as well as the included size variants.
1.
Input: Dropdown with Tray
The Dropdown Component provides an intuitive way to present multiple choices with a variety of supporting metadata. This component's various states cater to common interaction scenarios, making it a staple UI for forms, settings, and filters.
1.
Table Template
The Table Template component offers diverse table data and cell styles; suitable for varied text-based data presentations. This Figma Component has been used for bulk content status display as commonly found in CRMs and project management tool UIs. This table focuses on the typography needed to imply different hierarchies for text in an intuitive and digestible way. It is resizable and built with 100% auto layout.
1.
Simple Comparison Table
Simple Comparison Table lays out comparative data; apt for product comparisons, feature breakdowns, or choice assistance.
1.
Calendar UI (Auto Layout)
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.
1.
Search Filters with Tags / Chips
The Search Filters with Tags / Chips component uses popular tag-based UI concepts to easily enable detailed search results. Tags, chips, and badges are all common names for the same UI concept of organizing input results into labeled groups. This figma component empowers users to refine their search based on these groups like: categories, price ranges, date ranges, colors, etc. It not only streamlines user navigation but also potentially quickens the path to conversion by presenting users with results most relevant to their needs and preferences.
1.
Square Button
Component Collector's Square Button drives user interactions; versatile for varied CTAs, app functions, or website prompts.
2023 definitely favored rounded buttons, but any base UI component was heavily favored and so the classic square button was still in the top 10.
1.
Scrollbar UI
The Scrollbar UI component is a convenient way to indicate content overflow in a container within a design file. This Figma component helps content navigation that is essential for tables, search results, list views and other media-rich sections.
1.
Card: Web Product / eCommerce
The Product / eCommerce Cards Pack: I component showcases products and meta content in an online retail environment. These cards combine elegance and functionality, providing a snapshot of product details, pricing, and images, all laid out in an engaging and easy-to-browse format. This Figma component is designed to drive conversion and includes options with varying levels of supporting content. It is optimal for e-commerce galleries, product showcases, or catalog pages. All common UI sizes are included and the core components are easy to resize if needed.
1.
Logo & Branding Presentation
Last but not least: The Logo / Brand Presentation Template is a Figma-ready toolkit that offers a professional and impactful way to showcase a brand's visual identity. This Figma component is designed to highlight branding elements with a series of customizable slides that detail the logo variations, color palettes, typography, and application mockups. It's an ideal solution for designers looking to present their brand strategy and identity with a flexible narrative and without obstructive clutter. Whether for pitches, brand guidelines, or internal reviews, this template ensures your brand is displayed with the sophistication and coherence it deserves.
While UI components like buttons and inputs remain foundational in design systems, Component Collector sets itself apart by offering pre-made page layouts and sections. These templates incorporate popular components into specific designs, offering a holistic solution to design needs. It's an invitation to explore beyond the basics, discovering less common components that bring custom design solutions to the forefront. This approach not only enhances the utility of standard UI elements but also opens the door to innovative design possibilities, encouraging designers to delve into a world of creativity and customization with both popular and unique Figma components.
