We recently released our own Figma Widget to help you synchronize your design tokens directly from Figma.

This new update allows you to be directly redirected to the frame you need to edit so you don't have to search for it. ⚡

👉 Try the widget here

Manual Notion synchronization

You can now manually synchronize your Notion destinations. Just go to your Destinations page and click the three-dot button beside your destination.

Bug fixes & improvements

• Previously, the name of your Figma frames was not in sync. This issue has now been resolved.

• Fixed a bug where Figma synchronization would break if a line break was present in the frame name or token name.

Have you ever wanted to see in your Figma files which design tokens and assets are synced to Specify?

We are happy to announce our first Figma Widget ✨

As a designer, this Specify Widget helps you:

1. Sync design tokens and assets from Figma to Specify

2. See all design tokens and assets in your Figma file that are synced to Specify

We are eager to know what you think about it and what features you might want in this Figma Widget, so go on and try it out now!

👉 Try the widget here

New parser: Inline CSS Variable in SVG

The new parser named inline-css-variables-in-svg helps you replace hardcoded CSS color values in your SVG string by their corresponding CSS variable. You can now automatically seamlessly tokenize your SVG files.

New parser: Prefix By

We’ve had a suffix-by parser for a long time but no prefix-by one. This is now fixed with this new parser that helps you prefix your design tokens and assets properties.

Common use cases:

• Prefix your design token name (e.g., primary-color → ds-primary-color)

• Prefix a whole file by a comment

  
  

Bug fixes & improvements

• Colors description are now visible in Raycast

• Improve assets performance when synchronizing from Figma

• Fix an issue that prevented synchronization with GitHub when a repository was updated

You can finally document your text styles and fonts in Notion!

See all your text style properties at a glance, get automated text styles and font previews, and download font files in your desired format (eot, otf, ttf, woff, woff2).

Don’t know where to start to document your design system in Notion? Check our dedicated Notion Template.

By the way, we’re still looking for beta testers! 👉 Join the beta program

Sample dataset in repositories

Ever wanted to try Specify destinations but didn’t have a source with Figma yet? It’s now possible with our pre-filled dataset when you create a repository in Specify.

Descriptions in design tokens

Get the descriptions you wrote on your design tokens in Figma and see them in your repository or in your Notion table. You can write descriptions in Figma in your local styles or your vector and bitmap components.

Bug fixes & improvements

• You can now manage your CLI, REST API, or Raycast destination pipelines directly into the Specify interface. There are also some improvements that were made to the display of GitHub destination pipelines.

• Fixed a bug in Notion where design tokens values were not updated correctly.

• Fixed a bug where GitHub wasn’t syncing properly.

The next design token type for Notion is here 👏

You can now document your measurements in Notion. And you can always use this Notion Template if you don’t know where to start.

Want to join the journey? We’re still looking for beta testers!
👉 Join the Beta Program

Bug fixes & improvements

• Improved the Destinations page to better view and manage connections and introduced the concept of Pipelines.

• Added the option to delete Destination Pipelines.

• GitHub connection: fixed a bug where there would be an infinite loading when connecting to GitHub without having the right access to do so.

• CLI: Fixed a bug when having hundreds of assets pulled in the CLI would stop the pull and throw an error. Update the CLI to the beta version to prevent this bug

You can now automatically distribute your vectors and bitmaps from Figma to your Notion.

This is just the second step in our journey — We’re working on adding more design token types. Thank you to our awesome community that provides feedback, keep them going!

Want to join the journey? We’re still looking for beta testers!

👉 Join the Beta Program

Start with this Notion Template

Looking for inspiration? Duplicate this template to your Notion workspace and connect it to Specify. With this template, your documentation gets automatically filled with your design tokens and assets from Figma.

Bug fixes & Improvements

• Notion: Fixed the display of database names we don’t have access to in the destination details.

• Notion: Fixed missing thumbnails of colors in the Notion Database.

• Notion: Fixed unwanted behavior where existing design tokens in a Notion Database could be deleted in rare cases.

