How we bring live content to our design system at Süddeutsche Zeitung
At Süddeutsche Zeitung’s digital design team, we work with a token-based design system to enable real collaborative development, ensure a consistent experience for our cross platform product and last but not least foster an efficient design and development process. Creating a custom Figma plugin to integrate live content into our designs has been the latest push towards a more automated and efficient mode of operation.
Setup of the design system in Figma
To bring live content in any design system a flexible setup is essential. By this I do not only mean Figma’s Auto Layout but also the expandability and adaptability of the entire design system. For this reason we built the design system based on design tokens, components and pattern libraries.
Design Tokens
As the foundation of the design system, we created a set of design tokens that fully express our brand and design DNA. The token set defines the visual appearance of any element in our products. As Figma currently (May 2022) does not offer native styles at an atomic level, color references and reusable values, we use the plugin Figma Tokens by Jan Six. All tokens are automatically synced with GitHub and from there pushed into the native code of our products.
Component Library
The design system is based upon a component library in Figma that consists of all elements that are visible in our products. In concrete terms that means, that we built a library of reusable UI elements following the atomic design methodology. The visual style of the components is defined by design tokens. To be able to adapt to the respective content, it is key that all components are setup with Auto Layout.
Pattern Libraries
The component library forms the basis for the product specific pattern libraries. The pattern libraries are composed of components and are a complete representation of the respective product in Figma. In the case of our native mobile apps, this also includes the darkmode views.
Implementation of the Figma plugin
Our pattern libraries used to be a static overview of the complete product. To enhance processes and make the design system more efficient, I implemented a Figma plugin that allows us to automatically pull live content from Süddeutsche Zeitung’s RSS feeds and place them in our designs. This not only keeps the views in the pattern libraries updated from a content perspective but it enables a quick design iteration process where design ideas can be tried out with a full range of use cases in almost no time.
In this first, very basic version of the plugin, the existing values of a teaser can be overwritten with a simple click. The designer can choose between thematically different RSS feeds to create a realistic composition of content.
The general implementation of the plugin is adapted from Daniel Hollick’s Figma plugin.
Next steps
There are lots of ideas for further development, most critical:
- Bring live content to the articles (currently only teasers are connected with live content)
- Enable a search for specific content (currently the selection is limited to different RSS feeds)
- Enhance the automated update process of the designs
Conclusion
I strongly believe that a design system should be as automated as possible when it comes to the presentation of realistic and diverse content. In the context of Süddeutsche Zeitung, this is particularly important, because maintaining and expanding our design system means to validate each idea with a large amount of different teaser combinations, which would take up hours if they had to be done manually. The initial effort to implement this plugin was comparatively very low. In less than two days, I implemented a stable version of the plugin — looking back, it’s something that I should have done much earlier!
