Earlier this year, the Lightflows team relaunched our website, and not ones to do things by halves, we rolled in an updated brand refresh as well. Here are the best web design tools we used in our 2025 project.
Wanting to introduce interactive motion graphics, paired with a modern graphic design look, that is tech inspired – a look pioneered by OpenAI and the wave of emerging AI businesses, we took in many inspirational sources from text based Swiss layouts, to retro infused 1980 graphic design – our journey of discovery took us in lots of directions with the team hunting high and low for new techniques and approaches.
In this post, we share the tools we used to design the site, including some awesome Figma plugins to make your website pop. Exploring the different web design software out there, we found there’s never been a better time to be a designer, and there are some incredible tools that can streamline the design process and deliver even more goodness than ever.
So, with absolutely no gate-keeping, let’s dig in and find out what, in our opinion, are the best web design and graphic design tools for 2025. Starting at number 10!
10. Spline 3D
At number 10 – A huge favourite, Spline Design. Spline Design is a powerful, but easy-to-use 3D modelling and effects tool – it supports web embedding and is super intuitive and easy to get great-looking 3D and 2D assets. The tool enables designers to create and manipulate high-quality visual elements for web projects, enhancing both aesthetics and functionality. Some of our favourite post-processing effects include pixelisation, depth of field (DOF) and blooms. When you’re ready to share your design, it can be exported as images, videos or embedded into your site.
We utilised Spline’s interactive elements on our homepage hero section. The Lightflows’ “light bar'” is a transparent, refractive block of glass. When you hover your mouse over it, light rays flow through it.
9. Ruri Design Tools for Figma
Like most web design agencies, Figma is our go-to in-house design tool. During our redesign, we experimented with many Figma plugins and stumbled across a suite of plugins by Ruri Design. Two of which have become firm favourites.
The first is Ruri Pixel – it converts raster images into vector graphics by replacing pixels with vector shapes. Upload a photo, choose your shapes, twiddle some settings and boom! You have some epic graphic design. Ruri Pixels focuses on vectorising images making it easy to create and optimise visuals for web and social media. It allowed us to create pixel, ASCII art and mosaic-style art. It is quick and easy to use and creates awesome, interesting designs.
The second plugin is Ruri Lines. It uses similar principles to Ruri pixels. Transform any image into a stunning wave-line effect in seconds.
You choose a series of graphical shapes to be your lines, and an image to create your design. Ruri pines, then creates an eye-catching vector line distortion effect to add depth and texture to your designs.
The plugin is perfect for generating unique patterns, textures, icons, and cover images with a fresh, modern look. Check it out – Ruri Lines.
8. Unicorn Studio
Where Spline Design excels in delivering fully 3D scenes, Unicorn Studio shines as a 2D WebGL powerhouse. Described as “The Design Tool for WebGL Magic”, Unicorn Studio delivers stunningly impressive interactive design capabilities. With a familiar design canvas for composing your scene and, Unicorn Studio’s intuitive drag and drop functionality makes it easy to build compelling, visually engaging and sophisticated interactive experiences. With over 60 powerful effects, including gradients, pixel effects, rasterisation, glows, and blurs, you can mix images, vector graphics, and effects, then embed your final design in your website. It also supports embedding in all major web design platforms, including Wix, Webflow and Framer.
7. UX Pilot
The first of our top 10 AI-powered tools. UX pilot – Super fast UX/UI design with AI, allows users to use prompts to create layouts of screens quickly – and it does a fantastic job! UX Pilot has allowed us to explore multiple ideas soon for both our own work and our clients. Start with a master prompt that outlines the project’s scope, then utilise the ‘flows’ features to create page flows – a sequence of screens that form part of a user journey. Once your screens have been made, you can review and adjust them with further prompts. Functioning much like an AI website builder, UX Pilot streamlines the website creation process by leveraging AI to generate layouts and design suggestions for users.
But its abilities don’t end there. Design can be exported for further work in Figma, or the tool can be accessed directly inside Figma via a plugin, allowing your entire workflow to take place there. Creating user journeys and flows with UX Pilot helps ensure a seamless user experience across all designed screens.
One of the killer features we love is the ability to use your own component libraries with Figma as the component library that is used with UX Pilot – this means the ability to generate low-fi or high-fi prototypes using your house or project style.
6. Framer
Prototyping tools have come a long way, and much of this work we undertake in Figma. However, when a super polished prototype or scroll-triggered animation experience is called for, we turn to Framer. Whilst Framer offers similar functionality to some of the other web builders out there, such as Wix or Webflow, we’ve found that Framer works well with our React-based approach. In addition, Framer features an intuitive drag and drop interface, making it easy for users to create and customise prototypes without manual coding. Framer provides us with exact control when converting our Figma designs into accurate, web-based prototypes. The animation and timing controls are superb, and we know that what we build in Framer can translate onto a website, as it is creating a website. Its responsive design capabilities ensure that prototypes adapt seamlessly to different devices and screen sizes.
5. Lovable
At number 4, we have Lovable, which surely needs no introduction. If you haven’t heard of Lovable.dev, under what rock have you been hiding? 🙂 go check it out.
A few years ago, when creating prototypes, we’d build wireframes before using a variety of tools to turn them into prototypes – we now use Lovable for that.
Our approach has been to use some of our established designs and layouts as a base, then use Lovable’s prompt-based system to develop our ideas into fully functional prototypes. Lovable’s ability to pair with a database such as Supabase is a killer feature, and we’re now building working prototypes and proof of concepts in record time. Lovable also supports the rapid creation of web applications through no code development approaches, making it easy for non-technical users to build and customize interactive platforms. Lovable, you rock!
4. Jitter Video
We knew that we wanted to use motion graphics for our case study and project card; however, we didn’t want to go all out in using Adobe After Effects. After experimenting with various technologies, such as Lottie, we eventually settled on Jitter Video.
In their own words, Jitter makes motion accessible to every designer, enabling creative teams to collaborate on and deliver engaging animations in record time. These animations can be used to enhance marketing materials and case studies, making them more visually appealing and effective. If you’re looking for a way to get into Motion graphic design without all the complexity of the Adobe suite, this might be for you.
3. Builder.io
We stumbled across Builder.io when we got into Lovable.dev. Builder.io does many things, but we found it to be great for handing off our Figma designs and exporting them directly into Lovable.
Whilst most prototyping tools create generic mockups that developers have to rebuild completely., Builder generates prototypes with your actual components, design system, and code – this closes that gap and is a massive time saver. Its drag and drop editor allows users to visually build a complete website, making it easy to customize layouts and content without manual coding.
2. Octopus.do
Octopus has become our de facto sitemapping and auditing tool. If you want beautifully, elegant and straightforward wireframes and page layouts, Octopus is it. It also helps plan the structure and organization of web pages, making it easier to visualize how each web page fits into the overall site architecture.
What do we love so much about Octopus? The ability to easily tame complexity and create stylish site maps. The killer feature for us is the ability to develop low-fi prototypes using the built-in component kit. This feature allows the team to define pages and explore layouts really quickly. The tool also allows for the inclusion of essential elements like contact forms in the wireframing process, ensuring important lead capture features are considered from the start. Pair this with the ability to cross-link to resources, add notes to wireframes, and a quoting feature – Octopus delivers for us. The site audit feature can crawl a site and create a detailed sitemap in a matter of seconds – couple this with the AI creation tool, where detailed prompts can be used to create detailed wireframes and new ideas in a matter of seconds. You’ve got everything you need to plan and specify a website, mobile or web app. Awesome!
1. Generative AI
At number one, we have Generative AI 🤦 :-)- not just a single tool but a variety of tools. Our hand-crafted philosophy means we’ve been reluctant to use AI-generated imagery at all. However, we found that using generative AI to complement or expand our work or explore ideas has been a real boon. We lend quite heavilty on Photoshop and Firefly, OpenAI and Google Vertex to extend artwork and to create still life/device and product mockups, for our case studies, which were then combined with our traditional device mockup compositing process.
Examples of OpenAI and Google Vertex images trained on our house style to produce elements for blog posts.
That’s a wrap
And that’s our top 10. From interactive 3D playgrounds to AI assistance, these tools have shaped our new site – and they’re shaping the way we design for clients in 2025 and beyond.
Which ones are you already using? And which hidden gems should we add to the list?
