Designer webflow UI tutorial

The Designer is the heart of Webflow's visual web design platform, the canvas

on which you'll design and develop beautiful, responsive websites.

Webflow can be divided in to 3 part:

Help Section in Left Toolbar contains

2. Canvas

Webflow canvas is where we can interact with elements of pages.
We can resize images, control grid elements, copy paste elements etc.
It is visual approach for editing a page
All elements in Webflow are arrange in a boxes which can be Sections, Containers and Div each there own unique uses
It also allows us to view pages in different screen sizes such as Web View, Tablet View, Mobile Portrait and Landscape view
It also allows us to export code , publish website to Webflow or custom domain
It also has preview mode where we can see how actual website will look like

3. Right Panel contain 4 sections

Style section : which allows you to set Layout, control margin and paddings of the elements, create classes and tags, set sizes, positions etc
Element settings panel : It allow you to create symbol override elements, change placeholder text, search settings, etc.
Style Manager : Allows you to change class or tags names and see to how many pages it is applied to etc
Interaction : Allows you set interaction methods with elements and option for giving little animations to it

In this video, we'll take you on a quick tour of the Designer's key features and sections,

so you'll know the lay of the land before we dive into details.