Figma templates by Setproduct

Design resources & UI kits

Inspiring design insights for creatives

Design tutorials

Navigating the job market storm: A webdev professional's tale

A developer's unexpected layoff becomes the catalyst for a deep dive into the job market and a meaningful transition into the world of UX/UI design.

Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases

This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.

Input UI Design – Optimize data forms UX with expertly crafted text fields

Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.

Notifications UI Design: Best practices, UX tips and popular use cases

Create engaging app experiences through optimized in-app notifications. Discover the UX/UI design techniques that ensure your notifications are visually appealing, accessible, and easily dismissible.

Chips UI Design – An essential tutorial for optimal UX & usability

Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.

Creating app settings UI design: Usability tips and best practices

Discover the key elements and design patterns of settings apps, and gain practical insights to enhance the user experience and accessibility of your own app Settings section.

Dropdown UI design – A guide for Anatomy, UX tips, and Use cases

Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!

Designers are worrying about the future: AI's impact on graphic UI design

Gain a deeper understanding of the impact that AI technology, exemplified by Firefly at Adobe, has on the design community. We will explore the excitement, concerns, and responsible practices that arise as designers navigate this transformative era.

Difference Between Quality Control And Quality Assurance

Understanding Quality Control vs. Quality Assurance: Key distinctions in ensuring product and service excellence. Learn their significance and implementation.

Filter UI Design: Tips and best practices for filtering UX flow

Discover how a well-designed filter can significantly enhance the user experience by simplifying complex data sets and product catalogs. Unlock the secrets behind intuitive filter systems to improve overall user satisfaction and navigation efficiency in your UI design.

Stressful phrases from clients in graphic design hated by designers

Working with clients who don't understand the design process can be frustrating and stressful. This post explains how to manage those demands, setting boundaries and establishing clear communication strategies to keep the project on track.

iOS 17 design trends: More depth and shadows in Apple's mobile GUI

The release of iOS 17 has brought about a tine change in the user interface design of iPhones and iPads. We see increased use of shadows and a greater emphasis on depth, providing a more tactile and immersive experience for users.

Do you regret your career in graphic design? Let's find a renewal

As a graphic designer, you might be experiencing a feeling of dissatisfaction with your career. Perhaps you're currently updating your portfolio, facing the tedious task of aligning it with the latest industry trends, and suddenly realizing that you may not be as passionate about this line of work as you once thought.

Logo design ideas for creating a lasting visual identity

Whether you're a graphic designer, a marketing professional, or a brand design agency, this guide will help you design an original logo that is both visually appealing and effective in conveying the principles and identity of the brand.

Choosing app UI, UX design & development studio

How to choose the right web design and development agency for your application? It is a important decision that can have a major impact on the success of your product.

Buttons UI design – Comprehensive tutorial on UX, styles and usability

Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.

18 design & developer resources to boost your productivity and creativity

In today's list, you will find texture and gradient generators, beautiful fonts, Figma plugins, AI tools, and much more.

How is my clock hides behind a mountain? iOS 16 lock screen feature

No big deal! Apple used their advanced 3D rendering technology to create the mountain in the background. The mountain was rendered using a combination of textures, lighting, and shading to give it a realistic and lifelike appearance.

Freelance designer tips: Difficult clients & endless design revisions

Solid strategies on how to work with difficult design clients and protect yourself from endless revisions without getting paid additionally.

Datepicker UI design template - 56 calendars for Figma

We examined tons of datepickers to compile a comprehensive 56 calendars template for Figma, as not to miss any date picker UI detail. Especially, when you are stuck on your design task or tired of googling everywhere for calendar design inspiration

Calendar UI design – Date picker best practices & inspiration

Calendar & date picker UI design inspiration & UX tutorial. Got stuck at designing calendars? In addition to useful UX guide, covered in this post; we've included an inspiration gallery full of calendars. Enjoy, steal and remake!

Freelancer guide: how to switch from Fixed-Price to a Hourly Rate

How to set a hourly rate to avoid cases where a project with a pre-agreed amount ended up going beyond implementation because of seemingly insignificant changes on the client's side.

How to make 3D animation effect on page scroll HTML & JS

In this tutorial, we'll take the Apple AirPods page as an example and show you how to get this effect if you want to create a webpage with the same effect.

Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview

Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.

How to design a landing page to improve conversions

