Designing intuitive and adaptable templates is at the core of my work. I strive to make no-code website creation seamless, empowering users to build professional sites with ease.
I'm passionate about making web design more accessible for all creators. My mission is to help users create high-quality websites effortlessly.
Project Overview
I designed a custom, fully responsive website template in Figma for <div>RIOTS, where it will be used by 30,000+ users through the figma.to.website plugin. The project started after I received an email invitation to contribute high-quality templates.
The template needed to be fully responsive, well-structured, and ready to publish using the plugin. It had to be organized, use components for shared elements, and be original, under 10 pages, and free of copyrighted images.
Since web development agencies often need common pages like Home, About Us, Services, Projects, and FAQs, I structured the template around those. While I didn’t fully develop the Contact page, I planned for it to redirect users to email for inquiries.
Design & Approach
At first, I considered using multiple frames per page, but after discussing with Georges Gomes, CEO of DIV RIOTS SAS, I switched to a single-frame approach. This decision helped with responsiveness and made the template easier to adapt for different use cases. It also secured the maximum compensation rate for my work.
Initially, due to Figma’s free plan limitations, I achieved responsiveness using max and min width constraints instead of variable modes. However, after submitting the template, I later improved it by utilizing variable modes for better execution and usability.
Key design highlights:
❋ Fully responsive across all devices
❋ Single-frame pages for a streamlined build
❋ Flexible sections—while designed for digital agencies, elements like the hero section can work for other industries
❋ User-friendly setup requiring minimal coding
Implementation
To make sure the template worked smoothly with figma.to.website,
❋ Designed an organized, easy-to-edit Figma file, structuring assets, style guides, components, and wireframes separately
❋ Ensured seamless responsiveness through testing
❋ Optimized for clean design-to-code conversion
Though the initial version relied on max/min width for responsiveness, I later refined it with variable modes, making the design more adaptable for users.
The site preview in this case study reflects the original version submitted to <div>RIOTS, ensuring consistency with the official release.
Conclusion
This project was a great success, with positive feedback from Georges Gomes. He praised the design as 'wonderful work' and noted that the template had great potential. Following this, they offered me another collaboration opportunity, reinforcing their confidence in my work. This experience highlights my ability to create high-quality, market-ready designs that meet industry standards.