• Improved some redirection URLs to access the workspace settings.

• Fixed in-app content.

• Fixed missing images in the Getting Started part.

• Fixed some z-index bugs in the Apps Catalog and Repositories.

Notion is one of your most requested apps so we naturally started experimenting with Notion as a Destination. We really want to ensure we do it right, so we're launching a beta program to build this integration with you all.

Starting today, you can distribute your colors from Figma to your Notion pages. We’re working on adding more design token types in the near future.

Want to join us on this journey by sharing early feedback?

👉 Join the Beta Program

Bug fixes & Improvements

• API Documentation Update: we’ve added a new section in the documentation listing all types of design tokens and assets Specify is compatible with.

• CLI v 1.1.1: UI updates, better error handling, and bug fixes.

We just added a new destination for your design tokens and assets: Raycast. The famous macOS launcher now has its official Specify extension that will allow you to access your repositories and consume your design decisions at your fingertips.

For now, three commands are available:

• Search Colors

• Search Bitmaps

• Search Vectors

We have many more ideas in mind for this extension, don't hesitate to have a look at them!

Bug fixes & Improvements

• Added a logout link when signing up.

• Improved the confusing limitation indication when inviting a teammate.

• Fixed a bug where we couldn’t add another GitHub app from the destination page.

• Fixed the frame selection bug when adding assets as a source.

• Fixed some copy and UI details in the web app.

If you haven't heard yet, we released new Configuration Templates last week to help you configure your Destinations more easily. You can learn more about it in our last article.

They are now available in the app 🎉

When you create a new GitHub Destination, you'll be able to select a default configuration file or one of our popular templates like Tailwind. It will directly be pushed in GitHub and ready to use.

👉 See all available Configuration Templates

Don’t see a template you’re looking for? Feel free to request a Configuration Template. We’re eager to have your feedback!

New CLI command: init

We all dreamt about this one. The CLI init command is here 🙌

With this simple initialization command, you’ll be able to create ready-to-use configuration files from one of our templates. Select your desired Configuration Templates, add your personalAccessToken and your Specify repository, and you’re done!

Bug fixes & Improvements

• Parser to Flutter in alpha: we’ve recently been working on a first version of our to-flutter parser. We’d love your feedback on it!

• Fixed some bugs in our Configuration Templates

We just published new Configuration Templates to help you get the most out of your design tokens with Specify.

Configuration Templates are ready-to-use examples to help you distribute your design tokens and assets from Specify to your destinations (e.g. a GitHub repository). You can learn more about it in our last article.

Find configuration templates for:

• CSS Custom Properties

• Tailwind

• React

• React Native

• SCSS Variables

• Style Dictionary (Android)

• Style Dictionary (iOS)

👉 See all available templates

Don’t see a template you’re looking for? Feel free to request a template. We’re eager to have your feedback!

Add GitHub destination directly in Specify

From now on, you can connect your Specify and your GitHub repositories together right from Specify to get automated pull requests.

This is the first step to bringing you more Destinations and to helping you from the beginning on how to configure your Destinations.

Bug fixes & Improvements

• Multiple edition in the copy, info-boxes and keyboard accessibility across the app and the documentation.

We’re taking your experience with the CLI to the next level! ✨

Discover the fresh new design that makes it easy for you to read, and a whole lot of new errors detected when you test and set up your Specify configuration files. ⚔️

What's new?

• New infrastructure: we rebuilt the information architecture from the ground up. The Specify CLI now displays consistent status while pulling and syncing your design tokens.

• New design: The new CLI is full of delightful details. Our tree map helps you read your configuration files more easily.

• Improved error handling: our error management system makes it super simple to set up your configuration files.

If you want to read more about how we built the Specify CLI 👉 Read the article

New parser: To SCSS Variables

You’ve all been waiting for this one. We’re happy to give you the to-scss-variables parser that will allow you to export your design tokens in SCSS easily.

Connecting the same Figma account in different Specify workspaces

