High precision styling and consistency with just a few keystrokes. Style Mate provides access to all style properties available in Adobe XD and allows you to save and apply commonly used properties.
Apply colors, typography, dimensions and more to your text layers, shapes, artboards and repeat grids through a fast, simple & powerful keyboard-based interface.
Since most design and layout happens directly on the canvas, in order to apply or change styles you don’t need to reach for the inspector panels on the side and then travel back with your mouse to where you’ve left off.
Do you find yourself using some colors or shadows over and over again? Create design tokens for those from within Adobe XD and share them between projects or with others.
Style Mate also lets you create and manage collections of tokens so you can easily switch between them.
You can use Style Mate to freely enter values for each property, even when you don’t have tokens for it. Just enter numbers, hex codes, text and hit enter. See the reference below for more information on accepted value types.
| Property | Shortcut | Description | Examples |
|---|---|---|---|
| Color | co | Sets the text / fill color given a hex color, RGBA or CSS color name. | #ffcc00 red rgba(0, 0, 0, 0.8) |
| Size | si | Sets the width and height. A single number will make it square. | 200 360 600 |
| Width | wi | Sets the width of the layer in pixels. | 360 |
| Height | he | Sets the height of the layer in pixels. | 600 |
| Opacity | op | Sets the opacity given a number from 0..1 | 0.5 |
| Rotation | ro | Sets the rotation in degrees. | 0 45 90 |
| Border Radius | br | Sets the border radius for all or individual corners. | 4 0 4 0 4 |
| Shadow | br | Sets the shadow given x, y, blur, color values. | 0 2 3 rgba(0, 0, 0, 0.2) |
| Stroke Color | sc | Sets the stroke color. | #000 rgba(0, 0, 0, 1) black |
| Stroke Width | sw | Sets the stroke width. | 1 8 |
| Stroke Dash Array | sda | Sets the stroke dash array given dash and gap values. | 2 4 1 4 1 8 |
| Font Family | ff | Sets the font family name as it is displayed in the font menu. | Helvetica Neue |
| Font Size | fs | Sets the font size in pixels. | 16 24 |
| Font Style | fst | Sets the font style or font weight. | Normal Italic Bold Bold Italic |
| Line Spacing | ls | Sets the line spacing in multiples of the font size. | 1.0 1.5 |
| Character Spacing | cs | Sets the chracter spacing. | 20 100 |
| Text Align | ta | Sets the text alignment. | left center right |
| Underline | ul | Sets the text underline. | On Off |
Sets the text / fill color given a hex color, RGBA or CSS color name.
Sets the width and height. A single number will make it square.
Sets the width of the layer in pixels.
Sets the height of the layer in pixels.
Sets the opacity given a number from 0..1
Sets the rotation in degrees.
Sets the border radius for all or individual corners.
Sets the shadow given x, y, blur, color values.
Sets the stroke color.
Sets the stroke width.
Sets the stroke dash array given dash and gap values.
Sets the font family name as it is displayed in the font menu.
Sets the font size in pixels.
Sets the font style or font weight.
Sets the line spacing in multiples of the font size.
Sets the chracter spacing.
Sets the text alignment.
Sets the text underline.
Design tokens are small bits of reusable style information that have a name. Naming those properties allows designers, developers and other team members to collaborate and move faster. It’s easier to say a color’s name than to pronounce its hex value. A “heavy shadow” is more clear than “0px 10px 30px rgba(0, 0, 0, 0.4)”.
The term has been popularized by Jina Anne who presented it along side the Salesforce Lightning Design System. Developers may have implemented the concept using CSS variables, constants or property lists.
But even for solo designers, tokens can help to work faster and more consistent. You may create a collection of tokens and even re-use them between projects.
Design Tokens are saved in your plugin settings folder.
The extension comes with two commands: One to apply styles & tokens and another command for managing collection of tokens. You can create new collections and bulk add properties.
In the near future, you will be able to export Design Tokens to various formats including JSON, YML and CSS variables. Using tools like Ratio you will be able to manage and generate Design Tokens including color scales, modular scales and more.
There seems to be a limitation that prevents programmatic style range updates to be reflected throughout all repeated elements.
Programmatically changing the text alignment causes text to be moved.
A token might be outside the visible scroll area. This is a known issue and will be fixed soon.