Changelog

Find out about Specify latest product changes.
Follow us on Twitter

New parser: To React Native

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

Improved sources management

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

A more flexible login system

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!

New parser: To Tailwind

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!

New parser: To Theme UI

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 🌬

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.

New repository category creation experience

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

Improved onboarding experience

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.

Repository navigation revamp

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

Know more about your connected applications

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

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.

Improved onboarding experience

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!

Bug fixes & Improvements

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

Onboarding

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.

Destinations

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.

Design tokens preview

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

  • Colors
  • Shadows
  • Borders
  • Text styles
  • Icons
  • Bitmaps
  • Fonts

New design tokens: Font & Text-Style

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

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.

Apps Catalog

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

New parser: Design System Package

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

Documentation - Github app

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

CLI --sync command

We've added the command specify sync to synchronize a targeted repository in your config file.

CLI --help command

We've added the command specify --help or specify -h to access to the Help interface in the CLI.

New parser: To JSS

Huge thanks to Romain (Station) for building the JSS parser. It allows you to expose your design tokens in a JavaScript object. Teams using React will love this 👍

Bug fixes & Improvements

  • [App] Update button within the feedback modal
  • [App] Fix a bug where the app theme do not follow your choice
  • [Login] Fix the error icon in Dark mode
  • [Doc] Add a list of token supported by Specify
  • [Doc] The app theme choice will now impact the documentation one
  • [Doc] Fix a bug where the theme selector in the documentation do not trigger the right theme properly