How to use Figma Embeds

You can use Figma to embed prototypes in many places

Figma's ability to live embed designs or prototypes into webpages is a really powerful and somewhat overlooked feature. You can do some quite creative things with these embeds. As an example, I've used this to embed previews within design system documentation to show interactive components with states and variants.

When copying a share url from Figma you can modify the way the embed appears. It does this by the attributes appended to the share url's query string. However you can modify this yourself by modifying these values.

Hide Figma UI

show-ui=0

Hide Hotspot Hints

hotspot-hints=0

Scaling

// Show at the actual size (100%)
scaling=min-zoom

// Fill screen 
scaling=contain

// Fit width
scaling=scale-down-width

// Fit screen
scaling=scale-down