Workshop: How to build a Design System with Design Tokens in Figma – Jan Six – Into Design Systems

How to build a Design System with Design Tokens in Figma Information

Learn how to create and apply Design Tokens in Figma. With Figma Tokens you will be able to easily customize and maintain your Design System and create Themes (e.g Light & Dark Themes) within minutes.

Live hands-on workshop 🎬 recording designing token-based design systems in Figma utilizing the plugin “Figma Tokens” – Newly updated content

⏱ Duration: 180 minutes

🙋🏽‍♂️ Workshop facilitator: Jan Six, Creator of Figma Tokens Plugin & Sr. Product Designer at GitHub

In this workshop, you will create tokens for choices that drive your design system’s foundations and components. By using the plugin we’ll be able to store the tokens on a single source of truth, enabling designers and developers to both access the same design tokens.

Here’s what you’ll get:

What’s new in Figma Tokens:

• Easier to use references
• Create shadow tokens with multiple levels
• Reference shadow & type tokens
• Deep references for shadow & type tokens
• Annotating tokens can be semi-automated
• A new and improves inspect mode
• More sync options: GitHub, GitLab, URL sync (read only)

How to create Design Tokens in Figma:

• Color Tokens
• Spacing Tokens
• Radius Tokens
• References
• Math
• Typography Tokens
• Shadow Tokens

Token-sets and Theming

• What are Design Tokens?
• Naming Conventions
• Light Theme & Dark Theme
• Simple Tokens Sets
• Complex Token Sets
• Sets vs. Themes in Figma Tokens

How to create token sets & themes

• How to do cross-file theming
• Getting tokens across files
• Enable GitHub & use tokens

Component tokens & collaboration

• Component Tokens
• Create & apply component tokens
• Communicating applied design tokens
• Handoff
• Getting tokens to developers
• Exporting Tokens
• Transforming Design Tokens
• Style Dictionary

Best Practices

• Convert your existing design system
• Use the Multi Inspector
• Create fluid scales
• Create theme independent shadows
• Use branching
• Approval / Review
• How to document
• Encourage contributions

Q&A with Jan

More courses from the same author: Into Design Systems

Salepage: Workshop: How to build a Design System with Design Tokens in Figma – Jan Six – Into Design Systems

When will I receive my course?

You will receive a link to download your course immediately or within 1 to 21 days. It depends on the product you buy, so please read the short description of the product carefully before making a purchase.

How is my course delivered?

We share courses through Google Drive, so once your order is complete, you'll receive an invitation to view the course in your email.

To avoid any delay in delivery, please provide a Google mail and enter your email address correctly in the Checkout Page.

In case you submit a wrong email address, please contact us to resend the course to the correct email.

How do I check status of my order?

Please log in to iDesignCourse account then go to Order Page. You will find all your orders includes number, date, status and total price.

If the status is Processing: Your course is being uploaded. Please be patient and wait for us to complete your order. If your order has multiple courses and one of them has not been updated with the download link, the status of the order is also Processing.

If the status is Completed: Your course is ready for immediate download. Click "VIEW" to view details and download the course.

Where can I find my course?

Once your order is complete, a link to download the course will automatically be sent to your email.

You can also get the download link by logging into your iDesignCourse account then going to Downloads Page.