Behind the feature: Inline device frames

Today, we’ve rolled out a suite of enhancements that make prototyping with Figma faster, more intuitive, and—dare we say—even more fun. Highlights include “copy and paste noodles” for swift interaction duplication, a nifty trick for quickly deleting flows, and for the power users, advanced features like importing elements with local variables into new files with ease. Plus, we’ve boosted performance, cutting down those pesky loading spinners in key use cases by 22%. These updates are all part of our commitment to streamlining your workflow and sparking your creativity. Dive into the full details in our release notes, and start applying those features in your next project.

Stay tuned for the recording from our office hours to learn more about all the updates and see how the Figma team uses prototyping.

One feature we’re particularly excited about is inline device frames, the ability to bring your designs a step closer to reality without leaving the editor. Here, Software Engineer Jediah Katz and Product Designer Chia Amisola share how there’s more than meets the eye to these fancy little frames.

When you’re designing an app, there’s nothing quite like the real thing—holding it in your hand, clicking through the various screens or flows, and getting a sense of how it feels. The same goes for everything from websites to watches. That’s why prototyping is such an important part of the product development process. By bringing your designs closer to reality, prototypes help you better understand how they’ll actually work—often revealing gaps or opportunities early in the design process.

So following the launch of inline preview at Config 2023, which allowed designers to view their prototypes in real-time, we’ve pushed this feature further to bring device frames directly into the editor, too.

A collaborative foundation

Figma has long supported a range of device presets in presentation view, allowing designers to capture the nuances of real-world use. Knowing how popular these presets were, we set out to bring them into the Figma editor, allowing you to access a range of phone, table, and watch interfaces right next to your designs.

The path to integrating interactive devices onto the Figma editor was filled with interesting design and engineering challenges. Our collaborator, Nikolas Klein, a product designer working on prototyping at Figma, described the ideal end-state: “We wanted the device to feel tangible in the editor. You have to be able to grab it, resize it, and move it to where you want it.” Achieving this meant transcending the static image to create a dynamic, responsive frame that could adapt and resize—just like a design would in your device. This challenge required a meticulous translation of various devices into the editor, coupled with intuitive interaction design, ensuring every gesture felt natural and precise.

Before diving into the development, we gathered insights from our community, which we then combined with feedback from a cross-functional team at Figma that spanned engineering, design, product management, and marketing.

We set out with a few guiding principles:

1. Seamless integration into the design process
2. Realistic representation of diverse devices
3. Intuitive user interactions with device hit targets

These principles served as our north star, guiding the development and design decisions that would follow.

Where should the user be able to interact with watch devices?

Representing a range of devices

A significant hurdle we encountered was the need to capture the broad spectrum of device shapes and sizes. Given the space constraints of the inline preview, we chose to focus on mobile, tablet, and watch devices (versus personal computers, which would be too large).

The first prototype of device frames.

To achieve our goal of providing a realistic and interactive design experience, we wanted to let users drag device frames by their bezels and resize them from the edges and corners. This decision brought to light the complexities of modern devices’ diverse shapes and features: from smartphones with notches, tablets, square and round bezels, and even non-rectangular forms like watches. Depicting each of them meant a deep attention to detail to ensure that they would feel resizable and malleable, beyond the current capabilities of presentation view.

Intuitive interactions with SVGs

Representing each of these devices was just one part of the challenge; addressing how users would interact with them was another. The variation in how users could engage with different models—from the notches of older iPhones to the dynamic islands of newer ones—underscored the need for tailored interaction designs for each type of device. On the design side, Chia oversaw which parts of each device we should support and not—for example, you can’t drag from a dynamic island, as that would block prototype interactions. To address this, we crafted 50 unique hit targets, each meticulously designed for a specific device, precisely calibrating where users can drag and resize each. This was key to maintaining an immersive experience. Our journey to depict these hit targets led us to explore various approaches, experimenting with ideas like manually specifying shapes in CSS, or checking for transparency, as Figma device frames are implemented as raster images.

Ultimately, SVGs emerged as the clear solution. Their versatility allows us to accurately create the unique shapes of each device frame, directly within Figma, thanks to our SVG export capability. More importantly, SVGs have built-in hit detection. Once the SVG is flattened down to a simple path, they inherently support mouse handlers—making it possible for us to differentiate between clicking on a device’s bezel or its screen.

Each SVG consists of two key parts: a red shape indicating where users can click and drag, and a green outline denoting the area that can be resized. The resize target is designed to maintain a consistent 16-pixel width for clarity and usability, while the draggable target scales to fit the device as you resize it. This approach to SVG design ensures that every interaction with device frames feels natural, bridging the gap between digital prototyping and the tactile experience of handling a real device.

A low-scale design process

Embarking on the task of designing 50 touch targets from scratch was daunting, especially with uncertainties around the precise dimensions of these interactive regions. We didn’t want to manually draw them out. (Contrast this to the work of Product Designer Keeyen Yeo, who manually draws out each supported device frame in Figma, maintaining a file of beautiful, high-quality frames as new devices are announced.) These hand-drawn frames, while diverse, share common elements, providing a loose structure to the shape and structure of each device.

Jediah developed a bespoke internal Figma plugin to semi-automate the creation of these hit targets. Leveraging Keeyen’s detailed device frames, the plugin extrapolates hit targets based on certain heuristics, like the ratio between inner and outer frames, to deduce the screen and bezel areas. Although effective for the majority of our existing devices, the plugin wasn’t robust enough to perfectly detect the screen and bezel for some of the more complex designs. Uniquely shaped devices, such as watches, needed to be drawn manually.

Jediah’s plugin also allowed us to adjust parameters such as the thickness of resizable areas, enabling us to closely simulate how these frames would function within Figma—essentially testing the fidelity of a feature that provides fidelity. By testing each device frame as a designer would, we refined the hit targets, with Chia stepping in to manually draw hit targets as needed.

Though our method is more boutique than factory (we have to manually add in each new device and its hit target), it suits our current needs. We don’t add hundreds of device frames a year (and thankfully, there aren’t hundreds of popular devices on the market)—instead, our scope ensures we can dedicate time to solving more significant challenges while still providing a robust offering of device frames for our users.

A meta endeavor

Building the device frames feature was a journey of exploration and collaboration. It pushed our engineers and designers to develop custom internal tools tailored for rendering these devices, blending technical precision with a deep focus on user-centric design. Our handdrawn targets helped us move with care and intention towards the fine details of where designs are touched. This adventure reminded us that the best solutions emerge from a mix of experimentation, attention to detail, and rigorous testing—principles that guided us in making the inline preview even more contextual and intuitive.

Our journey into designing device frames introduced a delightful twist: We found ourselves creating prototypes within prototypes. In a way, working on device frames felt like peering into a mirror, reflecting on how we use Figma to enhance Figma. It’s a quirky, meta journey we’re glad to share with you.

We’d also like to thank Software Engineers Sakura Rapolu, Moe Amadou, and Paras Sanghavi for their contributions. We’re excited for you to try out device frames, and eager to see how it transforms your design process. If you’re interested in solving problems like these, we’re hiring.