Webflow: A Designer's Gateway to the World of Development

Throughout my career, I've embodied the essence of being a jack of all trades, yet mastering none. This journey has been fueled by a release of relentless drive to explore new programs and techniques, enabling me to express my creative vision fully. My adventures have ranged from app development to design, each step guided by a desire to absorb as much knowledge as possible, opening doors to new opportunities.

In 2023, I set a goal for myself: to learn Webflow. This ambition was born from the developer within me, yearning to independently bring a website to life. By December 2023, I had carved out time to dive into Webflow, embarking on a new chapter of my digital craftsmanship journey.

Navigating the Transition from Figma to Webflow

Why Webflow, you might ask? My decision wasn't overly complicated. Given its longstanding presence in the market, Webflow appeared as a mature platform worth exploring. At first, switching from Figma to Webflow felt overwhelming. I was used to Figma's way of doing things, and Webflow seemed like a lot to learn. But the idea of being able to make my designs live on a website without waiting for developers or other team members was exciting. So, I took my time to learn Webflow. Little by little, it made sense. Webflow lets me quickly turn my designs into real websites by myself, which saves a lot of time and hassle.

My Experience Working with Webflow

After spending considerable time with Webflow, I landed my first client project. Initially, I was filled with apprehension, as it was the first Webflow project within our design team. It represented an opportunity to bring a website to life for a company that sought to minimize development time. The experience was a rollercoaster of highs and lows, but it proved invaluable in gauging my proficiency with Webflow and identifying areas for improvement. Working on the project taught me numerous tricks, allowing me to complete the website in just a week. That achievement was a significant milestone, marking a moment where I stepped out of my comfort zone to embrace new challenges.

This journey into Webflow was self-taught, relying on experimentation rather than formal online courses. The best thing was seeing how similar Figma and Webflow are. I'll talk more about this soon. Based on this experience, I've compiled several steps to help beginners navigate Webflow. These tips are the culmination of my firsthand experiences and are intended to assist others embarking on their Webflow journey.

• Disclaimer: You do not need to know coding to start with webflow.*

Getting Started with Webflow

Step 1: Acquaint Yourself with the Editor

Webflow's editor is a treasure trove of functionality, offering everything from class creation to component assembly right at your fingertips. Begin by familiarizing yourself with its landscape to harness its full potential. You can simply drag and drop elements. Making components like in Figma is also possible.

Step 2: Understand the Basics

Grasp the fundamental terminologies such as margin, padding, and positioning. Solidifying these basics will provide a strong foundation for your Webflow journey. In the image below, you'll see a panel that looks a lot like Figma's. It works the same way, just with different names.

Step 3: Apply Your Design

Select one of your designs that features simpler visuals and minimal interactive elements. Review all the necessary components and consult Webflow to determine if you need to start from scratch or if templates are readily available. While working on a client project, I started designing a site in Figma and then moved to Webflow to continue.

Step 4: Experiment and Iterate

Once you've got the basics down, it's time to experiment. Don't be afraid to iterate; the platform is designed to accommodate creativity and exploration.

Step 5: Leverage Webflow's Community and Webflow University

Webflow boasts a vibrant community of designers and developers. Engage with forums, tutorials, and resources to enhance your skills and resolve any challenges.

Step 6: Publish and Analyze

Finally, publish your site. Webflow simplifies the process, allowing you to focus on your design. Once live, analyze its performance and user interaction. This feedback is invaluable for refining and optimizing your site. 

Parting Thoughts

In conclusion, Webflow stands as a formidable bridge between design and development. For creatives like myself, it offers a comprehensive toolkit that empowers us to translate our visions into functional websites. Through perseverance and a willingness to explore, mastering Webflow can significantly expand your creative and technical repertoire, paving the way for endless possibilities in the digital landscape.

In February 2024, I got to lead a Webflow workshop for our GeekyAnts design team. We made a landing page in just 2 hours, all by ourselves, without needing any developers. What a great accomplishment!

Here are some highlights from that experience. There's something truly rewarding about sharing knowledge with others.

Now, if Webflow does sound like the web design tool for you, then I suggest you give it a try, and see how it can enhance your design workflow.