polyLook Design system

Project Overview

polypoly is building a sustainable data economy to change the way data is handled. Focus is the polyPod, an app that turns end devices into data centres.
How can we improve our design while ensuring that it is scalable and future features are easy to build? By using components that can be styled and maintained agnosatically. Cue to... design tokens! I took it upon myself to introduce polypoly to design tokens and how we can use them.

  • RoleUX/UI designer
  • @polypoly GmbH
  • Appapp store
Key Takeaways
  1. Improved documentation by including all stakeholders.

  2. Improved Designer/Developer collaboration.

  3. Introduced autolayout and design tokens to the design system.

At my time at polypoly my main task was to consolidate the existing UI kit into a fully functional design system with design tokens. I was in close collaboration with front-end developers to understand the coded status of our components and added the status property to our documentation. Every time a component was used or reworked on I documented the component with design tokens and shared the progress with all stakeholders via a slack channel I set up to ensure all stakeholders had a shared language when talking about the design system. Product owners used this channel to be up-to-date with that was available to them.

My mission was to install a culture of reusability within the company without limiting creativity. One way I did that was to install a Figma sandbox page where we could experiment with newer components and see for a period of time how it felt before include them in our design system library.

Team event design system workshop with around 10 persons, from which the CEO, some front-end developers, and designers (and me with a not so flattering hairdo).

At my first team event I proposed to set up a design system workshop that I called "Cross guild Design System". One specific aspect I was trying to solve was to have a seamless Design handoff between sculptors (designers) and tinkerers (developers) via design tokens.

    Here are some of the concepts I wanted to talk about

  1. In order to free up time to focus on more abstract concepts
  2. Help scale and onboard new tinkerers and sculptors.
  3. Having design tokens as a single source of truth gives the opportunity to sculptors to take part in implementing changes.
  4. Design tokens allows us to speak the same language all while using our own tools.

To organize this workshop I prepared a small interactive presentation to bring everyone up to speed. I partnered up with a front-end developer that showed interest and we prepared a test project to show off how a single source of truth works.

My expected outcome was to define requirements for each guild, seek ownership from stakeholders and start establishing a naming convention. What I ended up having was already great, an overall understading of the value of Design tokens to a group of previously unaware stakeholders and A Proof-of-Concept implementation that reflects changes in Figma directly on GitHub. A total win on my side.

Figma tokens demonstration that was also executed at the team event workshop

Contact

Thank you for having a look, if you wish to get in contact, feel free to write me at: contact@victorjan.in

Or find me on these links LinkedIn · Medium · Behance · Github