You might have encountered this if you have multiple workspaces in Specify. If you tried to connect a Figma account used in another Specify workspace, it would disconnect you from the first workspace as Figma allow only one app connection to Specify.

You can forget about this roadblock because we found a way to solve it! You can now use without restrictions the same Figma account for any workspace of Specify.

Bug fixes & Improvements

• Improved some content in our API documentation.

• Parser to-style-dictionary: fixed bug that prevents usage of multiple font formats.

• Fixed some bugs on our new guide navigation.

• Fixed our success and error toast messages when synchronizing tokens.

• Fixed a bug that created a glitch when synchronizing a whole repository.

• Updated some error message content when there was no app linked to a source anymore.

How to set up your design CI/CD workflow with Specify? What are Design API best practices?

We’re introducing Design Data Platforms 101, an in-depth guide full of insights, best practices, real-world examples, and resources to help you get the most out of your CI/CD pipeline you just built with Specify.

In his foreword, Matthew Ström, Product Design Manager at Stripe, described this guide as “the periodic table that helps you make sense of your design system.”

We put much love into writing it and hope you’ll find inspiration and help reading it 🙏

Following our public launch from 2 weeks ago, we've been receiving many feedback and feature request on our public board. So first of all, thank you all! The good news is that some of your feature requests have already been taken into account 💪

Among them are two improvements on our parsers:

• We've added a splitBy option to the to-tailwind parser. This option helps you structure your Tailwind theme with more precision.

• We've added a isTsx option to the svg-to-jsx parser. This option helps you generate .tsx icon components.

  
  

Bug fixes & improvements

• Fix font weight on some custom font files

• Fix bug on font service that prevents font conversion

Today, we're launching Specify 🎉

Starting now, anyone can sign up, invite team members and use Specify to collect, store and distribute design tokens at scale.

We've been working for this moment for more than a year, and we wouldn't have reached it without your help and early support. Thank you for being on this journey with us 🙏

We're live on Product Hunt 🚀

One more thing

We're excited to announce we've raised €4 million in seed round funding, led by Eurazeo.

Read the full announcement

Since a few months, you have been able to receive notifications about your sources. However, receiving an email everytime a source is added or has an issue can be frustrating. It's now time to say goodbye to unwanted notifications and to welcome your new notifcations settings: Settings > Notifications.

From now on, you can control which email you'll receive when a source:

• is added

• is deleted

• has an error

  
  

Bug fixes & improvements

• Fixed a bug where that prevented the redirection after a custom font was uploaded

• Fixed a bug on svg-to-jsx to prevent the gradientUnits and gradientTransform to be transformed in kebabcase.

In Figma, you can create icons as regular layers or as components with variants. This release will benefit teams using Figma components for their icons system.

From now on, Specify will name your icons after your variants name and their respective order in Figma. It means that if you rename your variants or reorder them, their name will also be updated in Specify.

A better naming convention leads to better alignment 💪

Parser update: To Tailwind

We've also improved our to-tailwind parser. This update helps you control the name of all your design tokens per type. Tailwind will use those renamed design tokens to generate your utility classes.

👉 See our updated configuration example

This improvement prevents you from getting potential collisions between utility classes generated by Tailwind.

Want to learn more about this improvement? Jump in the dedicated GitHub discussion.

Bug fixes & improvements

• You can now refresh design tokens and assets detected by Specify in your Figma files when creating or updating a source

• Added several links to help you create a personal access token in Specify's documentation

• Fixed a bug that prevented the creation of multiple sources for the same type of design token or asset

It's finally here! After many feedback from our community we've finally released a Style Dictionary parser. No more manual updates of your Style Dictionary configuration.

In case you're not familiar with it here's a quick introduction. Style Dictionary is a build system taking agnostic design tokens as input and transform them for all the platform you need: iOS, Android, CSS, JS, HTML, style documentation, or anything you can think of.

Like Specify, Style Dictionary helps you transform your styles. Using our to-style-dictionary parser will keep your Style Dictionary configuration in sync with your design decisions coming from Figma.

A better control of your sources

With Specify, you can connect many files from which your design decisions are synchronized. It's practical, but as we say "with great powers comes great responsability". This is why you need to be in control of your sources. Sometimes, the workflow you've setup can be impacted by new sources or broken ones.

From now on, you will be notified by email when:

• a new source is connected to one of your repositories

• there's an issue with one of your source coming from Figma

  
  

Bug fixes & improvements

• We've added a video tutorial in our documentation to help you write a configuration file.

• Fixed a bug on svgo that prevented the use of PDF files alongside SVG files

At last! We've finally released a new version of our landing page. The previous one was starting to feel a bit dusty as it was made specifically for the announcement of the DSP format in partnership with Adobe. And yes, this new landing is also community driven. Its release is consistent with our recent sponsorships of two famous conferences about design systems: Into Design Systems and Clarity.

Bug fixes & improvements

• After deleting a source from your Specify repository, a new PR removing all corresponding design tokens will open on your GitHub repository.

• Fixed a bug that prevented the redirection to the error page when a user tried to login with a wrong account

• Fixed a bug that prevented the user to invite other people

• Fixed a bug that prevented the display of the 404 page when the user wasn't connected

• Added font-weight CSS property to to-scss-mixin-text-style parser

• Fixed a bug where the text-decoration property was sent as an array and not as a string in the to-scss-mixin-text-style parser

• Added the following CSS properties to the to-scss-map parser: text-transform, text-align, vertical-align, text-decoration and text-indent

• Updated the svgo parser from svgo 1.x to svgo 2.7.0

React Native users, this parser is for you. The time of manual updates in your project is now over.

The to-react-native parser helps you synchronize your design tokens in a JavaScript theme object compatible with React Native. Huge thanks to Robrecht for creating this parser 🙏

New parser: Filter

The filter parser helps you filter out child properties of a design token.

For instance, you could use this parser to filter a color from your requested colors or a smaller decision like the alpha property inside the value of a color.

New parser: Omit

The omit parser helps you remove properties of a design token you don't want.

For instance, you could use this parser to remove the alpha property inside the value of a color.

Bug fixes & improvements

• Fixed bug when a GitHub repository was added with a .specifyrc.json file already present in the GitHub repository. This context would break the sync between the Specify and GitHub repositories.

• Sped up pages loading time within the app

• Fixed a bug where the user couldn't request for more design tokens categories

• Fixed a bug where the user couldn't add sources when he had disconnected app in his app list

• Fixed a bug where the error message wasn't displayed when you connect with an incorrect email or password

• Fixed a bug where the user couldn't load the onboarding page

• Fixed a bug where reference to a variant (text-style) coudn't make a reference to another variant (line-height, letter-spacing etc.)

• Add a filter option on pick parser

Following the revamp of the navigation inside repositories, we're introducing a new way to manage your sources.

Previously information about each source was spread all over repository categories. This is why we've been working on easing the management of all sources inside repositories.

Thanks to this new sources management you'll be able to:

• See potential errors on sources in a glimpse

• See all sources used in a repository

• Know which design tokens and assets are linked to which sources

  
  

Bug fixes & improvements

• Fixed a bug where you were not redirected to 404 page even on non accessible repositories

• Fixed bug that spammed a synced GitHub repository when several files had the same name or when you synced a JSON file

When we launched this new version of Specify more than a year ago, we decided to focus our efforts on Specify's core value: design tokens and assets synchronization within a design system. This is why we decided to base our login system on Google Suite.

A lot of water has flowed under the bridge since then. Many teams have been requesting a more conventional way to log into Specify.

From now on, you can invite anyone in your organization whatever their email address.

This is especially useful if you are an organization needing to manage several teams using different email domains and working on different brands.

New parser: SVG to JSX

If you rely on the JSX syntax to handle your vector design tokens this parser is for you.

The svg-to-jsx parser helps you generate vectors as components compatible with the JSX syntax.

