How to use Figma Embeds

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

hotspot-hints=0

// Show at the actual size (100%) scaling=min-zoom // Fill screen scaling=contain // Fit width scaling=scale-down-width // Fit screen scaling=scale-down