Does Webflow (free plan) have a design panel that includes shape tools like lines and squares for creating designs?
TL;DR
- Webflow's free plan includes full access to the Designer but lacks native shape tools; use styled Div blocks to create shapes like squares, lines, and circles.
- For complex shapes, create SVGs in external tools and upload or embed them in Webflow.
Webflow’s free plan does include the Designer panel, but it does not provide built-in shape tools like lines, rectangles, or circles as you might find in traditional graphic design tools like Figma or Adobe XD.
1. How to Create Shapes in Webflow
- Div blocks are used to create most shapes in Webflow.
- To create a square or rectangle, drag a Div block into the canvas and set width and height values under the Style panel.
- For lines, set either the width or height to a small value (e.g., 1px) and apply a background color.
- For circles or rounded shapes, use border-radius (e.g., set border-radius to 50% for a perfect circle).
2. Limitations on Free Plan
- The Designer features are fully accessible on the free plan.
- The limitation is primarily on project hosting, CMS items, and form submissions, not on core design tools.
- You can still use style options like background color, borders, shadows, padding/margin, and position.
3. Alternatives for Complex Shapes
- For more complex vector graphics, use SVGs created in Figma, Illustrator, or similar tools, then upload them to Webflow or embed them via an image element.
Summary
Webflow’s free plan gives you full access to the Designer, but it does not offer native shape tools like lines or squares. Use Div blocks with styling to build shapes instead.