Bug fixes & improvements

• We've improved the extraction of measurement design tokens. Before you could only define previews of your measurements inside a frame. From now on, you can document them more properly by adding anything you want like their name for instance. Specify will only extract the width of the rectangles acting as the previews of your measurements. See our updated measurements frame in our Figma file example.

• You can now extract more informations about assets. Specify now synchronizes their description, frame name, parent frame name and page. This is useful if you want to categorize your assets into your design system and display their description.

• Fixed bug which changed the alpha of a RGBA color synchronised from Figma to Specify.

• Fixed bug which set a wrong file extension to font files assets when using certain parsers. Thanks Alexis!

Tailwind users, this parser is for you. The time of manual updates in your theme object is now over.

The to-tailwind parser helps you synchronize your design tokens in a Tailwind theme.

New parser: To SCSS Map

If you rely on scss maps to store your design tokens this parser is for you.

The to-scss-map parser helps you generate scss maps and their associated getter functions and mixins for every design token type you want.

Faster source creation

Creating a source to synchronize your design tokens and assets is now faster than ever. While creating a source, you can now choose a Figma file you already used for previous sources.

Bug fixes & improvements

• Fixed bug preventing the opening of a pull request on GitHub. Thanks Hicham!

• Fixed bug that creates an empty commit on a GitHub repository. Thanks Hicham!

• Fixed alpha extraction on border color and text style color

• Fixed font family name across several parsers. Thanks Alexis!

Several teams where asking to be able to automatically generate a theme compatible with the theme-ui specification.

That's why, we're thrilled to present you the to-theme-ui parser.

The Theme-UI specification closely looks like another famous CSS utility-first framework. We let you guess on which parser we're currently working on 🌬

New parser: Link Design Tokens

The link-design-tokens parser helps you link color and measurement design tokens to complex ones like gradients, borders, shadows or text styles.

It replaces absolute values by their potential corresponding design token.

This parser is especially useful when used before the to-theme-ui parser.

New parser: Replace String

Finally, the new replace-string parser helps you replace any string matched by a regex by a new string.

Let's say you have some a color named "Red" in your Figma local styles in a "Colors" folder. The color name returned by Figma is "Colors / Red".

This parser helps you rename your design tokens without characters before the last slash:

• Before: "Colors / Red"

• After: "Red"

  
  

Bug fixes & improvements

• You can now extract gradient and radius from border design tokens.

• We previously ordered tokens alphabetically. Tokens are now ordered in a more natural way. For example, given the colors "Carbon 40, Carbon 5, Carbon 50" it now gets listed as "Carbon 5, Carbon 40, Carbon 50".

• When you delete your user, the GitHub connection associated to your account will also be deleted.

• Fixed the font file conversion to the woff2 format.

We've recently been working on improving the overall navigation experience inside a repository. We started by making changes to the repository sidebar.

In this new release, we also improved the category management experience. Many of you were asking for a way to hide empty categories. We listened and from now on your repositories will by empty by default. You will then be able to create new categories.

Bug fixes & improvements

• Improve the CLI's version checking by doing a synchronous check when options --version or --help are used

Getting a first convincing experience as a user when trying a service is always valuable. We've always wanted you to be able to understand Specify's Design API concept as easily as possible. This is why we've been working hard on improving your first minutes of usage inside Specify lately. The onboarding first iteration was satisfying but still could be improved in several ways.

This onboarding new iteration includes the following improvements:

• When connecting Figma as your first source application, the Figma details panel will be open by default. It makes you one click away from your first source installation.

• Some steps now includes links to articles from our Help Center.

• After completing certain steps you'll be automatically redirected to the onboarding. This will help you complete it more easily.

• You can now go back to completed steps.

• We've added another step to help you connect GitHub as your first destination application.

• The onboarding widget is now displayed on every page of the app.

• 
  

New parser: Round Number

You've been asking for more control over number values returned by the API. We listened and we added the round-number parser.

