View all articles
Top 20 Figma Templates for Web Designers in 2023
November 16, 2022
Ilamurugu R
UI / UX Designer

Don't you love Canva's drag & drop design resources? Are you looking for the same in a versatile tool like Figma? Figma's community templates are here to the rescue.

Figma has a versatile community of designers who create templates you can use. Templates range from file structure templates to entire landing pages.

When designing a user interface in Figma, it is always handy to have a bunch of templates in hand. Templates make your life easy by allowing you not to repeat things.

In this article, we have filtered through the countless Figma templates to come up with our top 20. We believe having this by your side will help you get the ground running as a designer.

Note: These templates are not placed in any order. Each template serves a different use case.

Resource Category Template Name Why Should You Choose This?
Learning and Skill Improvement Templates and Tutorials by Fons Mans Learn to do 3D in Figma
Status bars for all devices Starter Kit UI • Basics for Mobile, Tablet and Desktop Use of components and variants
Tables Data Table Completely auto layout
Shadows and Effects Neumorphic Shadows Get an in-depth understanding of shadows
Invoices Invoice Template (+Google Sheets Sync) Sync data directly from Google Sheets
Brainstorming Brainstorm Crazy 8s Has a template for rule and guidelines to conduct Crazy 8s
Mockups Device Mockups Covers all devices from Android to iOs to Desktop
Illustrations Illustrations Templates A diverse set of illustrations from which you can create your own style
Figma File Organisations OMD - Thumbnail Covers Publish the file as a library and you’re good to go
3D Illustrations 3D Illustration Templates A diverse set of illustrations from which you can create your own style
Bank Cards Bank Card Templates Mix and match various cards to create your own card
Presentation Decks Deck Templates Come with illustrations that go with the deck style
Moodboards Moodboard Templates Comes with a neatly organised layout to snap in images
Style Guides Brand Style Guide Template Ability to edit styles from the styles panel
Sprint Retros Island Retrospective Template Makes every retrospective calls fun
Case Studies Case Study Templates Behance-ready
Components Input Field Template Use of Figma latest component properties
Flow Charts Flow Chart Template Clear guidelines to create a flowchart
Social Media Instagram Carousel Templates Supports both dimensions used in Instagram
Grids Responsive Grid System Contains 3 fluid grids for mobile, tablet and desktop

1. Templates and Tutorials by Fons Mans

Let's start with some learning. These resources are from Fons Mans, a designer from the Netherlands. He regularly publishes templates and tutorials. These reusable files range from invoice templates to tutorials on creating iOS wallpapers - all in Figma. These templates can be used to understand what Figma is capable of in graphic design. Play with each file's small tips and tricks and create your illustrations.

We especially liked how 3D effects can be done using shadows and blur in Figma. This template will be worth downloading if you want to learn cool tips and tricks in Figma. Download the templates here.

Features Include:

• Reusable illustrations

• Step-by-step tutorials on how to design things

2. Status Bars For All Devices

Often, however good the design is, it might look slightly different on different devices. This kit by Julien Fovelle has got you covered. This file has all status bar templates for all devices, for Windows, macOS, iOS, and Android. Status bars are a small aspect of UI design, but they can make your design look close to what the user will see.

Sure, you can create a bunch of status bars from scratch. But the whole point of templates is to give you a head start. One primary reason to choose this template over the others is that everything is made of reusable components and variants. And guess what? This template also contains keyboard designs for all devices. But make sure to publish this library to whatever file you're working in so you access these components directly from the assets panel. So, there you go - drag and drop and bring your designs close to what the user will see. Get a copy of the template here.

Features Include:

• Use of components with Auto Layout

• Includes all known devices and operating systems

3. Auto Layout Tables

Creating tables in Figma can be a pain. Unfortunately, there's no native way to create a table in Figma - you must manually set up constraints in auto layout, which can be time-consuming. This data table by Aleksandra helps you set up a table in minutes. Since tables in Figma have a lot of nested frames, changing the constraints for one frame can affect the whole row or the entire table. So for starters, this template also includes a detailed guide on how to use the table and components. Awesome stuff! You can download this template here.

Features include

• Use of components and auto layout

• Great documentation on how to use this template for beginners

4. Neumorphic Shadows

Though neumorphic UI elements have a lot of usability issues, one might use them to create some incredible futuristic mockups. There's a bit of a learning curve to create these neumorphic shadows. That's where this template comes in handy.

This template will also give you an in-depth understanding of how shadows work in general to create a 3D object. You can get access to the template here.

Features include

• Use of predefined styles

• A clear description of shadow parameters

5. Invoice Template (+Google Sheets Sync)

