FeaturesPricingSupportLearn
Use Figma Plugin

Hooks for
Design Tokens

Streamline your design system workflow with multi-branded and contextual
design tokens in Figma or in code.
Get started
Learn more

Use Design Tokens in Figma

A powerful plugin for managing your design tokens in a more organized and consistent way. With its easy-to-use interface and powerful features, it allows you to create, organize, and customize your design tokens with ease.
Use Figma Plugin
Multi-branded & Contextual
Customize your tokens for multiple brands and different contexts such as color or contrast modes, density, localizaion or so.
Token tiers
You can create token tiers such as Globals, Semantics and Components. It allows you to split your design tokens into different levels of hierarchy.
Aliases with transforms
Create alias tokens that reference tokens in other tiers and modify their values with transforms.
Composite tokens
Create custom token types by grouping together other tokens and custom data fields such as color, text or number.
Page and frame contexts
Apply different contexts for each page or each frame in a page, allowing for greater flexibility and customization
Import and export
useDesignTokens supports the DTCG specification and allows you import and export your tokens in JSON format.
Advanced Layer Inspection
Manage styles of all selected layers for all token types.
Team collaboration
Collaborative environment for teams to work on the same design tokens system

Use Design Tokens in Code

Leverage the power of useDesignTokens to access design tokens in code with Hooks, GraphQL API, and export to Git Repositories
Hooks for consuming design tokens in real-time
*
import { useColors } from '@applin/useDesignTokens';
2


3
function Demo() {
4
    const colors = useColors();
5


6
    return (
7
        <>
8
            {
9
                colors.map(({id, name, value}) => {
10
                    return (
11
                        <ColorTokenWidget 
12
                            key={id} 
13
                            name={name}
14
                            color={value}
15
                        />
16
                    )
17
                })
18
            }
19
        </>
20
    )
21
}
GraphQL API
query {
    colors {
        name, 
        hex
    }
}
Github &
GitLab Repositories
{
    "brand": {
        "charcoal": {
            "$type": "color",
            "$value": "#212529"
        },
        "gold": {
            "$type": "color",
            "$value": "#f59f00"
        },
        "new-blue": {
            "$type": "color",
            "$value": "#3378f0"
        }
    }
}

Pricing

Free

Get started with all features, but you can have only one design system project
If you loved what we built, please help us to spread the word!
Share your opinions with the world
Paid Plans
PRO
$
??
Editor / month
Ideal for small teams
  • Everything in Free
  • Unlimited projects
  • Team of up to 5
Subscribe
ENTERPRISE
$
??
Editor / month
For larger organizations that want to embed DSM modules into their own products.
  • Everything in Pro
  • Unlimited editors
Subscribe

Leave your comment

Your thoughts are appreciated. Let us and others know what you think.

Join to our Slack Group

Your thoughts are appreciated. Let's shape the future of our tools together!
Let's Join

Frequently Asked Questions