Summer Top 15 — Figma resources released recently
Handpicked collection of the newest templates for Figma: UI kits, UX tools, design systems, icons, illustrations, etc.
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
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 — яркая дизайн-система, основанная на атомарном дизайне
- 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.
Vector Character Illustrations
15 / 15
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.
Realistic Canon 70–200mm f/2.8
14 / 15
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.
3D models for your app design
13 / 15
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.
Flamingo Design System
12 / 15
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.
Figma Animation Examples
11 / 15
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/
Teenyicons
10 / 15
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.
Segment UI Kit
9 / 15
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.
Interactive Journey Map
8 / 15
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.
UX Templates
7 / 15
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.
Airtable Blocks UI Kit
6 / 15
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.
Figma Charts & Infographics
5 / 15
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.
Templatery
4 / 15
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.
Exo Kit Design System for Figma
3 / 15
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.
Pajamas UI Kit — GitLab’s Component Library
2 / 15
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/
Radius Design Kit
1 / 15
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.
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!
