Docsity’s updated Figma library enables product rebrand

Belka’s Department of Homework is proud to announce that Docsity’s Figma library has been successfully updated and aligned with Storybook, ready to host an exciting product rebrand.

‍

Document marketplace Docsity connects students around the globe with the resources they need to study and succeed. The platform had a solid design system, but the Docsity development team was leagues ahead of the design team. With plans for a rebrand, the work had to be done on time.

‍

“Our Figma library was partially outdated with malfunctioning components, causing issues for our team of developers,” explains Andrea Montuori, UI Lead at Docsity. “Misalignment between Figma and Storybook was causing delays in the design and documentation of projects too.”

‍

Docsity needed a design system that aligned designers and developers, along with a simple method to keep everything updated and synchronized.

Belka hit the Figma library books to lend a hand.

Aligning design with development

The Belka team aligned the Figma library by migrating properties from development to design. “We configured the Figma library to be parallel to Storybook, allowing the design team to adjust properties using the same methodology as developers,” explains Mattia Marinangeli, Belka’s design system team lead.

“Now, designers and developers speak the same language when it comes to components,” notes Andrea Montuori. But Belka’s work didn’t end here.

Rebranding with tokens

Next, Belka collaborated with Docsity to review and update the design token structure, integrating typography tokens and automating responsiveness.

“Correctly integrating design tokens was particularly important because it allowed the Docsity team to effortlessly use their new guidelines for the upcoming rebrand,” says Mattia Marinangeli.

‍

Organizing the tokens was also a crucial task. “Having well-organized tokens allows you to update specific tokens and automatically propagate the updates on the product interface,” explains Mattia.

Full marks for Docsity

With organized and integrated tokens, Docsity can now propagate changes quickly and easily to rebrand their product without manually updating every component or Figma style. 

‍

Andrea was ecstatic with the results. “Thanks to the work done with Belka, we have significantly sped up the handoff process and the design phase has become streamlined and high-fidelity.”

‍

Mattia and the rest of the team at Belka can’t wait to learn what Docsity plans to do next!

‍

* * *

Related from Belka:
· How to automate token handoff?
· Do you really need design tokens?

‍

‍

‍

‍

‍