Front-ending your Design System, pt. 1

Here at Angi Studio we aim to be as tool-agnostic as possible. We adapt our workflow to our clients’ workflow. If they use Figma for design, we’ll use Figma as well. If they use Sketch, we’ll use Sketch. Or Adobe XD, Framer, you get the picture.

The same goes for our development process and our Design System or component-library deliverables. If their team develops in React, then so will we. If they deploy their code components in Fractal, Frontify or Storybook… well, so will we.

To get to know all these tools requires effort on our end, but in the end it’s more than worth it.

Luckily, we’ve met great people from various companies at our meetups, who were more then willing to help us out. Recently we met with people from FramerX (design & prototyping) and Frontify (Design Systems). Both tools are amazing and for this post we’ll start with Frontify.


Frontify

frontify logo

The amazing people at Frontify built a tool to build and maintain your Design System, collaborate with your team and even keep track of progress in a Kanban board.

We could go into all features they offer, but hey, they already did that on their website.

We set up an hour-long call with Jannik and Stephanie from Frontify to answer some of our burning questions on building and deploying with Frontify. For this we’re very grateful, especially since they offered us a free trial of their Enterprise version. Thanks again guys!

There are two options that stand out from a frontend perspective:

  1. For other tools you need to arrange your source-files into their pre-composed folder structure to be recognised, but Frontify turns this around. We simply tell Frontify (via a JSON file) to look for files in our existing source code and folder-structure
  2. We can deploy from the local development (connected to GIT) to the Frontify App with a simple sync script


1. Frontify looks for your files

We’re used to working with Fractal, Patternlab and Storybook for deploying our component libraries. With Fractal one of the drawbacks for me as a Frontend developer is that we have to place all our source files in the Fractal folder structure. In this scenario, we’re not able to maintain a solid source-folder that follows naming conventions as we’ve grown accustomed to in our line of work.

Frontify changes this by allowing you to setup a JSON file, pointing to the source files in your existing folder structure. This enables us to maintain a workflow we – and of course the developers that will inherit this project – are accustomed to.

This speeds up development for us and for our clients. Big win here!


2. Sync!

With their Node API , Frontify enables us to push the changes we made directly to the Frontify App. This makes it a breeze to update clients with new components in their Design System.

As all of our code is hosted on Github, every change stays in sync across our development team.

They offer a basic example right there on the NPM site. Now all we have to do is extend their example with a Gulp Git package to pull the latest changes (just in case) just before we push to Frontify, keeping our Repo the 100% source of truth.


In the end…

We love working with Frontify: it’s a great tool, with amazing features and we can’t wait to use it for our next client, who knows, that could be you.


Next up…

In a next post we’ll be talking about our experiences with other tools for your Design System or component library. Currently we’re doing a lot of stuff with REACT, so Storybook is a good candidate!

Wij gebruiken cookies voor de beste ervaring van de website. Tijd teveel, beklijk onze privacyverklaring