Behind the Feature: Inline Device Frames | Figma Blog (opens in new tab)

Inline device frames bring interactive phone, tablet, and watch mockups directly into the Figma editor, making prototypes feel closer to real-world use without switching to presentation view. The feature evolved from Figma’s inline preview and was designed to make devices tangible, movable, and resizable. Its development balanced realistic device representation with intuitive interactions and collaborative input from Figma’s community and cross-functional teams.

Prototyping in the Editor

• Figma introduced inline device frames as part of broader prototyping improvements.
• Designers can preview their work within representations of mobile, tablet, and watch devices.
• The goal is to help teams identify usability gaps and opportunities earlier by experiencing how designs actually behave.
• Other announced prototyping updates included:
  • Copying and pasting interaction “noodles”
  • Faster flow deletion
  • Importing elements with local variables into new files
  • A 22% reduction in loading-spinner time in key use cases

A Collaborative Foundation

• Figma previously offered device presets in presentation view, but the team wanted to make them available beside designs in the editor.
• The intended experience was for devices to feel tangible:
  • Users should be able to grab, move, and resize them.
  • Frames needed to be dynamic and responsive rather than static images.
• Development combined community research with feedback from engineering, design, product management, and marketing teams.
• Three guiding principles shaped the feature:
  • Seamless integration into the design process
  • Realistic representation of diverse devices
  • Intuitive interactions through clearly defined hit targets

Representing Different Devices

• The inline preview’s space constraints led the team to prioritize phones, tablets, and watches rather than larger personal-computer interfaces.
• Supporting many device shapes and sizes created significant design and engineering challenges.
• The team had to account for details such as smartphone notches, which house front-facing cameras and sensors.
• Watch frames raised additional questions about where users should be able to interact and resize the device.

Inline device frames are intended to make prototyping more immediate and realistic while preserving the flexibility of the Figma editor. Designers can use them to evaluate designs in context without leaving their working file.