Since we launched variables in Ditto in 2021, we've been hard at work expanding our offering to make it even easier for teams to interpolate dynamic text. As teams use Ditto variables to eliminate the work between designers and developers to implement text, we’ve heard requests from teams for variables to handle more structured dynamic content. This might include a list of product options, a mapping of language encodings to links, a group of identifiers, or more.
Today, we're excited to announce the launch of two new variable types in Ditto: lists and maps! You can start creating and inserting list and map variables in Ditto today — in either our web-app or Figma plugin.
A list variable, also referred to by developers as arrays or enums, is helpful for storing a collection of elements.
When creating a list variable in Ditto, the elements of the list are unique strings provided by the users. Like other variable types, text in designs with list variables will sync with a human-readable value as opposed to the development-ready interpolated text — in this case the first value of the array. When developers fetch the text using our API, CLI, or exports, they’ll also be able to fetch the values of the list to use directly in production.
A map variable is helpful for storing key-value pairs.
When creating a map variable in Ditto, users are able to specify unique strings to serve as keys and a string as each of the values that a key maps to. Similar to a list variable, Ditto will preserve human-readable strings when syncing back to designs; for map variables, Ditto will use the first value in the key-value pairs to display in designs. When developers fetch the text using our API, CLI, or exports, they’ll also be able to fetch the map’s key-value pairs to use directly in production.
With the launch of Lists and Maps in Ditto, we're excited to provide all of the even more powerful tools to help teams structure, standardize, and interpolate text in a way that saves times for everyone from writers to designers to developers.
For those using our React SDK, we’ve also added the ability to interpolate these new variable types.
These new variable types supplement our existing string, number, and link variable types, providing more flexibility and control for dynamic values. If you're new to Ditto, you can give Variables a spin in any project in Ditto. To start a new project, open up our Figma plugin in any of your Figma files or log into our web-app. 🙌
📖 For detailed information, check out the Variables Help Guide.