Content Keys

A Content key is a unique identifier of a piece of content.

Content Keys are used to:

  1. Identify a row on a spreadsheet

  2. Specify a design element's content

Identify a Row on a Spreadsheet

On a spreadsheet, the first column is the content key. This identifies the row to be used and typically the key is descriptive of where or how the content will be used.

Specify a Design Element's Content

Design Element's are assigned a content key. This content key is used to grab the correct content when syncing with a spreadsheet.

Content Keys can be used many times throughout a design to reuse the same piece of content within your design. For example, if a common name is used throughout multiple pages, all the design elements can be assigned the same key which will cause them to all share the same content on a sync.

Layers with the same name will sync to the same content. By default, layers with the same name will share content. Pay attention to your layer names.

The Content Key Format

Default Content Key

Design elements have default content keys to simplify design file configurations. The default content key follows the Content Key Format however you may override them with any name you would like.

Typically content keys are descriptive of where or how the content will be used in a design. You are free to name your content keys anything you would like, however there are some special scenarios where the format is specific.

Standard Keys

A standard key can be any string.

Examples:

  • Header

  • WelcomePageBodyText

  • AvatarImage

Symbol Overrides

Some design programs support reusable symbols that are allowed to have internal content overwritten. By default, key with -> signify a layer within a symbol. There can be multiple to signify nested symbols.

Examples:

  • SecondColumn -> Title

  • SecondColumn -> Button -> Action

Symbol Types

Some design programs support dynamically swapping symbols based on a content version. The default keys that identify a symbols type end is ".type".

Examples:

  • SecondColumnLayout.type

  • TextAlertStyle.type