Last week, I shared a video introduction to the DesignKit in Figma. Today, I want to show you my entire website design process in Figma.

This is an overview of my complete workflow, which I’ve been using for my clients for several years. It’s been highly successful, and I hope it can help you as well!

What this video is going to cover:

• Set up the correct file structure for your website projects.
• Create a simple workflow between your working and client preview files.
• Use the design exploration templates to collect your research and inspiration.
• Create style tiles to explore different design directions quickly.
• Use annotations and arrows to present your wireframes better.
• The process of going from wireframes to final design mockups.

So far, we’ve covered the basic principles of working with DesignKit in Figma. In the next video, we’ll dive into the actual wireframing process from start to finish.

Are you ready to give DesignKit a try? Improve your own designing process and workflow today.