Table of Contents
Article by: Maggi Marin
This article describes the process for Webflow, a tool that allows you to design and develop web pages without coding. Webflow allows designers to create any website with the full power of HTML, CSS, and Javascript.
Webflow is Easy to use and intuitive
Webflow is a very useful tool for building websites, it practically allows you to bring all your design ideas to the reality of a site in a responsive format, automatically generating the code, it also has the option of hosting and a content management system. With Webflow, designers can create custom web pages from scratch, without coding knowledge, generating quality, clean and exportable code.
A couple of months ago I had the wonderful idea to develop my first site without coding in Siter.io, it was a great experience, but as I delved deeper into the application I realized that I could not have as many accesses as I imagined; like transitions, effects, components and other forms, limiting myself more and more. Practically works for developing very basic sites. This led me to go to blogs and recommendations to get a platform that met my expectations and that was a broader tool with a large number of options. That is how I discovered Webflow, a web development platform without coding, but what caught my attention the most was the large number of options that it included, among them are; adding custom codes, components, global swatches, motion design, CMS (Content management system), Easier collaboration with clients, hosting, marketing & SEO, HTML/CSS sliders and carousel, etc.
As time went on I was motivated to buy a course from Jan Losert, and turned to some tutorials from WebFlow University and Youtube. That’s where I start everything, dedicating 30 minutes a day to courses and practices. Personally, I do not recommend starting to use the platform without having the idea of its main concepts of a website and its Webflow tools, it is worth taking a course or watching a couple of tutorials.
What should designers learn before using Webflow?
If you know how to use programs like Figma, Adobe XD or Sketch, it is very likely that you will notice some similarities with Webflow, since it is made up of layers and they are organized in almost the same way, they are not identical but it is very easy once using Webflow.
Going deeper into the subject of websites, it is advisable to have some idea of how a website is built either in HTML or CSS, since the “box model” is the most important feature of the language of programming sites and others represent all the HTML tags that are inside the body. Each tag generates a box and the behavior of that box depends on its classification (something very similar to Webflow’s functions). Later I will explain more details about the label functions and the box model in Webflow.
Do you need to know how to code to use Webflow?
Not necessarily since Webflow offers any type of user to use the platform in an easy way without having knowledge of JavaScript or CSS/HTML coding, so Webflow can be a good tool for many users. So what programming language does Webflow use? When the build process gets underway, Webflow starts translating the design elements into clean, production-ready HTML, CSS without you having to write any code, and allows you to export the code. It is quite useful for both designers and experienced programmers.
Sometimes it might be advisable to have some basic knowledge of coding, but if you are a code expert or your partner is, you can insert custom codes either in a specific section of the site or in the whole page, in order to provide a certain personalized style.
A tip from me: If your knowledge is very basic and you don’t want to learn about CSS and HTML coding, I recommend you to follow tutorials on Youtube like Timothy Ricks copying and pasting custom code resources and following the steps. If you want to know more about custom code in Webflow, I attach a link to read more:
How do I convert a Figma file to Webflow?
Being able to import a Figma file to Webflow with just copy and paste could be a very easy task and like the dream of any web designer, but unfortunately, it is not like that and you must carry out a construction process in a correct way. I will mention how both platforms should work at the same time and some recommendations to take into account.
Both platforms have a unique and different processes, Figma is a UI design and graphics editor platform and can be compared to Adobe XD and Sketch, while Webflow is a website builder. In other words, Figma and Webflow have the added benefit of allowing you to publish the actual website based on your Figma design.
Why Should I use Figma When I can start my design process in Webflow?
Many will ask, why use Figma? Why don’t you start in Webflow right away? The reasons are obvious. To begin with, Webflow is a development platform that helps provide logic to the construction of the site and is intended for you to give life to an existing design created in a design program, practically the design assembled in Figma will be our guide to develop it in Webflow. In fact, it’s a smooth and recommended process to work from Figma to Webflow.
Note: Start with Figma, Sketch, or XD
But if you are not a designer and you simply plan to build your website in Webflow, you can do it through its custom templates, whether free or paid.
How to design a photography website with Webflow
One of my recommendations to follow a good result of a website is to organize your layers in Figma and build them with a specific structure, planning by containers for an excellent organization, all this in order to be able to go to Webflow and implement our design in an easier.
Once the website design is defined in Figma, the style guides will be a very important point since they will be defined again within Webflow by adding default elements such as headings, colors, font, and paragraph styles, and spaces and they will help to keep the line of design that we have selected from the beginning. So as you can see, you can switch From Figma to Webflow and maintain consistency.
Sections and Containers in Webflow
Before creating a website, you must understand how they are built on the web either in HTML or CSS. Websites use the “box model” that allows us to understand that everything on a web page is basically a box within a box and the boxes are HTML components known as “Divs” Next, I will explain how the box model is composed, and how labels or rating works.
In the image that I have attached, you will be able to observe the “Navigator” area, this refers to the structure of each page, something very similar to the layers of Figma or any design tool.
Under Navigation is the “Body” which is the main element that covers the entire website and below it, all the sections and containers are placed as wrap-around boxes in an organized way, something very similar to the code language, but presented in another way. The “Container” element is the ideal partner for the “Section” element since the Container is always placed inside a section and more elements are placed inside the Container in order to maintain order.
In the upper right part, we have the “Selector” option, this area works to name a class to each element that we select. For example, I have selected an element and I have named it “Container” We must give all the elements that we select a class, be it typography, shapes, color, or symbols to identify them and organize our project.
If you want to learn more about Webflow, I recommend that you go to its official page and you will find a great learning section that Webflow University offers completely free. You can also find endless courses on Udemy, Domestika, and on YouTube.
My experience with the creation and development of a website in Webflow has been fabulous, and personally, I must say that it is a tool worth using. You may not find Webflow very easy to use from the beginning, but once you have learned it, the user experience is quite fluid.
