Over the past couple of months I have been starting to mockup a decent number of user interface designs for other developers on my team at Kindred. Once a design is semi-finalized, the developers typically start the coding process by building out assets (page components, CSS, etc.) that they then use to structure the website or application.
One interface could potentially have dozens of design assets that need to be dimensioned such as image placeholders, buttons, navigation bars, object spacing, etc. After doing several of these mockups and being constantly asked for object measurements that are tedious to draw out one at a time, I decided to automate the process by writing an Adobe Illustrator script to handle the dimensioning process for me.
To allow the script to show as an option within Illustrator’s default
File > Scripts menu, save the script in the following location (your actual path may vary):
Applications/Adobe Illustrator [YOUR_VERSION]/Presets/en_US/Scripts
C:\Program Files\Adobe\Adobe Illustrator [YOUR_VERSION]\Presets\en_US\Scripts
Alternatively, you may save the script in a folder of your choosing.
- You must have an open document in Adobe Illustrator CS5 (or newer)
- You must have at least 1 object selected in Illustrator via the Selection Tool (V) or Direct Selection Tool (A)
If you saved the script as described above, you should be able to run the script (after selecting object(s) in the document) by navigating within Illustrator to
File > Scripts > Specify
If you chose an alternate location to save the script, you may run by following the path
File > Scripts > Other Script... and then select the script file once you navigate to your designated folder.
After choosing to run the script, you will be presented with a dialog that allows you to choose which dimension(s) to specify. The dialog also allows you to edit the default options. Any changes to the options panel will persist until you close the application (even if you run the script in another document).
Dimension single or multiple objects
Select a single object (or group) or multiple objects on your artboard and run the script within Adobe Illustrator.
With a single object or multiple objects selected, the script will display a dialog box allowing you to choose which sides to dimension for all objects simultaneously, as well as customizable options. Click ‘Specify Object(s)’ and the script will output the selected dimensions to the SPEC layer (which is automatically created if needed).
Dimension between two objects
Select two objects and run the script within Adobe Illustrator.
With two objects selected, the script will display a new option within the dialog box, Dimension between objects. When checked, this option will specify the selected dimension(s) between the two chosen objects.
The script automatically dimensions Adobe Illustrator objects based on the document’s default units. To dimension in different units (i.e. inches, centimeters, etc.) follow the instructions below:
- In your document, display the Rulers by selecting
View > Rulers > Show Rulers( ⌘Cmd + R on Mac, Ctrl + R on PC )
- Right-click on the Ruler and select your desired units. Otherwise, the script will use the document’s selected units by default.
- Run the script and your selected documents units will be used and labeled on the “SPECS” layer.
The units label is optional. A checkbox is included in the Specify dialog box that allows the user to turn the units label on or off.
The script is available on GitHub. Have suggestions? Feel free to open an issue or submit a pull request!