Summer Top 15 Figma resources released recently

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

Resources

Published on

August 7, 2022

|

3 mins read

Blog

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

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Jamshed Kasimov

Hey there, friends!

We're back with some awesome stuff reviewed. If you didn't see our previous articles on reviewing UI kits, design systems, and other various templates, feel free to check out this post and also this post.

Monitoring trends and finding the best resources for inspiration is an integral part of every designer's development. Especially nowadays, when staff reductions are everywhere and that's why we should not lose hearts and keep our heads up. It's super important to acquire new skills in design and improve them every day, or go into more niche design directions. We hope that the resources in today's overview will help you learn the architecture and order of creating your design system, as well as become an excellent source for beautiful decoration of your projects, and also help you understand the basic principles of working with Auto Layout and Smart Animate.

{{spacer-64}}

What's hot for today

  • Vector Character Illustrations – Library of illustrated characters in action
  • Figma Realism - Canon 70-200mm f/2.8 – Photorealistic image template
  • 3D models for your new app design – 3D shapes and compositions for Figma designs
  • Flamingo Design System – handy design system based on Atomic design
  • Figma Animation Examples – Figma animation tutorial with examples
  • Teenyicons – A huge library with outlined and solid icons
  • Segment UI Kit – a mobile UI kit that is based on customized Android guidelines
  • Interactive Journey Map – Journey mapping tool for UX design
  • Airtable Blocks UI Kit – Airtable's UI library
  • UX Templates – Templates for UX research
  • Figma Charts Infographics UI kit – Data visualization UI Kit
  • Templatery – Collection of templates for presentation
  • Exo Kit Design System for Figma – light and clean design system
  • Pajamas U Kit– GitLab's Component Library
  • Radius Design Kit – well documented and structured UI kit by Radius DS


So, without further ado – let's get started. Most useful stuff at the end of the publication.

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

<span class="blog_subtitle-caps">15 / 15</span>

Vector Character Illustrations

https://www.figma.com/community/file/865151903316043704

Vector Character Illustration is a good collection of 78 illustrations showing people in action - dancing, communicating, driving, taking selfies, etc. It's always good to have illustrations at hand and with this nice customizable resource, you can include these characters in various projects.

{{spacer-64}}

<span class="blog_subtitle-caps">14 / 15</span>

Realistic Canon 70-200mm f/2.8

Just a basic image of a camera, right? Not really! See how you can get almost a realistic picture in Figma from many small elements that have been carefully designed and structured together.

The template also has a frame with an outlined structure.

A great example of how you can diversify your Figma experience by playing around with elements.

{{spacer-64}}

<span class="blog_subtitle-caps">13 / 15</span>

3D models for your app design

https://www.figma.com/community/file/855530921435605688

3D models are currently a popular trend in web design. 3D illustrations are very often used in the design of landing pages for apps or websites. And now 3D is being dragged into Figma. There is no possibility of editing here, but you can design very interesting and effective projects with these elements.

Consists of 26 shapes, 22 compositions, and 12 mockups for demonstration purposes.

You can also check out the author's tutorial on how to change colors of 3D items in Figma.

{{spacer-64}}

<span class="blog_subtitle-caps">12 / 15</span>

Flamingo Design System

https://www.figma.com/community/file/859195262232492832

Flamingo is a small design system that can help aspiring designers. It's based on atomic design principles. Contains basic elements such as:

  • Foundations (Colors, Typography, Shadows, Spacers);
  • Atoms (Buttons, Inputs, Selects, Text areas, Checkboxes & Radios, Cards, Avatars, Tooltips and so forth);
  • Molecules (Form Elements, Inline Alerts, Notifications, Dropdowns, Selectors);
  • Organisms (Navigation, Footer, Mobile Sticky Actions, Side Panel);
  • And a couple of templates.

The author created this UI Kit for the needs of the company, which subsequently agreed to make the resource publicly available. So feel free to follow the link and get inspired by this product.

{{spacer-64}}

<span class="blog_subtitle-caps">11 / 15</span>

Figma Animation Examples

https://www.figma.com/community/file/866532393298219995

Figma animation tutorial with examples. This is a great resource for designers who like to spend a lot of time working on static designs and not dedicating time to animate their stuff.

