Images and video

Pictures come into uxdeck as image layers or as the fill of a shape. Once placed, a picture can be cropped, adjusted, tiled, turned into vector shapes or downloaded again. Videos work the same way: as a video layer, or as the fill of a frame or a shape. On the canvas a video shows still, on its first frame; it plays in Preview and on your published site.

Pictures and videos are stored in your account with the file, so they open wherever you open the file.

Place pictures

• Insert > Image… (⇧⌘K): choose one or several files. The pointer then carries the next picture, with a count of how many are left. Click empty canvas to place it at its own size, drag to place it at the size you draw, or click a shape to make the picture its fill. Place all drops the rest at once; Stop (or Esc) ends it.
• Drag files from your computer onto the canvas.
• Paste a picture copied from a browser or another app.

PNG, JPEG, GIF, WebP, AVIF and SVG are taken as they are. Other formats are redrawn as PNG when the browser can read them. An SVG file comes in as editable vector layers rather than a picture.

Big photos are made lighter as they arrive: anything larger is kept at up to 2,880 px on its longest side, which is still sharp on a large screen at 2×. Small images, SVG and GIF are left exactly as they are.

The image bar

Select one picture and a bar appears above the toolbar:

• Crop: a box appears over the picture. Drag it or its handles, then press Apply crop (or ↩); Cancel (or Esc) leaves it as it was. A rotated picture cannot be cropped.
• Adjust: opens the picture’s settings in the Design tab (below).
• Vectorize: turns the picture into vector shapes, good for a logo or a simple illustration.
• Replace: choose another picture in the same place and size.
• More: Fill the frame, Fit inside or Tile, and Download image.

Picture settings

Click the picture’s swatch in the Fill section to open its settings:

• Scale: Fill (covers the layer, cropping the edges), Fit (shows it whole) or Tile (repeats it).
• Replace image, and a preview with your adjustments on it.
• Exposure, Contrast, Saturation, Temperature and Tint, each from −100 to 100. Double-click a slider to reset it.

The adjustments are written into your site’s CSS, so the published page looks like the canvas.

Fill a shape with a picture

Select a frame, rectangle, ellipse or other shape, set Fill to Image and choose a file. The picture takes the shape’s outline and corner radius.

A colour over the picture

On a picture, the plus by Fill adds a colour over the image, black at 20% to start. Use it to darken a hero photo so white text reads on top. Change its colour and opacity, or drag the rows to swap which paints on top.

Video

Adding a video is on Pro. Videos must be MP4, WebM or MOV, up to 50 MB.

• Insert > Video… places a video layer, the same way as pictures.
• On a frame, rectangle, ellipse or stack, set Fill to Video to fill it with one.
• On a picture layer, switch Image to Video to put a video in its place.

Each video has these settings in the Fill section:

Setting	Default	What it does
Fill / Fit	Fill	Covers the box, or shows the whole video
Autoplay	on	Starts by itself
Loop	on	Plays again from the start
Muted	on	No sound
Controls	off	Shows the browser’s play bar (video layers only)

Browsers only start a video by itself when it is muted, so turning the sound on turns Autoplay off. The video then waits for a click, its controls, or a Play/Pause video action in your prototype. See Interactions.

Storage

Your pictures count towards your account’s storage, across all your files: 500 MB on Free and 10 GB on Pro.

Catches

• Describe your pictures. Give an image alt text in the Accessibility section so screen readers can describe it. See Layer accessibility.
• Crop is for picture layers. For a picture used as a fill, change Scale instead, or crop the layer with a mask. See Masks and boolean shapes.
• Vectorize works best on flat artwork. A photo turns into many shapes; keep it for logos, icons and simple drawings.
• A video already in a file plays on every plan. Only adding a new one asks for Pro.