Embedding Designs and Resources

This feature, along with other custom embeds, is only available to Team or Enterprise level accounts.

This article assumes you’ve already read Creating Documentation.


Embedding Designs

Live design embeds are a powerful way to incorporate design specifications into your design system. You can also use this feature to document design symbols from a UI kit, or otherwise embed visual content that will always be up to date with the design.

Designs can of course be embedded as static images, but live design embeds make keeping designs up to date in the documentation much easier. When you update your design, it’s automatically updated in Knapsack.

The currently supported tools for live design embeds are…

  • Adobe XD
  • Abstract
  • Figma
  • Framer Cloud

Be sure to check the list of Embed type blocks in case this documentation is out of date.

When you add any one of the design specific embed blocks, you’ll be given in-context instructions on how to embed your design.

Empty Figma Block

The top right edit button that appears on hover provides the ability to adjust the height of the block.

Once you have embedded a design, if you return to Figma and modify it, you'll see it instantly update in Knapsack. Some embeds, like Abstract, will require a refresh of Knapsack to see it updated.

Embedding Other Resources

Just like embedding designs, other resources can be easily embedded into your documentation via content blocks. There are many different kinds of embeds out of the box and the list is growing all the time.

If you want to embed content and there isn't an embed specifically for it, you may be able to utilize the generic iframe embed instead.

Embed Options