In this template, you can find instructions on how to implement 7 animation tactics using Smart Animate to make your prototypes nice and smooth. Examples include:

  • Hamburger Menu - Tapping on the hamburger menu icon to open the menu and close it with the X (close) icon
  • Sliding tabs - the effect that displays the continuity in a transition by making the content move between states.
  • Loading delay – the effect that shows the loading state of pages
  • Page transitions – content appears from the bottom and can be swiped away like it's an overlay
  • Pulling to refresh - a very popular pattern which is used for getting new content
  • Swipe actions – great for swiping items right or left to see more actions
  • Multi-step modal - adds a multi-step modal to your design without having each screen in a separate frame.

If you need the more in-depth written description on how to create these animations, feel free to find it here: https://blog.jurn.io/figma-animation-examples/

{{spacer-64}}

<span class="blog_subtitle-caps">10 / 15</span>

Teenyicons

https://www.figma.com/community/file/866420896007969754

Teenyicons is an awesome icon set with 1160 free icons both outlined and solid styles. 1px stroke is editable, so you can play around with the intensity of the icons.

The extensive library of the icons includes the following categories: Basics, Essentials, Emoji, Interface, Commerce, Technology, Authoring, Real estate, Arrows, Files & folders, Tasks, chat & events, Social, Browsers, Design & Dev.

{{spacer-64}}

<span class="blog_subtitle-caps">9 / 15</span>

Segment UI Kit

Segment is a mobile UI kit that is based on components and customized Android guidelines. It contains color palette, typography, icons, and pre-built and responsive components for designing apps.

This UI kit will be very helpful for any designer or developer to kickstart a new project.

It has 380+ components to kickstart the process of designing and includes App Bars, Bottom Navs, Tabs, Toolbars, Cards, Chips, Dropdowns, Bottom Sheets, Buttons, Pickers, Progression Indicators, Selection Controls (Checkboxes, Radio Buttons, Switches) and so forth.

{{spacer-64}}

<span class="blog_subtitle-caps">8 / 15</span>

Interactive Journey Map

https://www.figma.com/community/file/812358656900783385

This great Figma resource speaks for itself – the Interactive Journey Map is a powerful and fully interactive journey mapping tool that you can use while working on a UX of your project.

It contains expandable mini user personas. You can start with user-flow elements and by working with them you can go deeper into the details. Additionally, you can play around with a color palette and make the ideal user journey map for the project you are working on. The eye-pleasing interactive elements will give beauty to your UX design, but they are also very super easy to use, which makes them super useful.

With Interactive Journey Map you can create as many users for your personas as you want. And there is also the Pains & Gains section with graphical elements and user quotes that you can include in your project.

{{spacer-64}}

<span class="blog_subtitle-caps">7 / 15</span>

UX Templates

https://www.figma.com/community/file/863488139273720724

Another UX tool on our list today. UX Templates are all about understanding users. With this Figma resource, you can start developing User Personas, User Journeys, User Surveys, and User Interviews. Here are some details for you:

User Persona

With this template, you can start designing User Personas. It's intended to help you structure your findings and add all the research data into this pre-built template.

All the sections are customizable; you can add new sections, edit the existing ones or delete unnecessary ones depending on the needs of future clients

Also, you can print it and work on paper if this option is more suitable for you.

User journey

With this template, you can design general customer journeys. It's very helpful in terms of structuring your research findings, and has a lot of sections, like: Problem and Solution Awareness, Consideration, Decision, Sign Up, etc.

User survey

This template contains a greeting text for a user survey, a list of general questions, and also a list of specific questions.

To use this template simply make adjustments to it by replacing the text highlighted with light gray color with your company's information. All the questions are customizable, so feel free to make changes to them that best suit your customer personas.

User interview

User Interview template contains: 1) the intro information that helps you introduce yourself to the people you are interviewing; 2) the list of common questions for user research that is divided into several stages of your user journey.

Usage principles of this template are the same as in the User survey. You can edit a list of questions depending on your needs.

{{spacer-64}}

<span class="blog_subtitle-caps">6 / 15</span>

Airtable Blocks UI Kit

https://www.figma.com/community/file/862805330899066752

With Airtable Blocks UI Kit you can start building your applications on top of Airtable's platform with the developer preview of Custom Blocks.

This Figma resource is well-thought-out and well-organized. The only con here is that the designers went too far with the auto layout: a lot of layers will have to be unwounded. Nevertheless, Airtable has a remarkably executed UI Kit which contains elements such as: Spacing, Text Styles, Colors, Buttons, Icons, Tokens, Controls, Record Cards, etc.

{{spacer-64}}