Creating beautiful invoices can be time-consuming, especially if you want to maintain the data elsewhere. This awesome template by Abel Hancock syncs data directly from Google Sheets (How cool is that!), so you can have your information neatly organized and send a beautiful invoice. All you have to do is download the Google Sheets Sync plugin to get started. Freelancers and solo creators might find this helpful. Every designer or freelancer might have a different billing structure, so this might not serve your needs out of the box. But this made our list since Google sheets sync is a game changer for anyone. Download the template here.

Features Include:

• Sync with Google Sheets

• It has a great How-to guide

6. Brainstorm Crazy 8s

If you are a person who conducts workshops and frequently collaborates with your teammates, this one is for you. Figma has created a Crazy 8s template for you to use directly on Figjam. Get your teammates on board, collect 8 crazy ideas, vote, and discuss those ideas. Workshops can contain a lot of activities to collaborate and discuss. With Crazy 8s being one of the most common activities, you can drag and drop from this template and get started. A fun thing about this template is that the sticky notes snap perfectly into those 8 boxes! You can download this template here.

Features Include:

• Sticky notes that perfectly fit

• A template to add rules and problem statements.

7. Device Mockups

Every time you design a UI for a product or website, the frame will look different when viewed on an actual device. Mockups are used to solve this problem. The Figma community has a template to place your designs on mockups of any device. Mockups also provide another dimension to your designs. We have included this template as an extension of the status bar template mentioned above. These two templates combined can give you a clear-cut idea about how your designs will look on an actual device. Images are also easily replaceable by double-clicking on the placeholder image. You can get this template here.

Features Include

• Support for all screensizes - Mobiles, tablets, laptops

• A size guide for different devices

8. Illustrations

Illustrations are a great way to make your website or product more enjoyable. All the illustrations in the Figma community are SVGs, so you can play around with the colors and mix and match things. Since the illustrations are limited per template, the best way to do this is to pick resources from multiple templates. These templates are listed based on the consistency of the illustrations and the diversity to use in various domains. All these templates provide a considerable amount of free illustrations to try out before you buy the full versions.

Enjoying this article? Don't miss out on more exclusive insights and real-life digital product stories at LeadReads. Read by Top C Execs.

Some cool illustrations

Lucid Illustrations by Pixsellz

Vector Illustrations by Spencer Camp

Deft - Modern illustrations by Manivarma Thilakaraj

Snap Illustrations by Craftwork

Milano Illustrations by Streamline

9. File Thumbnails

Organization of files can make a whole world of difference, especially if multiple people are working on a project. File Thumbnails are like icons. They help you create a visual identity for each file.

Thumbnails are segregated based on the file type and can be easily changed with the help of components. These come in generic colors as a template, so you can change the colors to your brand colors at the component level and start using them. Make sure to publish this library to every file in your project to access these from the assets panel. We loved the way they managed to show almost everything related to that file in the thumbnail. You can duplicate this template here.

Features included

• Tags to show the current status of the file and the file type

• Icons to show the availability of certain elements in the file

• Option to add names of designers working on the file

10. 3D Illustrations

Are you planning to design an NFT website with cool 3D Illustrations? Guess what? The Figma community also has excellent open-source 3D resources. Though each file might have a limited number of illustrations, you can use multiple files to create combinations. A downside of using these resources might be that these are just PNG images and are not editable. We've picked a few of the best, considering the number of 3D resources and diverse styles.

Some 3D resources:

3dicons by Vijay Verma

SALY - 3D Illustration Pack by Alzea

Nikuu 3d Illustration Pack by Paperpillar

+1500 Memoji Pack by Moein Rabti

3D Shapes by Vic

11. Bank Card Templates

Using beautiful card mockups for a Fintech product has been the norm forever. Bank card templates in the community help you hit the ground running by changing the colors and text. As with 3D illustrations, mix and match various templates to create your unique card. Similar to the templates by Fons Mans, these cards are created on Figma using shadow and blur techniques. So you could also learn to create your cards for your future designs. We've picked a couple of resources with diverse styles and mockup options.

Some cool bank card templates:

Cardy by Piqo and Soroush Nasrpour

Nubia Bank Card by Elikem J. Daniels

12. Deck Templates

Got a presentation tomorrow and are not yet ready with the design? Choose the vibe you want to go with, download one of the excellent presentation deck templates from the community, replace the text, and you're done. Something that we liked about these templates is that they also come with illustrations that fit in the style of the deck - especially the one from Blush. Most of these presentations come with component support, so it should just be plug-and-play. We've picked a few templates that fit on different occasions.

Some deck templates:

Vibrance by RRGraph - A professional presentation template

Source of Truth Design Deck by Femke van Schoonhoven

Deck Template by Blush - A more playful template

Simple Slide Deck & Presentation by Sam Whiteman

13. Moodboard Template

Moodboards form an essential part of the web design process for any UI designer. It sets the direction visually and brings all the stakeholders to the same page before the actual design phase starts. This official template from Figma features readymade layouts to create visual mood boards in a snap. Some people like their mood boards to be free-flowing rather than organized. But this template brings in a structure that is easy to consume for all the stakeholders, not only designers. Drag and drop images into the placeholders, and you're good to go. You can get this template here.

14. Brand Style Guide Template

Once your mood board is created, you will have to draw inspiration from the mood board and create your style guide for your brand. There are several factors and points to include while creating a style guide. It has to be designed in a way that is scalable and easily editable in the future. These templates also have a page structure containing every aspect of a style guide, like iconography, illustrations style, colors, typography, etc., so you can build your styles on top of them. Since these also come with predefined styles, change the styles from the styles panel to establish your brand's style. We've collected a couple of templates for style guides. The first one, by Richard Dykes, covers the entire typography styles required for your brand. The next one by Tomasz Wieczorek has almost everything your brand needs - from colors to Social Media templates.

Some style guide templates

Dark Design Guide Template by Richard Dykes

Brand Style Guide Kit by Tomasz Wieczorek

15. Sprint Retro Template

It's always good to look back at your progress every once in a while. These are called retrospectives. These help you to understand the problems the team has faced, the risks, strengths, and opportunities to be improved in the next sprint. The Island Retrospective Template helps you do precisely that. We went for this template primarily because it has a fun element rather than keeping the retrospective calls dry. It also has these sticky notes in place so, in the end, you can weave out the whole journey of the sprint as a fun story that everyone can relate to. You can download this template here.

16. Case Study Template

It is always a good practice to document your design work, and to do that in a visually attractive way is another topic. The Figma community has some excellent templates for you to get started. One of the major platforms to showcase your case studies is Behance, which was a primary criterion for choosing these templates. All these case studies fit the requirements for a Behance case study, so these can be exported and uploaded right after adding your content. Case study templates can also be used as a checklist to avoid showcasing certain aspects of your design.

Some case study templates

Case Study Template by Putra

UX Case Study Template by Isaar Tahir

Behance Presentation Template by Agung Priowismawan

17. Input Field Template

One of the most common components used in web design is the input field component. Whether you want the user to fill out a form, submit their mail ID for a newsletter, or log in, input fields take center stage. And as every component does, input fields also have several variants. So why not make use of this template by Shyam Shahu Shrestha? Just edit the properties of the predefined variants, publish this library to all the files, and you're good to go. We liked that this template uses the latest component property feature from Figma, which means fewer variants exist. You can get a copy of this template here.

18. Flow Chart Template

Flow charts form an essential part of the ideation phase. But the problem is that not every stakeholder understands what each flowchart block does. This Figjam flowchart template defines a legend for each shape, line, and arrow. And in addition to that, they also have a list of shortcuts to use on Figjam to create a flowchart. Download this template here.

19. Instagram Carousel Templates

Over time, Figma has become more than a tool for UI design. It is also a popular tool for designing graphics for social media. So, the community also has templates for Instagram carousel posts. Instagram supports two sizes for carousels - 1080x1080 and 1080x1350, both of which are available in the templates listed below. All these templates use the Figma auto layout feature and have multiple themes to choose from, so it is almost like anyone could edit these templates.

Some cool carousel templates

Instagram Carousel by Viraj Aher

Easy Instagram Carousels by KREA8

Instagram Carousel Template by Johannes Ippen

20. Responsive Grid System by Wednesday Solutions

A grid system sets the base for consistent spacing of elements in your design. Here's a template we designed for the community and used for almost all the projects at Wednesday. It has been tested and works like butter for all devices.

This template ensures you've got everything to build a responsive grid system for your next project. One grid to rule them all! Get your copy of this template here.

Features included

• Guide to configuring breakpoints

• Hybrid grids

• 3 Fluid grids for mobile, tablet, and desktop

Thoughts on templates

The usage of templates is fun, but there is a fair bit of rework to be done to make good use of templates. Keep the template as a starting point to your design and build on top of it rather than duplicating it. These templates save us from doing the work that is done before that starting point. And in terms of organizing and reusing the templates, we advice you to make a duplicate of the file and work on the duplicate file. And as Figma is constantly evolving, the template might not be there in the community tomorrow! Happy designing y'all!

Where to go from here?

Figma has a robust community of designers that allows us to share resources to make our lives easy. If you are inspired and would like to share your work with the community, take a look at Figma's guide and become a contributor.