• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

material-foundation/material-tokens: Material Design DSP

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

material-foundation/material-tokens

开源软件地址(OpenSource Url):

https://github.com/material-foundation/material-tokens

开源编程语言(OpenSource Language):

CSS 100.0%

开源软件介绍(OpenSource Introduction):

Material Tokens

Material Design now supports the Design System Package (DSP) for importing and exporting Material Design Tokens within the 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 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

After VSCode is installed, navigate to the marketplace on the extensions tab and search for Adobe.

alt_text

Download Adobe XD VSCode extension

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

After the plugin opens it should look like the following screenshot.

alt_text

Opening a DSP

Download a customized DSP from the Material Theme Builder or default Material Theme values from this repo 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

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

Exploring the DSP

With the DSP opened in the plugin you should see the following screenshot.

alt_text

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

Select “Install” then you will see another notification asking to export tokens.

alt_text

Select “Export tokens” then you will see a notification asking you to open the folder.

alt_text

Opening the folder you will see the following sub directories.

alt_text

This directory is located in the current directory under a newly generated folder “dist”.

alt_text

Opening up the “variables.css” for example you will see the following flat list of tokens used to theme your application.

alt_text

The “android/colors.xml” should look similar.

alt_text

Using the Material Tokens (DSP) will ensure your styles are shared throughout your designer and developer workflow. Learn more about Material Design Tokens.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap