If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.
Work with design tokens
- Adobe XD User Guide
- What's new in Adobe XD
- Common questions
- Design, prototype, and share with Adobe XD
- System requirements
- Workspace basics
- Change app language in Adobe XD
- Access UI design kits
- Accessibility in Adobe XD
- Keyboard shortcuts
- Tips and tricks
- Adobe XD subscription options
- Changes to XD Starter Plan
- Artboards, guides, and layers
- Shapes, objects, and path
- Text and fonts
- Components and states
- Masking and effects
- Videos and Lottie animations
- Create interactive prototypes
- Animate prototypes
- Object properties supported for auto-animate
- Create prototypes with keyboard and gamepad
- Create prototypes using voice commands and playback
- Create timed transitions
- Add overlays
- Design voice prototypes
- Create anchor links
- Create hyperlinks
- Preview designs and prototypes
- Share, export, and review
- Share selected artboards
- Share designs and prototypes
- Set access permissions for links
- Work with prototypes
- Review prototypes
- Work with design specs
- Share design specs
- Inspect design specs
- Navigate design specs
- Review and comment design specs
- Export design assets
- Export and download assets from design specs
- Group sharing for enterprise
- Design systems
- Cloud documents
- Integrations and plugins
- Work with external assets
- Work with design assets from Photoshop
- Copy and paste assets from Photoshop
- Import or open Photoshop designs
- Work with Illustrator assets in Adobe XD
- Open or import Illustrator designs
- Copy vectors from Illustrator to XD
- Plugins for Adobe XD
- Create and manage plugins
- Jira integration for XD
- Slack plugin for XD
- Zoom plug-in for XD
- Publish design from XD to Behance
- XD for iOS and Android
- Known and fixed issues
- Installation and updates
- Launch and crash
- Cloud documents and Creative Cloud Libraries
- Prototype, publish, and review
- Import, export, and working with other apps
Learn how to use design tokens to assign custom names to colors and character styles.
You can add design tokens in Adobe XD to provide customized common names to colors and character styles that are present in the Assets panel.
With design tokens, you don't need to remember long and complex hexadecimal codes and CSS snippets for your assets. You can add simpler names that are easy to recognize.
After you publish your design spec and share it with other stakeholders, the customized names are visible to them.
If you do not assign custom variables, Adobe XD automatically creates a unique name and class using the color and character style properties and unnamed prefixes.
Before you proceed
- You are familiar with Design Specs and Design Systems.
- You share the common naming conventions for colors and character styles with your developers.
Create design tokens
You can create design tokens for a new artboard or for an existing artboard where you already added colors and character styles.
Adobe XD currently does not support renaming of font name, size, or other such properties.
Share design tokens
After you create the design tokens, you can share them with the developers through the design specs.
View design tokens
Download design tokens
To learn more about design tokens, watch this video.
Viewing time: 4 minutes
We've got you started with creating and sharing your design tokens with your stakeholders. Take a step forward and learn how to inspect design specs.
Have a question or an idea?