Using Figma Templates for E-Commerce sites

Figma templates are a good way to enhance your art of designing & if you are new to this field, this article will teach you how to use templates in Figma from community region to get the best out of it. In this article, we will try to learn how to use Figma templates for E-Commerce sites.

Figma Templates

Figma templates are the design skeletals that are provided in the community pages of the dashboard of Figma application. It provides a basic structure as to how can you create a design of your own by making a few changes to the existing design, such as changing the text, typography, colors or images.

The community plugin option lies in the topmost bar of the Figma application like the icon of a web.

Here we will search for an E-commerce design so type e commerce in the search bar at the top rightmost side and open a template of choice such as this:

The template will show like this with different pages created of the e commerce website & we can choose any one of the below and start editing them according to our needs.

Hero component:

Editing an E-Commerce Site (Template)

Now let's start by rephrasing the template in order to create our own e commerce site. Let's say for eg, we want to create a simple landing page for a makeup brand e commerce site.

Step 1: Choose a page from the listed ones in the side panel. Here we have chosen the Hero page.

Step 2: Edit colors, or change them as you like it.

Step 3: Change the text & update it as required after removing the already set images.

Step 4: Finally set up some images by editing the previous set images.

Similarly, we can edit more such pages such as order page, checkout page to create a fully furnished e commerce website.

Login Component:

To create a login page, we can use the following component & simply add it to our page with a header & a footer:

Here is a template of the footer:

Add all of them to a single page & combine to create a Login page:

Best Practices for Template Editing in Figma

Template editing allows us to create wonderful graphics with lesser amount of hardwork & if we require a basic doable design which looks beautiful & do not want to work from scratch on it, template editing is the right choice for this. Here are some good practices for template edits:

1. Do not copy paste: Templates are basically entire designs created by other designers and we can take ideas from them & edit it along the way, but directly copying the entire design is not a means to be a good designer & takes away the ideas of others. And if we do so we must give entire credit to the designer of that template.
2. Edit all details according to your preferred theme: Edit the entire template according to the theme which you prefer, for eg. here we have used a makeup website so we have changed the existing green theme to light red theme.
3. Add your own edits: It is not necessary you have to make only a few changes in the existing figma file. It is advisable to add your own set of graphic elements to it as well as it gives a more bounce to the design and an enhanced creativity.

Conclusion

In the initial days of learning designing, templates of Figma for e-commerce sites are the best possible way to learn the art of design & development in Figma. Using the above methods and following the best practices, one can easily master the art of design.