<span class="blog_subtitle-caps">5 / 15</span>

Figma Charts & Infographics

Figma Charts Infographics UI Kit is a huge library of data visualization patterns that are great for presentations, dashboards, visualizations, or any other design project where you would need to present data superbly. You can find a lot of components there: from simple bullet charts to complex correlation charts and financial candlesticks. Available in light and dark mode.

It's the lite version of a Premium Figma Charts & Infographics UI Kit. Although the charts in this UI Kit are not customizable, you can get a lot of inspiration and ideas on how to create charts in Figma.

{{spacer-64}}

<span class="blog_subtitle-caps">4 / 15</span>

Templatery

https://www.templatery.co/

We all know that to stand out with your idea you need a beautiful and effective presentation. Templatery will help you with that. This is a collection of wonderfully-crafted templates that will make your Figma presentations look solid and creative. Templatery has a lot of helpful designs that you can use to prepare the elevator pitches, idea visualizations, etc.

You don't need to export each frame and show them as pictures. Simply wire the frames in the Prototype mode and click the Play button. It's a much more interactive and handy way of presenting your project.

Right now Templatery has 10 presentation templates with 10-12 beautifully crafted slides in each template.

New templates are added regularly.

{{spacer-64}}

<span class="blog_subtitle-caps">3 / 15</span>

Exo Kit Design System for Figma

https://dribbble.com/shots/11967273-EXO-KIT-Design-System

Exo Kit opens the Top-3 in our list. It is a large library of a wide variety of elements: typography, colors, buttons, cards, fields.

This awesome kit is carefully designed so that you could have all the assets for your design system. Starting from the basis of any UI kit like: layout, colors & typography styles, shadows, and finishing with the well-constrained components, like buttons, badges, fields, cards, menu, navigations, tooltips, video player, and so forth. Lots of material to play with.

Also, there is a nice template library for demonstration purposes, which includes 22 patterns of such categories as Search, Sign Up, Hero, Testimonials, Team, Features, etc.

{{spacer-64}}

<span class="blog_subtitle-caps">2 / 15</span>

Pajamas UI Kit – GitLab's Component Library

https://www.figma.com/community/file/781156790581391771

The second place is occupied by the excellent GitLab's Component Library called Pajamas UI Kit. It is part of the extensive GitLab Design System.

Pajamas UI Kit consists of many well-constrained and beautifully designed components in 33 categories. The designers at GitLab tried hard to make this UI Kit as complete, useful, and efficient as possible. By adopting such a component library, you can create your design system two or three times faster than starting from scratch. Deserved second place in our review!

If you want to see the complete guidelines of this design system, check out their website: https://design.gitlab.com/

{{spacer-64}}

<span class="blog_subtitle-caps">BEST RESOURCE!</span>

Radius Design Kit

https://www.figma.com/community/file/831997833675385869

Here comes the winner of our today's list - the Radius Design Kit!

This kit is intended to accelerate the process of creating your design system.

It is a very neatly designed component library, with clear descriptions and guidelines on how to use styles, components, and the design kit itself.

It will reduce the risk and effort that you need to get started. All the components are fully tested, so you can rest assured that you will create a high-quality product using the components of the Radius Design Kit.

This kit is designed based on common techniques like the auto layout and constraints to build components. So, with such flexible pre-built components you can speed up your workflow design faster.

Radius includes a set of foundational elements like styles, typography, spacing, breakpoints, as well as lots of components and icons.

{{spacer-64}}

{{stars-conclusion}}

{{spacer-64}}

Conclusion

We hope you will benefit a lot from our list of Figma resources today. We'll keep you posted and share community news from the Figma world.

We will continue researching helpful resources and prepare quality reviews for you.

Always remember that hard times are the best time for professional growth. New skills — the best investment.

Take care and take action!

Recommended Figma posts

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

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

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

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 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

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Resources

2 mins read

Black Friday 2023: Unbeatable Deals on Figma Templates for Designers!

Maximize your Black Friday savings with exclusive deals on Figma assets for a more streamlined design workflow. Give your designs the competitive edge they deserve.

Resources

3 mins read

Best 20 design resources for startups, developers and designers

Explore a diverse collection of cool icons, powerful UI kits, and tools, along with a fascinating history of user interfaces on today's list.

Resources

2 mins read

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

Discover time-saving and cost-cutting product design templates from the Figma community to enhance productivity. Streamline your workflow and save time with our curated collection.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

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

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

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 gtp-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.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.