Adding Designs to Knapsack

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

This article assumes you’ve already read Adding Content to Knapsack.

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 design library, 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 Cloux

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.