Documentation
Design
Callouts
Add a Callout

Add a Callout

ButterKit is used by thousands of developers worldwide to ship to all 50 App Store languages. Learn more

App Screenshots are how you visually tell your app’s story, and often times it’s important to draw your users’ focus to one specific area of the screenshot. That’s why ButterKit includes the Callouts feature. It’s a powerful but simple too you can add in seconds.

To add a Callout:

Select an artboard

Open the Devices tab in the Inspector, or press ⌘2

If you don’t already have a 3D device added, add one (e.g. iPhone 17 Pro Max)

Press “Add Callout”

Select a region to emphasize, and press “Add Callout”

Customize

You can adjust the callout altitude (distance from the screenshot), scale (size), and corner radius. You can also stylize the border to match the look you’re going for.

Tips to maximize effectiveness

  1. Use this feature selectively, as overusing it reduces the impact
  2. Make it clearly larger than the 3D device frame to draw contrast to the other content
  3. To be cohesive, consider selecting the callout border color to match your UI or overall theme

How does it work?

ButterKit’s 3D rendering engine does the hard work here. When you select your callout region, ButterKit creates a new 3D plane with that region applied. It’s a real 3D object. That mesh is editable and stylable, making it easy for you to get the look you want.

Voilà!

It’s that easy. ButterKit does the heavy lifting for you. Share your screenshots and app launch on the ButterKit Discord or subreddit for feedback and support from fellow builders/designers/devs.

Quick Help