How to use Sections, Screens, Containers, and Shapes

How to use Sections, Screens, Containers, and Shapes

Use sections, screens, containers, and shapes to organize your layouts and create the visual structure of your designs.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. You can access these elements from Wireframe elements in the bottom toolbar or from the Elements tab in the Wireframe Library.

Sections

A section defines a distinct area on the canvas. Use sections to organize related screens, user flows, design variations, or other content on your board.

Add a section

  1. Open Wireframe elements from the bottom toolbar or the Wireframe Library. 
  2. Select Section.
  3. Drag to draw a section on the canvas to add it.
  4. Resize the section and move related content inside it as needed.
Info
You can also press S to quickly add a section.

Manage a section

Select a section to open its toolbar. From here, you can:
  1. Change the section color to visually distinguish the section from other areas on the board.
  2. Adjust the layer opacity to make the section lighter or more transparent.
  3. Change the border style to define the section boundary more clearly or match your visual style.
  4. Remove the section while keeping all of its contents on the canvas. Use this when you no longer need the section itself but want to preserve the elements inside it.
  5. Export: Export the selected section as an image/PDF or export to Figma.
  6. Access other actions, including rename, align, copy, paste, and delete.

Info
Use Remove section to keep the content. Use Delete to remove both the section and its contents.

Screens

A screen represents a complete page or view in an app or website. Use screens to organize interface content into individual pages, states, or steps in a user flow.

Add a screen

Add a blank screen from the bottom toolbar or choose a screen size from the available options. For detailed instructions, see How to add a blank screen to the canvas.

Manage a screen

Select a screen to open its toolbar. You can use the available actions to:
  1. Send to Visily AI chat: Send the screen to the Visily AI Assistant for further modifications or use it as a reference for a new design generation.
  2. Resize the screen: Adjust the screen dimensions to match the device or layout you are designing for.
  3. Edit the screen style: Customize the screen background and other available visual properties.
  4. Layout grid: Open the layout grid settings to turn the grid on or off and adjust its configuration.
  5. Set as board cover: Use the selected screen as the cover image for the board.
  6. Save as template: Save the screen and its contents as a reusable template for other designs.
  7. Export: Export the screen as an image, PDF, or supported code format. Screen export options may depend on your plan.
  8. Other actions: Access additional options such as rename, align, arrange layers, copy, paste, duplicate, and delete.

Idea
You can use Convert screen size in the Visily AI Assistant to generate a mobile-friendly or web-friendly version of a selected screen.

Containers

A container is a special type of rectangle that automatically contains elements placed inside it. Use containers to create grouped layouts such as cards, forms, dialogs, navigation areas, and content panels.

Add a container

  1. Open Wireframe elements from the bottom toolbar or the Wireframe Library.
  2. Select Container.
  3. Click on the canvas to add it.
  4. Place other elements inside the container.
  5. Resize and customize the container as needed.
Info
You can also press A to quickly add a container.

Manage a container

Select a container to open its toolbar. The available actions include:
  1. Send to Visily AI chat: Send the container to the Visily AI Assistant for further modifications or use it as a reference for a new design generation.
  2. Quick style: Choose a preset style to quickly change the appearance of the container.
  3. Edit style: Customize the container’s background color, layer opacity, blur, border style, corner radius, and shadow.
  4. Add arrow: Add an arrow to the container to show a direction or relationship.
  5. Clip content: Hide any parts of the contained elements that extend beyond the container boundaries.
  6. Remove container: Remove the container while keeping its contents on the canvas. Use this when you no longer need the container itself but want to preserve the elements inside it.
  7. Save as template: Save the container and its contents as a reusable template for other designs.
  8. Export: Export the selected container as an image/PDF or export to Figma.
  9. Other actions: Access additional options such as align, arrange layers, lock, copy, paste, duplicate, and delete.

Info
Use Remove container to keep its contents on the canvas. Use Delete to remove both the container and the elements inside it.

Shapes

Shapes are basic visual elements that help you build structure, create backgrounds, separate content, and add visual details to your designs. Available shapes include:
  1. Rectangle: Creates a rectangular shape for backgrounds, cards, blocks, and other layout areas.
  2. Triangle: Adds a triangular shape for decorations, indicators, or custom graphics.
  3. Oval: Creates circular or oval elements, such as badges, profile placeholders, and decorative graphics.
  4. Line: Creates dividers, underlines, and visual connections between elements.
  5. Overlay: Adds a layer over existing content, such as a background behind a dialog or modal.

Add a shape

  1. Open Wireframe elements from the bottom toolbar or the Wireframe Library.
  2. Select the shape you want to use.
  3. Click on the canvas to add it.
  4. Move, resize, or customize the shape as needed.
Info
You can also use the following keyboard shortcuts:
  1. R: Rectangle
  2. O: Oval
  3. L: Line

Manage a shape

Select a shape to open its toolbar. The available actions include:
  1. Quick style: Choose a preset style to quickly update the shape’s appearance.
  2. Edit style: Customize properties such as the fill color, layer opacity, border style, corner radius, and shadow. The available properties depend on the selected shape.
  3. Add text: Add and display text inside a rectangle, oval, or triangle. Use this to create labels, badges, buttons, or other annotated shapes. Available for rectangles, ovals, and triangles
  4. Line start and line end: Customize the start and end styles of a line. Use these options to add arrowheads or other endpoints that show direction or relationships. Available only for line elements.
  5. Save as template: Save the shape and its content as a reusable template.
  6. Export: Export the selected shape as an image/PDF or export to Figma.
  7. Other actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Info
You can convert a rectangle into a container, or change a container back into a rectangle, when needed

Note

  1. Elements placed inside a container or a screen are automatically attached to them. 
  2. Sections are mainly used to organize content on the board, while containers are used to structure content within interface designs.
  3. Use the Layers panel to check the parent-child relationship between a container / a screen and the elements inside it.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • Wireframe Elements in Visily

      Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

    • How to use anchors

      Use anchors to control how an element behaves when its parent container is resized. Anchors help keep elements aligned, positioned, or resized consistently inside screens, containers, and groups. Before you start Make sure you have permission to edit ...

    • How to use Flows to organize your prototype

      A flow in Visily prototype mode is a set of connected screens that represents a specific user journey in your prototype. Use flows to organize prototype paths in your board, such as onboarding, sign-up, checkout, or other user journeys. Before you ...

    • How to use Quick Preview to review your prototype

      Use Quick Preview to test your prototype directly on the canvas as you design. It’s useful for quick checks and fast edits, with live sync reflecting your changes immediately. Before you start Switch your board to Prototype mode. Make sure your ...

    • How to use the Visily AI Chat Assistant to generate your design

      Meet the new agentic Visily AI, your smarter way to turn ideas into polished designs! With the Visily AI Chat Assistant, you can generate screens, components, diagrams, and images from prompts, plans, references, and design instructions. Even better, ...