Original Blog: https://www.littlebigthings.dev/post/things-to-think-about-when-going-from-figma-to-webflow?ref=hnode

If you’re a marketer or manager who's ready to convert Figma designs to Webflow, this blog is for you. In this guide, we'll show you how to convert your Figma designs into stunning, user friendly and responsive websites using Webflow. We’ll cover:

• Why choose Webflow

• 5 Questions to ask your Webflow designer/developer

• SEO constraints to keep in mind while setting up a project

• Page performance levers to consider

Why choose Webflow

With Webflow, you can create powerful and intricate designs that look amazing across all platforms, while remaining optimized for the web. With access to the best and cleanest code output in the industry, your site will be SEO friendly and fast. You can easily craft interactive user experiences without any coding knowledge, which allows even beginners to build dynamic visuals with ease. Create content editors and access CMS-based designs for landing pages. No matter your level of expertise, Webflow is a great option for building websites from the ground up or improving existing pages that deliver consistent, high-quality results for the end user. Webflow is the new normal for marketing sites.

5 Questions to ask your Webflow designer/developer:

1. Will your team maintain the Webflow site once it's built?

This kind of consistency makes all the difference when you want to maintain, update, or create a fresh look on your Webflow site. Having the same team in charge of implementation and maintenance helps keep a clean, organized style sheet and reduces the risk of confusion between developers that are used to different class naming conventions. That being said, there are times when this unified approach just isn’t possible. For those situations, Lil Big Things has an answer, too.

We offer two options based on our clients’ needs. For those who would like us to maintain their Webflow site, we understand the importance of well-structured conventions and name our classes accordingly, so you won’t get frustrated with clunky names and confusing styles. The result is an intuitive, organized Webflow site that you can easily manage for yourself after we've set it up for you.

For those who have multiple people working on the team, we have alternative solutions that still allow for consistently organized work processes. Whether you’d like a customized framework, or prefer to follow a client-centric approach such as Client-First, we can help.

2. What kind of communication should I expect?

While exploring different Webflow team options, you'll find a range of communication commitments, with some being fully hands-on and others offering more remote services. The advantages of an agile team include clear communication from the project’s onset, minimal disruption to your day-to-day operations, and an independence to move forward with confidence and without unnecessary hand-holding.

At Lil Big Things, we offer all that and more while also guaranteeing coverage of at least three hours of your time zone for any urgent needs that arise. It's just another way that we strive to offer the best customer service possible!

3. Will my design be broken down into components to be reused later?

Webflow designs can be broken down into smaller, reusable components that allow web designers to save time and effort when creating websites. By breaking web designs into little tasks and big goals, web designers are able to create complex sites quickly by reusing pieces of code across multiple projects. This helps web designers speed up the design process while still producing high-quality results. With Webflow design techniques, web designers can easily scale their projects from small one-off jobs to large-scale enterprise solutions without having to start from scratch each time.

At Little Big Things, we always strive to make our designs as reusable as possible. Our goal is to create a design that can be quickly modified with easily transferable and adaptable components for future use. This way, you don't need to reinvent the wheel each time; instead, you can piece together what already exists and customize it for your needs! Ultimately, this saves you time and allows for more creative freedom when devising your next project.

4. What timelines should I anticipate?

Turnaround time is essential to any project and shouldn’t be overlooked. You will want to gain clarity on delivery dates and what to expect from your designer if deadlines are missed.

At Lil Big Things, we never commit to a build timeline unless we are absolutely certain of our ability to deliver as expected. While we often finish builds ahead of schedule, our job continues. We constantly review the finished product to guarantee that our clients remain satisfied with the outcomes they receive. Our philosophy is simple – exceed expectations while meeting deliverables on time!

5. Do you understand my design and marketing goals?

When building Webflow designs, it is essential to define the page's objectives and how you want the visitor to experience the page or site before beginning the design process. No changes should be made impulsively at this stage: the client and the designer must agree on any possible visions or ideas from concept to completion. Ultimately, design decisions will affect its success in achieving its goal, so having a clear understanding of each party's expectations is key.

SEO constraints to keep in mind while setting up the project.

SEO is one of the most important aspects of web design, and it's crucial to keep SEO constraints in mind while setting up a Webflow design. While Webflow makes it easy to create beautiful and responsive websites, it's important to ensure that your website is also optimized for search engines. In order to do this, you'll need to use the correct tags and structure your website correctly. You can also use built-in SEO tools like the Google Search Console to help you track your website's ranking and performance. By following these tips, you can create a search engine-friendly website that will rank high in SERPS and draw in more visitors! Learn more great tips here.

Page performance levers

Page performance is a key factor to consider when building a Webflow design. To ensure the best performance, you'll want to keep the DOM (document object model) size as small as possible by minimizing the number of HTML elements and making sure that each element is performing only one task. Additionally, optimizing images for WebP format can drastically reduce page load times thanks to the format's small file size. WebP files are around 25-34% smaller than their JPEG or PNG counterparts and save up to 90% in file size compared to GIFs. You can find additional details, here.

Conclusion

Successfully transitioning from Figma to Webflow takes time and experience but is certainly worth it in the long run. With careful planning and thoughtful execution, users can benefit from the helpful features that come with each tool.

From start to finish, Lil Big Things is available for all your Webflow needs. Contact us today so you can spend more time achieving your goals and less time and money playing catch up.