parsers VS design-tokens

Compare parsers vs design-tokens and see what are their differences.

parsers

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically. (by Specifyapp)

design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format. (by lukasoppermann)
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
parsers design-tokens
10 -
111 901
9.0% -
6.8 7.6
4 months ago about 1 month ago
TypeScript TypeScript
GNU General Public License v3.0 or later MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

parsers

Posts with mentions or reviews of parsers. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-05-17.
  • Show HN: Specify 2.0 – Your design token engine
    1 project | news.ycombinator.com | 25 Jan 2024
  • How do you make the devs life easier ?
    1 project | /r/UXDesign | 7 Jul 2023
    Specify if also a good all-in-one tool I just found yesterday https://specifyapp.com/
  • How can one create this type of animation? Especially with react js
    2 projects | /r/webdev | 17 May 2023
  • kickstartDS is Open Source now. Let’s start to democratize Design Systems today
    2 projects | dev.to | 15 Nov 2022
    Today quite some companies are already tackling similar problems. Talking of Knapsack.cloud, Backlight.dev, Specify, Supernova and many more, here. They all deliver value to simplify workflows for setup, integration, documentation and management of Design Systems. This is all super helpful in spreading the love about Design Systems to teams out there, and is a huge benefit to the process side of things. But you usually still need to create or import all of your components, which means that you still have some hard work before to you yourself, before finally benefitting from these tools. There’s also a lot (knowledge and work) going into the setup of a Design System (semantic tokens, hardened components, etc) that’s not solved by those tools, yet.
  • Specify VS Style Dictionary
    2 projects | dev.to | 25 Oct 2022
    By default Specify returns design data in JSON but thanks its open source parsers you can transform your design data in any formats. I repeat, in any formats.
  • El nuevo paradigma: de código a diseño
    1 project | dev.to | 29 Sep 2022
    https://story.to.design/ https://specifyapp.com/
  • Experimenting with Shape Up
    2 projects | dev.to | 15 Sep 2022
    At Specify, We started experimenting with the Shape Up methodology a few weeks ago to define focused projects, address unknowns, and increase collaboration and engagement within the team. So, I started to learn more about how other teams implemented it, too.
  • Specify
    1 project | news.ycombinator.com | 22 Apr 2022
  • Translating Figma designs to Tailwind
    1 project | /r/tailwindcss | 24 Mar 2022
    here's a list of their parsers: https://github.com/Specifyapp/parsers/tree/master/parsers
  • From Figma to React Native using Specify
    4 projects | dev.to | 11 Mar 2022
    For each rule we can use a different filter, such that the rule only applies to certain types of design tokens. Next to filters, we can also use parsers, which will manipulate the raw design tokens (which are in JSON format) and output a format that suits the programming language and platform more. Parsers behave like a pipeline, where each parser receives the input of the previous one. There are a lot of parsers to choose from, some perform very low level transformations such as round-number and camelcasify, but also full-blown parsers to a single technology such as to-tailwind and to-react-native.

design-tokens

Posts with mentions or reviews of design-tokens. We have used some of these posts to build our list of alternatives and similar projects.

We haven't tracked posts mentioning design-tokens yet.
Tracking mentions began in Dec 2020.

What are some alternatives?

When comparing parsers and design-tokens you can also consider the following projects:

design-tokens - Design token generator written in Deno + TS

storybook-design-token - Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.

style-dictionary - A build system for creating cross-platform styles.

theme-ui - Build consistent, themeable React apps based on constraint-based design principles

html-figma - Builder.io for Figma: AI generation, export to code, import from web

motion-canvas - Visualize Your Ideas With Code

fd-design-system - FD Design System

megaparsec - Industrial-strength monadic parser combinator library

create-figma-plugin - :battery: The comprehensive toolkit for developing plugins and widgets for Figma and FigJam

parsec-free

stylo - A new Design-as-code language side project.