• Stars
    star
    234
  • Rank 171,630 (Top 4 %)
  • Language
    CSS
  • License
    Apache License 2.0
  • Created about 3 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material Design DSP

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.

More Repositories

1

material-color-utilities

Color libraries for Material You
Swift
1,637
star
2

material-remixer

A set of cross-platform libraries and protocols to allow the sharing of design values and live refinement of apps during the development process.
1,249
star
3

flutter-packages

A collection of useful Material Design packages
Dart
827
star
4

material-remixer-android

Remixer for Android. Live adjustment of app variables.
Java
776
star
5

material-theme-builder

Visualize dynamic color and create a custom Material Theme.
409
star
6

material-components-flutter-adaptive

Now lives at https://github.com/material-foundation/flutter-packages/tree/main/packages
Dart
162
star
7

material-remixer-ios

Remixer for iOS: Live adjustment of app variables.
Objective-C
102
star
8

material-remixer-js

Remixer for JavaScript. Live adjustment of app variables.
TypeScript
97
star
9

pesto_flutter

Learn how to build the basil material study in Flutter with advanced theming techniques that support multiple device contexts. This file is a companion to the live workshop at Flutter Forward 2022
Dart
72
star
10

material-dynamic-color-flutter

Now lives at https://github.com/material-foundation/flutter-packages/tree/main/packages/dynamic_color
JavaScript
59
star
11

material-text-accessibility-ios

MDFTextAccessibility assists in selecting text colors that meet the W3C standards for accessibility.
Objective-C
58
star
12

material-internationalization-ios

MDFInternationalization assists in internationalizing your IOS app or components.
Objective-C
41
star
13

material-remixer-remote-web

A hosted remote controller for a Remixer target app.
TypeScript
26
star
14

material-sprited-animation-view-ios

UIView subclass that uses a spritesheet to animate between two image states
Objective-C
25
star
15

material-roboto-font-loader-ios

Objective-C
23
star
16

material-scrollview-delegate-multiplexer-ios

MDFScrollViewDelegateMultiplexer acts as a proxy object for UIScrollViewDelegate events and forwards all received events to an ordered list of registered observers.
Objective-C
21
star
17

material-font-disk-loader-ios

Objective-C
20
star
18

cocoapods-catalog-by-convention

Build a Catalog application using conventions and CocoaPods
Objective-C
19
star
19

material-automation

A Swift backend connected to our Github App for automation
Swift
15
star
20

github-squash-and-merge-pr-descriptions

A Chrome extension that populates GitHub squash-and-merge commit messages with the PR description.
JavaScript
13
star
21

material-symbols-and-variable-fonts

Learning Material Symbols and Variable Fonts
TypeScript
11
star
22

bazel-apple-framework-relative-headers

Bazel support for framework header imports
Python
9
star
23

arc-tslint

tslint linter for phabricator's arc command line tool
PHP
8
star
24

clang-format-ci

Run clang-format from your CI to automatically suggest style changes in PRs as in-line comments.
Shell
8
star
25

github-comment

A command line tool for posting pull request comments to GitHub
Swift
7
star
26

material-arc-tools

arcanist linters, unit tests, and hooks.
6
star
27

arc-hook-github-issues

An arc-hook for updating GitHub issues after running arc diff.
PHP
5
star
28

bazel_ios_warnings

Warnings we use for bazel iOS targets.
Python
5
star
29

SettingsKit

Easily generate a settings screen using a modular MVVM architecture.
Objective-C
5
star
30

clang-format

Pre-build clang-format binaries
Shell
4
star
31

bazel-workspace-apple

The Material Foundation's common Bazel workspaces dependencies for Apple targets
Python
4
star
32

bazel-test-host-apple

A generic Bazel test host for Apple targets.
Python
4
star
33

kokoro-ios-runner

A build and test runner for kokoro iOS.
Shell
4
star
34

arc-hook-conphig

Hookable configuration for phabricator's arc command line tool
PHP
4
star
35

arc-tsclint

PHP
3
star
36

material-testing-ios

This repository extends XCTest framework with testing helper additions.
Python
3
star
37

swatchie

1
star
38

graphite-oss-daemon

node.js graphite daemon for open source analytics.
JavaScript
1
star
39

compute-oss-dashboard

Google Compute Engine cluster configuration scripts for our open source analytics dashboard
Shell
1
star