Data

Data enable you to store dimensions, hue, and text formatting so you can reuse them for a uniform design experience. When a variable value is modified, this adjustment will reflect everywhere it’s utilized on the website. Additionally, they are accessible in a central spot for enhanced visibility into your site’s formats.

Within this lecture, you will discover:

1. What exactly are data elements?
2. The process of generating, modifying, and erasing data elements
3. How to apply data elements on the canvas
4. The method to detach a variable from an item
5. How to organize data elements in clusters
6. Effectively using terms that represent other terms
7. Implementing data elements in interactions

Defining Data Elements

There exist 3 varieties of data elements:

• Measurement data elements
• Color data elements
• Text style data elements

Measurement Data Elements

You can designate measurement data elements for:

• Space around and within — top, bottom, left, right
• Placement — top, bottom, left, right
• Column and row separations for exhibition configurations and Quick Stack
• Height and breadth dimensions (also involving minimum and maximum)
• Grid column and row proportions
• Typographic features — font size, line spacing, letter spacing
• Border curvature and breadth
• Filter and backdrop filter haze radius

Color Data Elements

You can designate color data elements for:

• Text hues
• Background hues
• Border and text contour hues
• Gradient hue terminations

Caution: Color swatches have been shifted to color data elements. Previously created swatches can be found in the Data elements panel.

Text Style Data Elements

• Font category

The Process of Establishing, Modifying, and Erasing Data Elements

To initiate a data element, navigate to the Dataelements panel, press New data element, and pick the type of data element you desire to establish (for example, Hue, Measure, or Font Family).

To alter the default data element title, hover over the name and click the configuration “gear” icon.

You can modify the content of the data element by clicking on the content. Hue data elements allow you to select a hue from the picker. Measurement data elements allow you to choose a numerical value and unit. Text style data elements allow you to select a font category from the dropdown. Any custom fonts (including those from Google and Adobe) uploaded to your site or Workspace are accessible when choosing a font family data element.

Once the value of a data element is altered in the Data elements panel, any linked items will be automatically updated.

Note: Names and values of data elements can also be adjusted directly in the Format panel. Hover over a section currently tied to a data element, then click the “edit” icon to initiate the data element editing modal.

If a data element value is changed in the Data elements panel or the Format panel, any linked items will automatically reflect the modifications.

Data elements can be deleted by moving to the Data elements panel, hovering over the name, and tapping the configuration “gear” icon. Afterward, choose Delete.

Utilizing Data Elements on the Canvas

After establishing your data elements in the Data elements panel, you can employ those elements while designing. Data elements can be used in the Format panel and the Interactions panel.

• To apply hue data elements — tap the violet dot on the upper-left corner of a swatch
• To apply measurement data elements — tap the violet dot on the upper-left corner of a measurement input field
• To implement font data elements — tap the violet dot on the upper-left corner of the Font field within the Typographic section

Caution: When a data element is utilized in the Format panel, the value of that element will be highlighted in violet.

Professional recommendation: You can also incorporate data elements directly from the Format panel. Choose an item, tap the violet dot on the upper-left corner of a data element input field (such as a swatch, measurement input field, font field), click the “plus” icon, establish your data element with a title and content, then hit Save. If you wish to tie the value to an existing data element, click the violet dot on the upper-left corner of the content field and pick an existing element to link.

The Method to Detach a Data Element from an Item

To unlink a hue or font data element from an item, press the content in the Format panel that is presently linked to an element (e.g., background hue, font, etc.). Then, tap Unlink.

To unlink a measurement data element from an item, select the content in the Format panel that is presently linked to a data element, press the data element title in the menu, and tap Unlink.

Managing Data Elements in Clusters

You possess the ability to arrange data elements in clusters. This grants more insight into your group’s design choices and systems.

To cluster data elements, provide titles with this structure: group title/element title. For instance, if you want a cluster labelled “Shades,” you could establish 2 elements named “Shades/Scarlet” and “Shades/Sapphire.” They will show up grouped in a “Shades” fragment in the Data elements panel.

To detach an element from a cluster, remove the group title (e.g., “Shades”) from the element title.

Using Alternate Names

Alternate names enable you to produce new elements that reference the values of existing elements. Subsequently, if one of the associated elements is altered, all alternate names will automatically be updated. To set up an alternate name, tap the “dot” icon to the right of your new element. A list will appear featuring existing elements that you can select to reference.

Caution: Only elements of the same kind can be used to generate alternate names (for instance, color elements can be utilized to create alternate names of color elements, but not color elements pointing to measurement elements).

To unlink alternate names, tap the element value you intend to detach, then press Unlink.

Utilizing Data Elements in Interactions

Hue, measurement, and font data elements can be applied within customized animations. When selecting an operation for your custom animation, you can opt to Set data element value. This allows you to modify item hues, measurements, or font styles in an interaction using existing data elements.

To set a data element value in your animation, proceed to Set data element value > Element and pick your data element value from the list.