How to use Image elements

How to use Image elements

Use Image elements to add uploaded images, stock photos, AI-generated visuals, or placeholders to your designs.

Before you start

  1. Make sure you have permission to edit the board.
  2. The availability of workspace images and some AI features may depend on your plan.

Add an Image element

  1. Open the board where you want to add an image.
  2. Open the Wireframe Library.

  3. Select Image, then choose one of the available options:
    1. Upload image
    2. Browse images from integrated sources such as Pexels, Unsplash, and Pixabay
    3. Add an image or video placeholder
    4. Generate with AI


  4. Select or create an image to add it to the canvas.
  5. Move, resize, or customize the image as needed.
Info
After you select an image option, such as uploading an image or browsing a stock library, Visily remembers your most recent selection.
Click the Image thumbnail again to repeat that action automatically. To choose a different source, click the arrow next to the thumbnail and select another option.

Image library

Select Upload image or Browse images, or press I to open the Image Library dialog. From there, you can upload, search, generate, and select images from different sources.
The Image Library includes:
  1. This Board: Upload new images or search and select images that were previously uploaded or used on the current board.

  2. Workspace Library: Upload, search, and select images from your workspace’s shared image library. This option is available on paid plans. See Manage Workspace Images.

  3. Pexels, Unsplash, and Pixabay: Browse and use free stock images directly from these platforms.


  4. Generate with AI: Create a custom image from a text prompt using the Visily AI Assistant.

Manage an Image element

Select an Image element to open its toolbar. The available actions include:
  1. Send to AI Chat: Send the image to the Visily AI Assistant for further modifications or use it as a reference for a new design generation.
  2. Display type: Switch between a real image and an image placeholder, depending on whether you want to show the final visual or reserve space for one.
  3. Change image: Replace the current image with another uploaded, stock, or AI-generated image. This option is available when the element displays a real image.
  4. Edit style: Customize the image’s layer opacity, blur, border style, corner radius, and shadow.
  5. Crop: Adjust which part of the image appears within the element’s boundaries.
  6. Flip: Flip the image horizontally or vertically.
  7. Save as template: Save the image element and its settings as a reusable template.
  8. Export: Export the selected image element.
  9. Other actions: Access additional options such as align, arrange layers, lock, copy, paste, duplicate, and delete.

Note

  1. Images used on the current board are available from the This Board tab. Use the Workspace Library when you want to reuse the same images across multiple boards.
  2. Stock image availability and search results are provided by the selected third-party platform.
  3. Make sure you have permission to use any images you upload to Visily.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to use Text and Link elements

      Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...

    • 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 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 Make sure you have permission to edit the board and are in design editing mode. You can access these elements ...

    • How to add elements to the canvas

      Add elements to the canvas to create and customize your designs. You can add basic elements from the bottom toolbar or choose ready-made elements from the Wireframe Library and Diagram Library. Before you start Make sure you have permission to edit ...