Apple does not give you its iPhone bezels as Figma files. The bezels for the iPhone 16, 17, 18 and iPhone Duo come as Photoshop and PNG files only, according to the Apple Developer Design Resources page (October 2026).
Anything editable inside Figma, whether a vector frame or a rendered scene, comes from community designers and plugin vendors. Each of them sets its own license.
Figma iPhone Mockups
The mockups below range from flat device frames to photographic scenes, which is the main choice to make before dropping a screen into one.
Device Mockups Library (100+ devices!)
A huge collection of over 100 device mockups, including phones, tablets, and laptops. Ideal for showcasing responsive UI or cross-device designs.
iPhone 14 Pro & iPhone 14 Pro Max Mockups
Realistic iPhone 14 Pro and Pro Max mockups perfect for app presentations, complete with sleek detail and premium visuals.
Matte iPhone Mockups – 2021 Updated
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →A modern set of matte iPhone mockups with refined shadows and clean lines, great for minimal app or UI showcases.
Ultimate Free iPhone Mockups Pack (180 Variants)
Comprehensive mockup pack offering 180 iPhone variants in different angles and styles. Ideal for designers needing variety.
iPhone 13 Pro • iPhone 13 Mockups
Showcase your app designs using these elegant and highly detailed iPhone 13 Pro and iPhone 13 mockups.
iPhone 12 Pro Mockups
Sleek and realistic iPhone 12 Pro mockups to present your mobile designs with a premium feel.
iPhone 12 Mockups
Clean and flexible mockups for iPhone 12 in different styles and colors. Perfect for dynamic UI demos.
Flat iPhone Mockup 15/14/13/12/11/X/SE/8/7/6
Flat-style iPhone mockups covering many generations-great for comparing screen layouts across devices.
iPhone mockups
Minimalistic and clean iPhone mockups that highlight the content without distraction. Good for product mockups.
iPhone Browsers – Safari & Chrome (iOS 15)
Mockups of Safari and Chrome browsers on iOS 15-great for showing web UI within mobile environments.
iOS 16 Status Bar
Includes customizable status bars for iOS 16. Perfect for simulating a native iOS interface in design work.
Status Bar • iPhone 13 Series
Add realistic status bars to your iPhone 13 mockups. Helpful for app designers who want accurate UI.
Mobile Device Mockups iphones, tablets, samsung and laptops
A varied bundle of mobile and desktop mockups across multiple brands, including iPhone, iPad, and Galaxy.
iPhone 14 Pro • iPhone 14
Beautiful iPhone 14 mockups with multiple angles and shadow effects to highlight your UI designs.
iOS Keyboards
Includes editable iOS keyboards for different languages and layouts-perfect for messaging app interfaces.
🤙 iPhone 15 Pro 3D Mockups
Premium-quality 3D mockups of the iPhone 15 Pro in multiple angles and lighting styles.
iPhone 12 Mockup
A clean and crisp iPhone 12 mockup with subtle shadows and device realism. Good for mobile-first designs.
iOS Status Bars
Detailed status bar components for various iOS versions, useful for building realistic mobile screens.
iPhone 11 Pro / X Mockup
Realistic mockup featuring iPhone X and iPhone 11 Pro, tailored for older device UI presentations.
iPhone 15 Pro UI Template with Dynamic Island
Complete iPhone 15 Pro UI with a dynamic island layout, great for simulating modern iOS screens.
iPhone 12 3D Mockups
Stylish 3D mockups for iPhone 12, ideal for portfolios and presentations with depth and realism.
iOS Notifications
Pre-styled iOS notification mockups to insert into your mobile UI scenes for a polished look.
iPhone X, XS, 11 Pro Mockup
A simple yet versatile mockup for iPhone X, XS, and 11 Pro. Useful for legacy device designs.
iPhone sizes (incl. iPhone 15)
Reference file containing all iPhone sizes from SE to 15. Great for layout planning and responsive design.
Minimal Apple devices Mockups
A beautifully minimal pack featuring iPhones, iPads, and Macs-ideal for modern product displays.
Apple Maps iOS
Mockup of the Apple Maps app UI, useful for location-based service demos or case studies.
iOS Keyboard (iPhone & iPad)
Editable iOS keyboards for both iPhone and iPad. Includes light and dark themes.
20+ iPhone 14 Mockups
A versatile bundle of iPhone 14 mockups in portrait and isometric views. Ideal for variety.
iOS Keyboard Kit
Full-featured keyboard kit for iOS mockups with symbols, emoji, and numeric layouts.
iOS Phone & Facetime Call UI
UI templates for iOS phone and FaceTime screens. Perfect for communication or VoIP app demos.
iPhone 14 & iPhone 14 Plus Mockups
Where can you get Figma iPhone mockups?
Most people start with Apple’s own files and end up on the Figma Community. Mockup plugins and paid packs on marketplaces such as Gumroad cover whatever is left.
The goal is the same everywhere: a device frame, template or plugin scene that holds your UI screen inside an iPhone body. The screen you design in Figma is already a high-fidelity mockup of the interface. The device only decides how that screen gets framed for presentation.
| Source | What you get | Cost | Main limit |
|---|---|---|---|
| Apple Design Resources | Photoshop and PNG bezels | Free | No Figma file for the bezels |
| Figma Community files | Vector frames, PNG renders | Mostly free | License differs per file |
| Mockup plugins | Scenes rendered inside Figma | Free tier, paid library | Account required |
| Paid packs | .fig files with scenes and color sets | From about $5 per device | Quality varies by seller |
Apple Design Resources
The Product Bezels list on Apple Developer (checked in October 2026) includes iPhone Duo, iPhone 18, iPhone 17 and iPhone 16. Every one of them downloads as Photoshop and PNG only.
Apple does link some Figma files, but they’re UI kits. You get the iOS 27 and iPadOS 27 kits, plus the design kits for iPhone Duo that Apple’s September 18 developer news post links in Figma and Sketch formats. If you want a bezel inside Figma, import the PNG and layer it over your screen frame.
Figma Community files
Some Community files are vector frames built from shadows, borders and fills, so they scale without pixelation. One designer’s 18 Pro, 18 Pro Max and Duo file works this way. Others are rendered angle sets, like Uiscore’s free 18 Pro file with left, front and right views in four colors. Unblast’s free 18 Pro pack goes the clay route and adds clay versions with preset colors and gradients.
Figma’s own iPhone mockups page points to 1,000+ templates on the Community, which is a lot to sift through. License terms differ per file, and TitanUI lists Uiscore’s set as free for personal projects unless stated otherwise.
Paid packs sell the same thing with more scenes. A Gumroad listing for an iPhone 17 Pro Max vector file costs $6 and includes five color styles.
Mockup plugins
Artboard Mockups imports the mockup with an empty frame. You place your design inside it and click Render selected frame. It needs an Artboard Studio account, and the free plan covers a limited set (Artboard Studio documentation).
Mockuuups Studio works a little differently. Pick a frame, open the plugin from the Plugins menu, and your design appears on every mockup in the library at once. Exports on a premium plan carry a commercial license, according to Mockuuups.
Plugin scenes look better than flat frames. The price is an account and a plan sitting behind every render.
Which source ships new iPhone frames first?
Apple, by a wide margin. The 2026 launch shows it clearly.
- On Sept 9, 2026, Apple added iPhone Duo and iPhone 18 Pro bezels to Design Resources on event day (9to5Mac).
- Apple’s developer news post from Sept 18, 2026 linked Figma and Sketch design kits for iPhone Duo (Apple Developer news).
- A Community designer logged new 18 Pro, 18 Pro Max and Duo frame files on Sept 28, 2026 (GitHub changelog).
- Figma added iPhone Duo and iPhone 18 frame presets on Oct 23, 2026 (Figma release notes).
Figma’s own presets landed 44 days after the event.
The previous cycle was slower. Figma’s post about device frames for the iPhone 17 family is dated January 30, 2026, almost five months after Apple’s September 9, 2025 announcement (Apple Human Interface Guidelines change log).
If you need a frame on event day, Apple’s PNG is the only option. An editable version in Figma means waiting for a Community vector file.
iPhone models and frame sizes covered by Figma mockups
Design on the device’s point size and export at 3x. For the iPhone 17 Pro that is a 402 x 874 frame.
Apple quotes screen resolution in pixels, while a Figma frame is built in points. Divide Apple’s pixel counts by 3 and you get the frame size.
Apple’s published numbers are what you build from.
- The iPhone 17 Pro screen is 2622 x 1206 px at 460 ppi and 6.3 inches (Apple, 2025).
- The iPhone 17 Pro Max screen is 2868 x 1320 px at 460 ppi and 6.9 inches (Apple, 2025).
- In points, that makes a 402 x 874 frame for the 17 Pro (Playwright device list) and 440 x 956 for the Pro Max (Apple’s pixels divided by 3).
- An iPhone 18 Pro frame PNG measures 1350 x 2760 px around a 1206 x 2622 px screen (Screeny, 2026).
Apple rates both Pro models at 460 pixels per inch, so the same 3x frame stays sharp on either.
A mockup file is larger than the screen it holds, because it includes the bezel. Size your screen frame to the screen figure, never to the file’s outer dimensions.
The Dynamic Island sits inside the safe area, and Apple’s layout guidance exists to keep content from hiding under it. The iPhone 18 Pro variants carry a smaller Dynamic Island (9to5Mac, 2026), so a 17-generation frame shows the wrong cutout.
Figma’s frame presets set the size for you. Create the frame from a preset and Figma selects the matching device in prototype settings, per the Figma Help Center.
Coverage beyond Apple’s list comes from the Community. One file covers the iPhone Air in Sky Blue, Light Gold, Cloud White and Space Black.
iPhone Duo adds open and closed configurations. Apple’s bezel pack includes both of them in both colors (9to5Mac, 2026).
How to place a screen inside an iPhone mockup in Figma
Place the screen by nesting a live frame inside the mockup, or let a plugin render it into a scene. Nesting keeps the screen editable, while rendering gives you lighting and perspective.
- Create the screen frame from a frame preset so its size matches the device.
- Duplicate the mockup file and choose the model, angle and color.
- Drop the screen frame into the mockup’s screen layer and line it up with the cutout.
- Clip the screen to the cutout’s rounded corners.
- Move the Dynamic Island and status bar layers above the screen.
- Zoom to 100% and check every edge for gaps.
Skip the clip and the screen’s square corners poke past the bezel. Masking the screen to the rounded cutout closes that gap.
A screen with the wrong aspect ratio stretches or leaves a gap at one edge. Starting from the matching frame preset avoids both.
Delete any status bar from your own design if the mockup already draws one. Apple’s App Store marketing guidelines ask for a full network icon, a full Wi-Fi icon and a full battery icon on the status bar.
Image fill, nested frame or plugin render?
Image fill is the fastest route, and the screen becomes a flat picture. Any change means re-exporting the screen and filling again.
A nested frame keeps the screen live, so edits show up in the mockup instantly. It does need a file with a clear screen slot.
Artboard Mockups and Mockuuups Studio both take a selected frame and place it into a scene, which gets you high-resolution renders. The output is still just an image.
Nested frames pay off when the device is built as a component, because one edit reaches every copy. If components are new to you, here is how components work in Figma.
Uiscore’s free iPhone 18 Pro file lists the same flow. Duplicate the file, choose the angle and color, replace the screen by plugin or manual paste, then export.
Which mockup style fits a client review, a portfolio or the App Store?
Match the style to where the image ends up. Flat or clay frames work for reviews, while portfolios can take realistic scenes. Store pages call for Apple’s own bezels.
A review is about the interface, so drop the photo scene. How you go about presenting Figma work to clients matters more than the bezel.
Unblast’s free 18 Pro pack, for example, ships clay versions with preset colors and gradients.
Portfolio shots can afford a scene. A hand-held or lifestyle shot is the usual pick for a case study, posted on Dribbble or Behance, and Artboard Studio positions its mockup library for client presentations, case studies and portfolio pieces.
Store pages are stricter. Apple’s marketing guidelines call for Apple-provided bezels in all marketing materials, used as is and without modification.
Colors follow the model, so pick the frame that matches the product you are showing. The iPhone 17 Pro and Pro Max come in Silver, Cosmic Orange and Deep Blue (Apple, 2025). Free Community and Screeny frame packs for the iPhone 18 Pro list Black, Burgundy, Glacier and Silver. iPhone Duo ships in Night Sky and Star White (9to5Mac, 2026).
When in doubt, a flat Apple bezel works in all three places.
Apple’s usage rules for iPhone bezels and 3D mockups
Apple lets you show your app on its own bezels, but only as is. Rendering an Apple product in 3D or simulating one is on the not-permitted list for marketing materials.
What follows summarizes Apple’s published text and is not legal advice. Read the license that ships with each download before a client project.
The Apple Design Resources License is a limited, non-transferable, non-exclusive license for mock-ups of interfaces that run only on Apple operating systems, subject to the Human Interface Guidelines (version dated June 21, 2023). Apple’s separate marketing artwork agreement covers product images only for apps available on the App Store, and only while you are in the Apple Developer Program.
The license is the one that applies to an unreleased concept in your portfolio. The marketing agreement takes over once the app has shipped and sits on a store page.
Apple is specific about what counts as modifying a bezel, and the list covers:
- adding reflections, shadows or highlights
- cropping, tilting or covering any part of the image
- animating, flipping or spinning it
- letting graphic elements enter or leave the screen
- turning the image into a button or icon
Promotional copy goes beside the device, never on top of it. The device must also stay at least 200 px tall on screen and 25 mm in print.
Photography is the allowed route to angled shots. Apple permits custom photography and video of real devices, prefers straight-on framing and rules out extreme angles.
The sources don’t agree on 3D. AppLaunchpad recommends isometric iPhone mockups for App Store and Google Play screenshots, and the Bezel Studio app offers 3D frames with full rotation for store screenshot sets.
Apple’s guidelines point the other way. Tilting counts as a modification, and 3D rendering or simulation is unauthorized in marketing.
Apple’s text never mentions third-party scene packs, so the disagreement is about interpretation, not a ruling. For a store page, the bezel Apple supplies is the one choice that sits inside Apple’s own wording.
Files from other sources carry their own terms. Figma’s Help Center sets these defaults:
| Source | Default license | Who can change it |
|---|---|---|
| Free Community file | CC BY 4.0, credit required | Creator can add license types |
| Paid Community file | Community Paid Resource License | Creator cannot offer other terms |
| Free Community plugin | Community Free Resource License | Creator can supplement or replace it |
A download mirror can label a free Community file personal-use only, while Figma’s default for free files is CC BY 4.0 with credit. The file’s own Community page decides.
Paid packs add tiers. One Gumroad seller’s commercial license caps paid promotion at 5 million views and bars resale and client advertising, and another asks companies with more than 3 employees to buy a higher tier.
Exporting a Figma iPhone mockup as PNG, SVG or PDF
Select the outer mockup frame, add an export setting, and choose PNG at 3x for anything with a screen image inside. SVG and PDF export at 1x only, so they suit frames that are pure vectors.
PNG is lossless and keeps transparency. It always carries an alpha channel, because Figma exports 32-bit RGBA only. JPG is lossy with no transparency, so it fits only a mockup on a solid background. SVG and PDF export text as glyphs by default, and Figma writes PDF 1.7 files.
A vector frame scales cleanly as SVG, but a mockup with a screenshot inside is raster at heart. That’s the practical difference between SVG and PNG for this job.
If the mockup is headed into a deck, you can also export Figma to PDF. Just remember the 1x limit.
Figma exports at 72 DPI by default, so a 3x export carries 216 DPI (Figma Help Center).
Type a number followed by x, w or h to set a multiplier, a fixed width or a fixed height.
A few export settings are worth changing from the defaults.
- Figma exports in the file’s color profile unless you pick sRGB or Display P3. Apple lists wide color (P3) for the iPhone 17 Pro display, so keep Display P3 for iPhone and Mac screens and pick sRGB for the web.
- To get a transparent background, untick Show in exports on the frame’s fill.
- Leave resampling on Detailed, the default, because Figma recommends it for gradients and drop shadows.
- A slice fixes the padding around the device. A plain frame export follows the shape bounds and shifts if the shape changes size.
Sets of screenshots export in one pass. Press Shift and Command and E on a Mac (Shift and Ctrl and E on Windows), and Figma exports every selection on the page that has an export configuration.
Slash-separated layer names also sort exports into nested folders. If the Export section is missing, the file owner may have restricted copying and sharing.
When do Figma iPhone mockups fall short?
They struggle with models that are too new or too old, playback exports, prototypes that mix orientations, and large screenshot sets.
On the new side, Apple’s marketing guidelines ask for the latest-generation devices your app is currently developed for, so a frame that lags a launch is a compliance gap on a store page.
Older models fail the other way. Figma staff told forum users that archived presets sit at the bottom of the device selector, so a model like the iPhone 11 takes an extra step to find.
Playback exports are a dead end for now. The device container shows in inline preview and presentation view, and Figma’s export article lists no option to export it. One forum reply describes right-clicking the Prototype panel preview to save a transparent PNG, but the Help Center does not document that route, so test it before a deadline.
A prototype’s device orientation is set once and cannot switch inside the prototype, per the Figma Help Center.
Large sets are the last pain point. AppLaunchpad, which sells its own screenshot editor, says aligning screens, running plugins and exporting each frame make scale difficult. Figma’s bulk export covers the export half of that complaint, not the placement half.
Device settings live in the Prototype tab, so they only matter once you know how to prototype in Figma. The built-in container and a mockup file solve different problems.
| Attribute | Prototype device container | Mockup file |
|---|---|---|
| Where it shows | Inline preview and presentation view | On the canvas, as layers |
| Export | No option in Figma’s export article | Standard export of the outer frame |
| Orientation | Portrait or landscape, set once | Any pose the file includes |
| Colors | Model picker, four colors for the iPhone 15 Pro Max | Whatever the file ships |
For a one-off review, a free Community frame is enough. Pay for a plugin only when the destination needs scenes.
Common Questions About Figma iPhone Mockups
Is Rotato better than a Figma mockup?
Only when the output is a 3D render or a video. Rotato turns screenshots and screen recordings into 3D device mockups. Its Mac app runs on macOS and is sold as one-time payments, with the premium tier at $199, and there is also a free browser beta, Rotato Web (Rotato).
A Figma mockup stays the better choice when the screen must remain editable.
What screenshot sizes does App Store Connect accept for iPhone?
App Store Connect wants at least one screenshot for the iPhone with Dynamic Island (medium display) class, at 1206 x 2622 px or 1179 x 2556 px in portrait, with up to 10 per size (App Store Connect Help).
Screenshots cannot carry alpha channels, and Figma always writes one into PNGs, so export JPG for uploads.
How do I preview a Figma design on a real iPhone?
Sign in to the Figma mobile app with the same account, select a top-level frame on your desktop, and open the Mirror tab. The app scales the frame to your device’s width, and connected prototype frames stay interactive.
The two devices do not need to share a Wi-Fi network, because Wi-Fi or cellular both work. If your phone is unsupported, figma.com/mirror works in a mobile browser.
Do I need a paid Figma plan to make iPhone mockups?
No. Exporting and prototype device settings work on any plan, according to the Figma Help Center.
For the wider picture, see how Figma’s free and professional plans differ. Plugin libraries sit behind their vendors’ own plans.
Building One Mockup Component That Outlasts Each iPhone Release
Figma iPhone mockups stay cheap to maintain when one component holds the device frame and a replaceable screen, so a new release means swapping one frame instead of rebuilding every file.
Start with the screen frame at the model’s point size, wrap the device component around it, and set export settings last. Export configurations attach to the selection, and dimensions change with each model, so settings applied early get redone.
Plan for two screen slots now. App Store Connect lists iPhone Duo screenshots at 1398 x 2034 px (outer display) and 2007 x 2853 px (inner display), required from April 2027 for apps using the iOS 27.1 SDK or later (Apple, verified October 26, 2026).
You give up tilted scenes and get flat, straight-on results. For a mockup file that updates in one edit, that’s a fair price.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