If you ever synchronized design tokens from Figma and saw that some values should be rounded this parser is for you. No one needs a line-height of 17.096544px or a letter spacing of 0.579px. This parser will help you fix this.

Bug fixes & improvements

• Add warning message when imported font files don't match the missing font files.

• Fix login error on slow network conditions.

• Fix a bug where the svgo parser removed many properties on asset files. You can now use it properly with the name-assets-files-by-pattern parser.

• We've improved the content writing experience in modals. Your content will be saved until you submit it or open a new modal.

We recently revamped the overall navigation within the application. More precisely, we had to revamp the navigation inside a repository to prepare future page additions. We're glad to say goodbye to the Tabs pattern we were using. Your repository settings and its connected destinations are now available directly from the sidebar. This will allow us to easily add new pages in the future, like Sources for instance.

Also, following some feedback from our users, we've improved the legibility of your repository design tokens and assets by framing the table.

Bug fixes & improvements

• Modals can now be closed with the Esc key

• Fixed the loading of text styles when a new font or text style was added

• Fixed a loop when loading a repository where you ended up on a 404 page without being able to leave it without refreshing the page

We've added more information about the applications you've connected to your organisation. This will help you see:

• From which account your design tokens and assets are coming from

• To which account they are distributed to

  
  

New parser: Name Assets File By Pattern

This parser will help you name your assets exactly the way you want.

To give you an example, at Specify we use it to:

• Name our SVG icons after optimising them with the SVGO parser: specify-logo.svg

• Add resolution data into our bitmap's filename:
  specify-dsp-light@2x.webp

  
  

Learn how to use this parser

We've added an onboarding to help first users understand how Specify works. It guides you from your first source connection to your first destination connection. After this, Specify won't hold any secrets for you anymore!

More control on synchronization

Up until now, you could only synchronize a category within a repository. Now you can also choose to sync the whole repository at once.

Bug fixes & improvements

• [Assets] We've added support for PDF assets. Teams targeting iOS applications, this is for you!

We've improved your first moments within Specify with a new onboarding. You can now update some of your account information and set a theme.

Responsive documentation

We've improved the documentation experience on smaller viewports.

You can now manage all the applications connected to your repository where your design tokens are distributed.

App Details

You can now learn more about applications from the Apps Catalog before installing them.

The following design tokens are now showing themselves from their best side:

• Colors

• Shadows

• Borders

• Text styles

• Icons

• Bitmaps

• Fonts

You've been waiting for it and here it is! You can now extract your fonts and your text styles from your Figma files.

New parser: To CSS Font Import

This parser generates CSS @font-face rules for your font. No more manual font import in your project 💪

New parser: To CSS Text Style

This parser generates your text styles in CSS classes.

New parser: To SCSS Mixin Text Style

This parser generates your text styles in SCSS mixins.

We've added a brand new home for your integrations. You now have applications divided between sources and destinations.

From now on you can generate a DSP with Specify. A DSP is a package with a specific format that allows you to transit your design data with every tool compatible with this specific format. Such as Adobe XD or Visual Studio Code. Learn more on the DSP parser.

New parser: Suffix by

This parser allows you to set a suffix to string. Here are a few examples:

• Append an extension at the end of a filename

• Append a custom string at the end of a design token name

  
  

Bug fixes & improvements

• [Gradient] Add the possibility to extract gradients from Figma's local styles

• [Color] Fix a bug where colors couldn't be pushed if there is a gradient within the local style

• [Ui] Fixed and improved some components

We've added a full documentation page regarding our integration with GitHub. It helps you understand how you can sync your design tokens between your Specify and GitHub repositories.

Configuration file - Token type filter

You can now filter several design token types at once. In the configuration file the types property is now an Array.

Bug fixes & improvements

• [Doc] Fix the supported token list

• [Doc] Fix a bug where the documentation theme do not follow the app one

• [Doc] Fix some inconsistencies in the wording

• [App] Add an icon next to the error message

• [App] Update on the get started page

• [GitHub] The GitHub app can be installed on another branch than master