Any collection of elements that you’ve added to the page can be saved as a reusable design snippet. From that point on, it will appear in the snippets drawer for you to use (if you save it to your personal account), or for your teammates to use (if you are a Team Edition user and you save it into your team’s account.)

Saving a New Snippet

To save some page elements as a snippet, they’ll need to be contained within a single parent element. In other words, it’s not possible to save multiple elements that are at the same level of hierarchy as a snippet:

Elements of a new snippet must be within a single parent element.

Everything that’s currently contained in the parent element will be saved as a part of this snippet. This includes any text content within text elements, any images or videos that have been added, and all of the block-level and inline styling that has been applied. Interactions and hover states will also be saved as part of the snippet.

To save your snippet, open the snippet drawer and click “Add New”, or choose “Save as Snippet…” from the “Edit" menu in the top bar. 

A dialog will ask you what you’d like to name your snippet, and where you want to save it. Snippets are saved at the account level – so if you are a Team Edition user, you can save it to your team’s account to make it available to everyone. If you’d rather just work with the snippet yourself without granting others usage, you can save it to your personal account.

You can also select a destination folder for the snippet. Folders are handy for keeping your snippets organized; learn more about using folders here

There are a number of things you should consider when saving a snippet, especially if other members of your team are going to use it: Where have you applied styling, and where do you want to allow it to inherit global styles? Are the elements well-labeled? Is the snippet responsive?  We’ve compiled a “best practices” guide to walk you through some of those decisions.

Did this answer your question?