Summer Top 15 Figma resources released recently

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

‍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

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

‍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

‍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://www.jurn.io/figma-animation-examples/

{{spacer-64}}

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

Teenyicons

‍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

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

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

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

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

‍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

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

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