# Material Tokens
Material Design now supports the [Design System Package (DSP)](https://github.com/AdobeXD/design-system-package-dsp) for importing and exporting [Material Design Tokens](http://m3.material.io/foundations/design-tokens/overview) within the [Material Theme Builder](http://material.io/material-theme-builder). DSP can be used in designer and developer workflow tools and Material Component libraries. Let’s dive into how you can use Material Tokens (DSP) within the [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Adobe.xd) to generate code.
## Getting Started
Make sure you have the latest version of VSCode installed on your machine. VSCode is free to download and is open source.
[Download VSCode](https://code.visualstudio.com/)
After VSCode is installed, navigate to the marketplace on the extensions tab and search for Adobe.
![alt_text](/assets/image9.png)
[Download Adobe XD VSCode extension](https://marketplace.visualstudio.com/items?itemName=Adobe.xd)
Click on install and you may have to reopen or reload VSCode. After the extension is successfully installed, you can open Adobe XD by searching for Adobe in the command palette or clicking the “XD” icon in the bottom right.
![alt_text](/assets/image13.png)
After the plugin opens it should look like the following screenshot.
![alt_text](/assets/image2.png)
## Opening a DSP
Download a customized DSP from the [Material Theme Builder](http://material.io/material-theme-builder) or default Material Theme values from [this repo](https://goo.gle/material-tokens) and save it to your computer.
Open up the folder in VSCode by either dragging it onto the open window or selecting “Open Folder”.
![alt_text](/assets/image7.png)
Open the Adobe XD plugin and select “Edit Package” on the bottom left, then select “Select Folder”. There should be a notification on the bottom left that should say “Existing package found…” and click on “Open”.
![alt_text](/assets/image5.png)
## Exploring the DSP
With the DSP opened in the plugin you should see the following screenshot.
![alt_text](/assets/image10.png)
The Material Tokens (DSP) is made up of a few sections (Light, Dark, Default, Palette, Typography).
## Generating Code
After inspecting the DSP you can generate code in the form of tokens to be used in your application.
Select “Start Editing” and then “Finish Editing” to trigger code generation. If it is the first time you are doing it there will be a notification to install Style Dictionary.
![alt_text](/assets/image1.png)
Select “Install” then you will see another notification asking to export tokens.
![alt_text](/assets/image8.png)
Select “Export tokens” then you will see a notification asking you to open the folder.
![alt_text](/assets/image3.png)
Opening the folder you will see the following sub directories.
![alt_text](/assets/image11.png)
This directory is located in the current directory under a newly generated folder “dist”.
![alt_text](/assets/image4.png)
Opening up the “variables.css” for example you will see the following flat list of tokens used to theme your application.
![alt_text](/assets/image6.png)
The “android/colors.xml” should look similar.
![alt_text](/assets/image12.png)
Using the Material Tokens (DSP) will ensure your styles are shared throughout your designer and developer workflow. Learn more about [Material Design Tokens](http://m3.material.io/foundations/design-tokens/overview).
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
材料_设计_DSP_材料_Material_Design_DSP_material-tokens.zip (47个子文件)
material-tokens-main
.nojekyll 1B
tokens.md 10KB
assets
image2.png 227KB
image8.png 82KB
image11.png 66KB
image12.png 449KB
image9.png 93KB
image1.png 48KB
image3.png 57KB
image7.png 126KB
image5.png 35KB
image10.png 370KB
image4.png 102KB
image13.png 29KB
image6.png 314KB
LICENSE 11KB
CONTRIBUTING.md 1KB
css
elevation.css 2KB
theme
dark.css 3KB
light.css 3KB
colors.css 4KB
typography.css 24KB
state.css 1KB
palette.css 5KB
baseline.css 911B
motion.css 6KB
shape.css 5KB
.gitignore 56B
dsp
data
components.json 121B
docs.json 121B
fonts.json 20KB
tokens.json 71KB
dist
styledictionary
ios-swift
StyleDictionary.swift 22KB
js
tokens.js 13KB
android
font_dimens.xml 145B
colors.xml 14KB
css
variables.css 12KB
package-lock.json 13KB
scss
variables.scss 11KB
flutter
style_dictionary.dart 15KB
config.js 12KB
properties
sizes.json 16B
custom.json 515B
fonts.json 3KB
colors.json 19KB
dsp.json 5KB
README.md 3KB
共 47 条
- 1
资源评论
好家伙VCC
- 粉丝: 2170
- 资源: 9145
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功