Embedding Designs and Resources

NOTE: In order to edit content, Cloud users must first create a branch via the UI. For more information, see Editing + Publishing Workflow.

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

For more information on embedding designs, see Creating Documentation

When you add any one of the design specific embed blocks, you’ll be given in-context instructions on how to embed your design.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.