In Illustrator, you can turn any piece of artwork into a template for data-driven graphics. All you need to do is define which objects on the artboard are dynamic (changeable) using variables. You use variables to change text strings, linked images, graph data, and the visibility setting of objects in your artwork. In addition, you can create different sets of variable data to easily view what your template will look like when it is rendered.

Data-driven graphics make it possible to produce multiple versions of artwork quickly and accurately. For example, suppose that you need to produce 500 different web banners based on the same template. Manually populating the template with data (images, text, and so on) is time-consuming. Instead, you can use a script that references a database to generate the web banners for you.

Data-driven graphics are designed for use in collaborative work environments. Following are some examples of how data-driven graphics fit into different job roles:

  • If you’re a designer, creating a template gives you control over the dynamic elements of your design. When you hand your template over for production, you can be sure that only the variable data will change.

  • If you’re a developer, you can code variables and data sets directly into an XML file. The designer can then import the variables and data sets into an Illustrator file to create a design based on your specifications.

  • If you’re responsible for production, you can use scripts within Illustrator or the Batch command. You can also use a dynamic imaging server such as Adobe® Scene7 to further automate the rendering process.

Variables panel overview

You use the Variables panel (Window > Variables) to work with variables and data sets. The type and name of each variable in the document are listed in the panel. If the variable is bound to an object, then the Objects column displays the name of the bound object as it appears in the Layers panel.

Variables panel
Variables panel

A. Data set B. Panel menu C. Variable type D. Variable name E. Name of bound object 

The Variables panel uses the following icons to indicate a variable’s type:

  • Visibility variable .

  • Text String variable .

  • Linked File variable .

  • Graph Data variable .

  • No Type (unbound) variable .

    You can sort the rows by clicking items in the header bar: by variable name, object name, or by variable type.

Create variables

You can create four types of variables in Illustrator: Graph Data, Linked File, Text String, and Visibility. A variable’s type indicates which object attributes are changeable (dynamic).

Note:

The Variable panel menu also provides commands for creating variables.

Create a Visibility variable

  • Select the objects that you want to show or hide and click the Make Visibility Dynamic button  in the Variables panel.

Create a Text String variable

  • Select a type object and click the Make Object Dynamic button  in the Variables panel.

Create a Linked File variable

  • Select a linked file and click the Make Object Dynamic button in the Variables panel.

Create a Graph Data variable

  • Select a graph object and click the Make Object Dynamic button in the Variables panel.

Create a variable without binding it to an object

  • Click the New Variable button  in the Variables panel. To subsequently bind an object to the variable, select the object and the variable, and click the Make Visibility Dynamic button or the Make Object Dynamic button.

Edit variables

You can edit a variable’s name or type, unbind a variable, and lock a variable using the Variables panel.

Unbinding a variable breaks the link between the variable and its object. Locking variables prevents you from creating variables, deleting variables, and editing variable options. However, you can bind and unbind objects to locked variables.

Change the name and type of a variable

  • Double-click the variable in the Variables panel. Alternatively, select the variable in the Variables panel, and choose Variable Options from the Variables panel menu.

Unbind a variable

  • Click the Unbind Variable button  in the Variables panel, or choose Unbind Variable from the Variables panel menu.

Lock or unlock all variables in a document

  • Click the Lock/Unlock Variables button  or  in the Variables panel.

Delete variables

Deleting a variable removes it from the Variables panel. If you delete a variable that is bound to an object, the object becomes static (unless the object is also bound to a variable of a different type).

  1. Select a variable you want to delete.

  2. Do one of the following:

    • Click the Delete Variable icon  in the Variables panel, or choose Delete Variable from the Variables panel menu.

    • To delete the variable without confirmation, drag it to the Delete Variable icon.

Edit dynamic objects

You change the data associated with a variable by editing the object to which it is bound. For example, if you’re working with a Visibility variable, you change the object’s state of visibility in the Layers panel. Editing dynamic objects lets you create multiple data sets for use in the template.

  1. Select a dynamic object on the artboard, or do one of the following to automatically select a dynamic object:

    • Alt‑click (Windows) or Option‑click (Mac OS) a variable in the Variables panel.

    • Select a variable in the Variables panel, and choose Select Bound Object from the Variables panel menu.

    • To select all dynamic objects, choose Select All Bound Objects from the Variables panel menu.

  2. Edit the data associated with the object as follows:

    • For text, edit the text string on the artboard.

    • For linked files, replace the image using the Links panel or the File > Place command.

    • For graphs, edit the data in the Graph Data dialog box.

    • For all objects with dynamic visibility, change the state of visibility for the object in the Layers panel.

Identifying dynamic objects using XML IDs

The Variables panel displays the names of dynamic objects as they appear in the Layers panel. If you save the template in SVG format for use with other Adobe products, these object names must conform to XML naming conventions. For example, XML names must begin with a letter, underscore, or colon, and cannot contain spaces.

Illustrator automatically assigns a valid XML ID to every dynamic object you create. To view, edit, and export object names using XML IDs, choose Edit > Preferences > Units (Windows) or Illustrator > Preferences > Units (Mac OS), and select XML ID.

Data sets

A data set is a collection of variables and associated data. When you create a data set, you capture a snapshot of the dynamic data that is currently displayed on the artboard. You can switch between data sets to upload different data into your template.

The name of the current data set is displayed at the top of the Variables panel. If you change the value of a variable so that the artboard no longer reflects the data stored in the set, the name of the data set is displayed in italic type. You can then create a new data set, or you can update the data set to overwrite the saved data with the new data.

Create a data set

  • Click the Capture Data Set button  in the Variables panel. Alternatively, choose Capture Data Set from the Variables panel menu.

Switch between data sets

  • Select a data set from the Data Set list in the Variables panel. Alternatively, click the Previous Data Set button  or the Next Data Set button .

Apply the data on the artboard to the current data set

  • Choose Update Data Set from the Variables panel menu.

Rename a data set

  • Edit the text directly in the Data Set text box. Alternatively, double-click the words Data Set: (to the left of the Data Set text box), enter a new name, and click OK.

Delete a data set

  • Choose Delete Data Set from the Variables panel menu.

About variable libraries

In a collaborative environment, coordination between team members is essential to the success of a project. For example, in a company that creates websites, the web designer is responsible for the look and feel of the site, while the web developer is responsible for the underlying code and scripting. If the designer changes the layout of the web page, those changes must be communicated to the developer. Likewise, if the developer needs to add functionality to the web page, the design may need to be updated.

Variable libraries enable designers and developers to coordinate their work through an XML file. For example, a designer can create a template for business cards in Illustrator and export variable data as an XML file. The developer can then use the XML file to link variables and data sets to a database and write a script to render the final artwork. This workflow can also be reversed, where the developer codes the variable and data set names in an XML file, and the designer imports the variable libraries into an Illustrator document.

To import variables into Illustrator from an XML file, choose Load Variable Library from the Variables panel menu.

To export variables from Illustrator to an XML file, choose Save Variable Library from the Variables panel menu.

Save a template for data-driven graphics

When you define variables in an Illustrator document, you are creating a template for data-driven graphics. You can save the template in SVG format for use with other Adobe products, such as Adobe® Graphics Server. For example, a developer working with Adobe Graphics Server can bind the variables in the SVG file directly to a database or another data source.

  1. Choose File > Save As, enter a filename, select SVG as the file format, and click Save.

  2. Click More Options, and select Include Adobe Graphics Server Data. This option includes all information needed for variable substitution in the SVG file.

  3. Click OK.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy