A free online mockup editor with layers, snapping and align tools

A mockup template is a fast start and a slow finish. The screenshot drops in nicely, and then you want the phone a little to the left, a headline above it, the shadow softer — and the template has no slider for that. Flicka Mockups now opens every layout as a document of layers on a canvas, so the layout is where you start, not where you stop.

This guide walks through the editor the way you would use it on a launch day: open a layout, add and arrange layers with snapping, line things up, set exact values, add a page, and export. Everything here is on the free plan, and nothing you drop in leaves your computer.

12345678

1. 1Pages and layersEvery page is a row; every element on it is a nested layer. Click to select, drag to reorder, hover for hide, lock, duplicate and delete.
2. 2+ LayerDevices, a plain screenshot, headlines, label pills, shapes, images and social cards. New layers land in the middle of the page, selected.
3. 3+ PageA blank page, a duplicate, a page at a store size, or a whole App Store or Google Play set.
4. 4InspectorWhat the selection is and its numbers — X, Y, scale, rotation, opacity, depth, blur, shadow — plus the device model and screenshot.
5. 5AddThe same insert menu from the dock, next to the annotation tools: arrow, box, callout, text, blur, zoom lens, sticker.
6. 6MotionPlays a sweep, orbit, reveal or float on the canvas; Pro renders it as a video or GIF.
7. 7Export optionsFormat, resolution to 4×, transparent background, this page or every page, and the zip.
8. 8Zoom⌘0 fits every page, ⌘2 fits this page, ⌘1 is 100%. ⌘-wheel zooms at the cursor; space-drag pans.

Step 1: Open a layout and add a layer

In the library, open any layout — Floating, straight on is a free one-device scene. Its iPhone is now a layer in the Layers panel. Press + Layer (or Add in the dock) and pick Headline + subline, then MacBook. Each new layer appears in the middle of the page, selected, with handles on its corners and a rotation stem above it.

1234

1. 1Page rowThe page's name, number and store check. Click it to select the page; the inspector then shows its size, backdrop and store size.
2. 2Layer rowTop of the list is front of the stack. Drag rows to reorder, or use ⌘] and ⌘[ with a layer selected.
3. 3+ PageBlank, duplicate, a store size, or a set.
4. 4+ LayerGrouped by kind: Devices, Words, Shapes and images, Social cards.

Step 2: Drag, snap and resize

Drag the MacBook towards the middle of the page. As its centre nears the page's centre, a guide appears and the layer snaps to it; the same happens at page edges and against the edges and centres of other layers. Hold Alt to drag without snapping, Shift to lock the drag to one axis. The corner handles scale the layer, the stem rotates it (Shift for 15° steps), and a readout follows the pointer with the position in page pixels.

Snapping is what makes a composition look designed rather than placed. Two devices whose centres sit on the same line, a headline that starts where the device's frame starts — those relationships are a snap away instead of a pixel-nudging session.

Step 3: Select several layers and align them

Shift-click a second layer (on the canvas or in the Layers panel), or drag a marquee on empty canvas, or press ⌘A. The inspector switches to the selection and shows the six align buttons: left, centre, right, top, middle, bottom. Two distributes appear with three or more layers. Drag moves the whole selection; ⌘D duplicates it; ⌘G groups it.

123

1. 1The selectionThe inspector names how many layers are selected; shift-click a layer to take it back out.
2. 2Align centresHorizontal centres on one line. With one layer selected, align works against the page instead.
3. 3Align leftLeft edges together. Top, middle, bottom and right sit beside it.

Step 4: Set exact values in the inspector

When eyeballing is not enough, select one layer and type. X and Y are in the page's own pixels, scale and opacity in percent, rotation in degrees. Depth lifts a layer towards you under 3D tilt; blur and dim push it back; the shadow field is per device. The same panel holds the device model, its screen, and the screenshot slot.

1234

1. 1X and YThe layer's centre in page pixels. Nudge with the arrow keys; Shift nudges by ten.
2. 2ScalePercent of the layer's natural size. The corner handles change the same number.
3. 3RotateDegrees, clockwise. The stem above the selection does the same by hand.
4. 4Align to the pageWith one layer selected, these align it to the page's edges and centre.

The shortcuts worth learning

• ⌘0 · ⌘2 · ⌘1Fit every page · fit this page · 100%
• ⌘ + wheel · Space + dragZoom at the cursor · pan the canvas
• ⇧⌘H · ⇧⌘LHide · lock the selected layer
• ⌘] · ⌘[Bring forward · send backward (⇧ for front and back)
• ⌘D · ⌘A · ⌘GDuplicate · select all · group
• T · L · R · A · NText · label · box · arrow · callout annotations
• ⇧R · ⇧GRulers · the 20/100 px grid
• Alt while draggingDrag without snapping

Step 5: Add a page and export

Pages sit side by side on one dotted canvas as artboards. + Page adds a blank page at the same size, a duplicate, a page at a store size, or a whole store set; ⌘0 zooms out to see them all. The export button renders the selected page as a retina PNG, JPG or WebP; the menu switches it to every page as a zip. Hidden layers stay out of the export, and the PNG is exactly what the canvas shows.

12345

1. 1Artboard labelNumber, name, size and the store check. Click to select the page, drag to move it, double-click to rename.
2. 2Listing checkWhat the stores would say about the whole set, checked live as pages change.
3. 3Page rowsThe same pages in the Layers panel, with their layers nested under them.
4. 4+ PageFree documents hold two pages; more pages and the store sets are Pro.
5. 5Fit every page⌘0, so the whole set is in view while you edit one page.

Drafts: nothing to save, nothing uploaded

Every edit is saved as a draft in your browser about half a second later; the breadcrumb says Saved in this browser. The gallery's Drafts collection lists them with live previews and page counts, and a draft reopens exactly where you left it. Free keeps ten drafts; Pro keeps as many as you like, and can also save a finished setup as a named mockup you can start from again.

123

1. 1DraftsEverything you edited, newest first.
2. 2A draftRendered live from the saved document, with its page count and when it was edited.
3. 3DeleteRemoves the draft from this browser. Nothing else holds a copy.