The process of making a high-converting landing page. We've put together design rules and outlined the structure of a successful website.

8 designers and developers bootstrapped a side project to success

We've gathered some inspiring stories of 8 Twitter fellas (mostly designers and developers), who bootstrapped their side projects to life and succeed.

Top 11 design tools and resources to kickstart your project

We've reviewed the most popular launches on ProductHunt after the first quarter of 2022 and here is what we discovered.

Badge UI design exploration — Tips & tricks, usability, and use cases review

Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.

Appbar UI design exploration — Anatomy, specs, states, templates

Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.

Accordion UI design exploration — Styles, states, usage, templates

Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.

Avatar UI design exploration — The states of userpic component

Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.

Why do we need UI kits: Our customer's redesign case study for ecommerce

Recently, we've interviewed a freelancing designer from India - Narendra Ram. He used our Material-X UI kit and made a high-quality and professional redesign of the seller’s panel of the GTrendz e-shop

Material–X: The tiny UI details you won't notice till you get too close

Fresh features and UI tricks: here is what's new in our enhanced Material-X design system for Figma

16 fresh design resources of February 2021

Here is what we are gonna review today: icons, emojis and illustrations, the coolest articles on working with color and tables for enterprise, effective plugins for Figma, sources for inspiration and much more

14 useful UI design resources handpicked. January 2021

What's in today's release: various generators, cool sources for your inspiration, stylish icons, top 2020 products from Product Hunt, tools for exporting animations and GIFs, and much more

The most significant releases of 2020 on a UI design scene

Last year has passed. It was a very unstable year that changed the way things were. In this post, we have summed up the results of 2020, where we have collected for you the top events from the design world

13 fresh and useful design resources of outgoing fall 2020

We’ve picked up the best links to resources that are trendy in the design industry, and that will help you get some inspiration and speed up your workflow

6 ways to generate side income for designers and developers

By launching your own side project, you have a great chance to make it your core business. Sometimes such projects become the work of a lifetime. Setproduct.com is living proof of this. It started as a side project, which became the main source of income within 2 months

Top 15 Figma resources: UI kit, design system, components, illustrations

Handpicked collection of the newest templates for Figma: UI kits, UX tools, design systems, icons, illustrations and more

iOS / Android app case study — From Figma UI kit to application release

This is the story of how a ready-made professional UI kit in Figma helped to create an app, which is now gaining popularity in the App Store and Play Market

Remote work: 9 tips to manage your time and get more productivity at home

Just follow a few simple rules that will seriously increase your effectiveness and help you manage your time wisely

Figma for enterprise: Top 10 tech companies where design tool helped to grow

This tool has proven to everyone it's worth it. Figma has convenient and wide functionality, and the fact that companies such as Microsoft and Uber give preference to Figma - already says a lot

Best 20 free Figma templates for your Design system, Dashboard or Application

Figma freebies reviewed: Ant UX Wireframes, Avatar Illustration System. Brainstorming Design System & Brainstorming Table System. Bright Kit - a kit to rapidly design the landing pages. Browk UI Kit - a design system that keeps updating every week

Top 14 Figma plugins for fixing styles, manage grid, auto-layout, run tracking and more

Plugins reviewed: AutoGrid - grid support for auto-layout. Tracking – plugin for creating tracking annotations. Find and Replace Colors – organizing color styles in design. Spacing Manager – plugin for consistent spacings in components. Geometric – creating math shapes and curves and more

Free Figma resources — Best 15 templates of design systems, applications, icons and more

Templates from the Figma community to save your time, boost a productivity and cut costs for a product design

Figma plugins review — Best 16 underrated plugins to speed up design workflow at the beginning of 2020

We’ve collected the tools that help us improve our workflow, boost our productivity and just add some joy to the design process. We’ll start from the last place, so make sure you don’t miss all the fun

Design system features - Start with the UI kit & app templates

How purchasing commercial design system for Figma (or Sketch) can save a significant amount of time for you or your organization

How to create UI kit - Design system to sell worldwide

Your design asset will help someone speed up their work and you will get rewarded for it

8 simple UI design tricks for more dynamics in static prototypes

Perhaps this will help to make your best shot on Dribbble or win a few points in customer's eye or the design team-lead, because of the use of these techniques positions you as a performer attentive to UI details

React Tables UI for a design system in Figma

