What are variables?

Variables in Ditto allow teams to integrate dynamic values into their text.

From names to counts to links, variables make it easy for teams to integrate dynamic values, without requiring engineers to manually restructure content and without interfering with the display of text in designs. 🙌

Variable Basics

All variables are referenced by their name. Names are unique within a workspace and composed of characters in the set [A-Za-z0-9_]+.

We currently support 3 different types of variables: strings, numbers, and links. Depending on the type, the variable will contain different properties:

🔤 String — for dynamic text content (ex: a user's name, company name, selected value)‍

• Example — an example of a value for the variable. The example value is what will get synced back to the design.‍
• Fallback (optional) — a value that can be used in production if no value is provided for the variable (ex: a generic word like "user" instead of a name or an explicit fallback like "N/A").

🔢 Number — for dynamic numbers (ex: counts, prices)

• Example — an example of a value for the variable. The example value is what will get synced back to the design. For numbers, this must be a number (characters in the set [0-9.]+).
• Fallback (optional) — a value that can be used in production if no value is provided for the variable (ex: a generic word like "a few" instead of a numeric count or an explicit fallback like "N/A").

🔗 Links — for hyperlinks in the text

• Text — the text that's linked itself. This value is what will get synced back to the design.‍
• URL — the actual URL to be linked for this text. Must be a full URL.

‍