Mockup Generator

Give designs real-world context without leaving your canvas. The Mockup feature lets you add, arrange, and edit mockups directly on the Canvas.

What you can do

• Add mockups to any artboard
• Reposition and scale your design within the mockup frame
• Adjust the mockup background color for the perfect look
• Attach multiple mockups to a single artboard for full presentations and campaigns
• Update designs on Mockups in Realtime
• Export multiple mockups at once

Before you start

1. Open a project with at least one artboard
2. Create or add a design to your Artboard

Add your first mockup

1. Select an artboard.
2. Open Mockups: Open “Mockups” from the left toolbar or use the contextual taskbar button “Mockup”.
3. Browse the mockup library and pick a mockup.
4. Kittl places the mockup on your canvas, linked to the selected artboard.

Arrange your design inside the mockup

• Select the mockup to enter edit mode
• Drag to reposition the design within the mockup frame
• Use corner handles to scale
• Set or tweak the background color to match your brand or scene
• Export mockups by selecting the mockup and using Quick Export from the contextual taskbar

Use multiple mockups per artboard

• Repeat the “Add a Mockup” flow to attach more mockups to the same artboard
• Each mockup maintains its own positioning and settings
• Great for building a full asset set or campaign layouts in one place
• You can edit your design, and all attached Mockups will update in real-time

Replace Mockup Placeholder

If you add a mockup from the left panel without selecting an artboard, the mockup will be inserted with a placeholder.

1. Select the placeholder on the artboard and delete it.
2. Drag your design onto the empty Artboard to preview it in context.

FAQs

• Can I use unlimited mockups on an artboard?
  Yes. You can attach as many mockups as you need to one artboard.
• Do I need a separate “Mockup mode”?
  No. Everything happens right on the canvas for a faster workflow.
• Does this work like Kittl Flows?
  Yes. The interaction model is the same, so it feels familiar from the start.

Troubleshooting

• I don’t see the Mockup button
  Make sure an artboard is selected. The contextual taskbar and Tools panel options appear based on selection. You can also add a mockup from the left panel. It will add with a placeholder to replace.
• My design doesn’t fit the mockup
  Select the Mockup and reposition or scale the design within the frame.
• Background looks off
  Select the mockup and set the background color to match your scene or brand palette.