Creating tables in the Figma design system and implementation in Storybook. Building tables with the help of components is an algorithm that is hardly required by every project, especially for a serious design system that is used by designers and developers within the organization

Table UI design tutorial – Figma data grid within single cell-component

There are three approaches to table design to create a data grid with a flexible architecture. In each case, either a row component, a column component or a cell component is used. Each of the cases will be discussed in detail below.

Buttons UI design - Figma to React styled components

Retouching Material Design components for performance, usability and visual satisfaction.

How to create responsive mobile components in Figma

Every time you create a new project, you want to make it better than the previous one. You want to choose a more elegant solution, to create convenient and flexible components of the design system in Figma.

Monetizing the design: what I learned after a year of non-stop UI grinding

My 15 insights of successful digital product. Results of the year for the UI designer, who didn`t have any interesting projects in his portfolio and decided to create his own design products for everyone.

Show more ⬇︎

Free Figma resources

Free Hyper Chart template sample for Figma

Free Hyper Chart dark template sample for Figma

DATA VISUALIZATION

Hyper Charts lite with 8 widgets

Transform your data into captivating visuals with several Figma's chart templates based on Hyper Charts kit. You'll find 8 editable widgets inside.

Calendar & date picker UI design for Figma

Calendar & date picker templates for Figma

MOBILE & DESKTOP

Calendars & Date picker templates

UI design resource with 56 calendars extracted from our popular UI kits. All the best samples of schedule patterns, planners, event managers.

Landing page template based on Zeus Web UI kit

Landing page template based on Zeus Web UI kit

WEB DESIGN

Website template by Zeus UI kit

This template contains all viewports for a landing page based on cards-driven UX. Themed with Syne and Space Grotesk free fonts.

Calendar & Events template for dashboard UI

Calendar & Events template for dashboard design

DESKTOP

Schedule & Events template

This clean calendar template has been made of a scalable grid, accurately made with colored items and wrapped for the desktop.

Material You for dashboards & Android apps

Material You for dashboards & Android apps

MOBILE & DESKTOP

Material You for the web

Figma Material Design 3 starter fully loaded with several desktop & mobile templates (with dark themes) and a bundle of components.

Panda design system with free desktop template

Panda design system with free components

DESKTOP

Panda dashboard template

Free lite version of Panda UI kit contains one dashboard template for analytics, several widgets and bunch of components to try out.

SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gpt-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.

SetGPT is a free service; however, authentication is required

Chart templates

$168

Dataviz UI kit with 400+ components. Fits for dashboards, presentations, visualizations. 150+ infographic templates included · Preview

$128

1000 editable graphs in blocks. Perfect for UI and UX designers who want to create professional charts quickly and easily · Preview

Orion Dataviz kit

$148

40+ graphs dark & light templates. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens · Preview

Dashboard templates

Material Design 3

$148

Figma Material You design system. 220+ templates crafted with 2600+ components variants based on m3.material.io guidelines · Preview

Material Desktop

$98

Figma library with 48 desktop dashboard templates based on Material design. 550+ components. Light & dark themes · Preview

Panda Dashboard

$148

Clean & modern dashboard UI Kit with 80+ desktop templates, 4000+ variants of components. Well-named, accurately organized · Preview

$168

70+ dashboard templates for desktop & mobile to quickstart your design mission with reusable web app layouts collection · Preview

$128

1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Contains 50+ templates · Preview

Material X UI kit

$148

1100+ components & 40 app templates beyond Material Design. Modern UI kit with styleguides form the nearest future · Preview

Design bundles

$310 ̶$̶4̶4̶4̶

Upgrade your data with our powerful bundle! Featuring Hyper Charts, Eclipse UI kit and Orion UI kit, these stunning resources will add a touch of brilliance to your visualisations.

$193 ̶$̶̶2̶7̶6̶

This bundle includes the versatile Hyper Charts templates and dynamic Orion UI kit, giving you UI toolkits to create stunning designs that communicate complex data.

$272 ̶̶$̶3̶9̶2̶

Perfect for those who require top-notch data visualization capabilities, our bundle features the Eclipse UI kit and Orion UI kit to help you create stunning, user-friendly interfaces.

$595 ̶$̶1̶1̶9̶0̶

Get the Setproduct Bigger bundle 50% OFF - 12+ design systems with discount. Dashboards, web, mobile, charts and more.

Material bundle

$138 ̶$̶̶1̶9̶6̶

Figma Material design library & Material desktop UI kit bundle. Get 30% OFF by purchasing two design libraries together.

$272 ̶̶$̶3̶9̶2̶

30% OFF for Material desktop + Charts UI kit + S8 Dashboard UI kit to cover all the possible desktop layout combinations.

Mobile templates

Full iOS UI kit

$88

Native mobile design system with 100+ components, 3300+ variants and 320 perfectly crafted app templates · Preview

Appka iOS UI kit

$168

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts · Preview

Mobile X UI kit

$98

860+ components & 157 reusable mobile layouts which fit both iOS / Android apps. Specs adopted to 8dp grid. Easy to adjust · Preview

Most iOS UI kit

$98

iOS components and app templates served as the Most Design System. 600+ components and 600 mobile screens included · Preview

$74

Mobile UI library for Figma. Consists of 140 scalable app templates made of total 250+ Android UI design components · Preview

$79

Nucleus is a serious UI component library that provides you with the building blocks you need to design your next mobile app · Preview

Design & Code

Figma React UI kit

$198

31 React components, 3700+ Figma variants, 60 coded templates designed in Figma and exported to styled BlueprintJS · Preview · Docs

Material Me React

$98

Based on Material Design 3 guidelines, this React library written in JS & PropTypes. Enhanced with Tailwind & NextJS · Preview · Docs

Xela Swift UI kit

$258

Fully coded customizable components, widgets and well-organized iOS screens for SwiftUI. Demo · Docs

$258

A library where Figma components are equal to Angular UI, helping designers and developers to stay in sync and release faster. Docs

Xela Jetpack kit

$258

Fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose. Demo · Docs

Xela Flutter UI kit

$258

XelaUI for Flutter is a simple, modular and accessible component library for Flutter apps mobile and desktop. Demo · Docs

Web design templates

$98

Multipurpose web design system to create hassle-free landing pages in Figma. 10 web design templates built with 630+ blocks · Preview

Web design UI kit

$86

Figma web design templates to create websites. Contains 140+ dark & light blocks and pre-made full width templates · Preview

$86

Handy landing pages collection full of trendy web ideas. Comes with mobile and desktop versions powered by 106+ blocks · Preview

Our happy customers ❤️

We helped more than 6,000 designers, developers and startups to design faster and better

Anqi is coming back for more UI kits, so we do deliver the quality!

You can hire our team to design custom templates

We aimed to save your time and give coupons for such kind of words ♥

Terence become our constant customer after his very first purchase

We're happy to see Richard as the returning buyer ❤

Tim discovered he can ship an app faster with Figma React UI kit

Ash was happy to get templates and smart boost

Kevin leared Figma with our design kits and we're happy to provide discounts for constant customers. Just ask!

Mr. Rich purchased a bundle with discount and happy about it

We are happy to wonder individual customers with a discount. Just ask!

Our customer Andrzej returned to try Material-X UI kit

Craig R. purchased Material–X and loving it

Robert A, succeed to learn Figma with iOS kit by Setproduct

Junaid S. happy to use fresh update for Figma React UI kit

Luke O'Brien improved his UI skill with Setproduct

Joe B. learned something new with Most iOS kit

Serious and businesslike client! But we ❤️ to see him happy

Happy customer, who tried several of our products

Satisfied buyer's email conversation. Thanks for a feedback, Jase!

Jan got his career level-up after applied one of our products

Jake L. as developer succeed with Material Design System and telling bay email

Rob's recommendations according our products. Appreciate!

Massimo purchased Material Design System and got his UI mission done

Dan Janowski satisfied a lot with Dashboard UI kit

Nicholas Rempel designed a lot of apps with Figma iOS kit

Toni Gemayel impressed by designs

Ananas Dapenis boosted a workflow with Material Design System

Irvin Rivera migrated to Figma after purchasing Material Design System

Janosi Laszlo recommends our design systems for Figma

Luckypunt - Reddit member considering our design products as useful

Alex Mercado provides an impressive testimonial about Dashboard UI kit

Nico Dejong reached his goals faster with Material Design System

Luke launched his app faster with Figma iOS kit

Leo Antonoff got his prototyping enhanced with Material Design System

Questions and Answers

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications