TheFigma webdesign tool gathers hundreds of templates to duplicate for free from the Figma Community. In this article we have selected 5 very useful templates for any kind of webdesign project.

1. Design Sprint

The Design Sprint is a method used by many start-ups to release products in record time. It is composed of several steps of design thinking and conditioned by a time constraint.

This design sprint model realized on FigJam is divided into 4 steps spread over 5 days

• Define the problem
• Find a solution
• Create a prototype
• Testing users

Figma sprint design template

2. Design System

A Design System gathersall the UI elements related to a web design project. It also integrates the rules and styles related to the layout, such as colors, typography, sizes, spacing, etc.

The objective is to be able to centralize and organize in a single file all the elements that will be necessary for the development of the project. The design system is therefore an essential tool for working with other designers and when handing over the project to web developers.

This system design model is organized into 11 element types:

• Colors: primary, secondary, HEX codes
• Typography: sizes, font families, spacing
• The iconography: all the icons used
• Spacing: spaces used between sections
• Text fields: all the fields according to their status (to be filled in, mandatory, validated, etc.)
• Selectors: dropdown lists, toggle, radio buton, tabs, etc.
• Buttons: all CTAs according to their status (active, inactive, hovered, etc.)
• Smaller elements: all other graphic elements, for example related to forms, buttons to close a window, etc.
• Large elements: such as tables, CTAs, dropdowns, etc.
• Cards: like blog cards, customer testimonial cards, etc.

Figma system design model

3. Graphic Charter

The graphic charter is a reference document on which you will define the rules of graphic identity of a brand. This graphic charter model gives you a first basis to establish the artistic direction of your projects:

• Moodboard
• Colours
• Typographies
• Software library
• Web screenings

Figma graphic charter template

4. UX elements

TheUX of a mockup is thedesign stage where you will build the structure of the site. You will be able to define each section of each page of the site, to start building your user experience. The elements used in UX are different from those used in UI because no design concept comes into play. They are areas with places for text, images, CTAs, etc.

Here is a Figma template with dozens of UI elements that you can reuse for your wireframe.

• Navbars
• Footers
• Headers
• Galleries
• Contact sections
• Price sections
• Testimonials
• FAQ
• Blogs section
• Landing page
• etc.

Figma UX element model

Read our article to learn more about using the Relume Library.

5. UI components

Figma components are types of graphical elements that you can identify by three types of properties:

1. they are integrated in several places on your models and projects
2. they are linked to one or more "child" elements: instances
3. they can have one or more variants

The objective is to be able to define elements that you can easily re-use on one or more projects. This Figma model is a first base gathering hundreds of UI components to reuse on all your projects. 

• Buttons
• Icons
• Typographies
• Layouts
• Navigation (menus, dropdown, pagination, steps, etc.)
• Forms
• Checkbox, Radio buton, Switch, etc.
• Badges
• Avatars
• Cards
• etc.

Figma IU component model