By using Figma, I’ve developed an ecommerce website based on my own Design System. This template includes all basic webshop pages such as; galleries, homepage, and various product detail pages. The website is based on a 12 column design on which all components for different devices have been designed responsively. All basic functionalities for a webshop are present in the design. This project serves as a template for other websites that can be realized quicky with minimal changes.
The design is largely created using Figma’s auto layout function. Depending on the design, components are displayed in a different place. Here is an example of the product detailpage. Click the preview button to view a hi-res version of the homepage.
The webshop comes with filters, navigation, galleries and of course the standard functionalities that a modern website should have. The design is largely determined by 2 main colors. Orange to display promotions and blue is used for the brand and is also linked to interactive elements such as CTAs.
The design uses the elements that were designed in my own Design System within Figma. By using tokens and variables, each element of the website is designed separately. And by converting elements to components the design is easy to use and flexible. To view the full Design System, follow the link below.