Does Webflow (free plan) have a design panel that includes shape tools like lines and squares for creating designs?
TL;DR
- Use styled Div blocks in the Webflow Designer to create basic shapes like squares and lines, even on the free plan.
- For advanced shapes, upload SVGs or apply custom CSS; note that only 2 projects are allowed and features like code export and custom domains are restricted on the free plan.
The free plan in Webflow includes access to most of the design tools in the Designer interface, including basic shape-building capabilities, but with some limitations.
1. Available Shape Tools in Webflow Designer
- You can create basic shapes like squares, rectangles, and lines using Div blocks and then styling them with width, height, border, and background settings.
- There is no dedicated “Shape Tool” like in Figma or Illustrator—Webflow uses layout elements (e.g.,
Div,Section,Container) styled via CSS. - To draw a line, use a Div block with:
- A fixed width (or height)
- A height (or width) of 1–2px
- A background color to make it visible
- To make a square, use a Div with equal width and height dimensions and apply a background color or border as needed.
2. Limitations on the Free Plan
- The Designer is fully usable on the free Starter plan, so these tools are available.
- What’s restricted:
- Only up to 2 projects
- Cannot export code
- Cannot remove Webflow branding
- Cannot connect custom domains
3. Alternatives for Advanced Shapes
- Use SVG assets created in tools like Figma or Illustrator and upload them to Webflow.
- Use CSS transforms (e.g., rotate) for triangles and diagonals via custom properties.
- For complex shapes, consider embedding custom SVG code directly into an Embed element (only available on paid plans or with limitations on free).
Summary
Webflow’s free plan includes full access to the Designer, allowing you to create shapes like squares and lines using styled Div blocks, though there is no dedicated shape-drawing tool. For advanced shapes, use SVG uploads or custom styling.