Changelog

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

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