Designers

Vattenfall Figma UI Kit

The Vattenfall Figma UI Kit is a living library containing Vattenfall’s digital visual assets for everyday purposes: modules, components, icons, colour palettes, grids, typography, etc. The design kit exists to ensure design and development consistency across the entire Vattenfall ecosystem, improve quality and efficiency in production, bring digital products and services to the next level of coherency. It can be accessed via Vattenfall's organisation in Figma and be connected to your working design documents by adding the UI-kit Library to your own files.
You will find the latest file by following the link below.

Sketch and Abstract is no longer maintained, should you need a version of the old Sketch Design kit please get in touch and we can share it with you directly.

Get started as a designer and with Figma

In order to get started with the Vattenfall Digital Design kit, you need to use Figma. Vattenfall has a shared Figma licence that all Vattenfall employees or partners working with UX, digital design, digital products editorial work and development at Vattenfall should have access to. If you are an external partner and wish to access without using a Vattenfall email account, please request access via the link above.

Here are links to download the Figma software as well as a link to Figma's own introduction material should you need it.

Get Figma software
Figma Introduction

To get started in the tool itself follow the steps in the video below.

UI Kit Structure

The UI kit structure is a nested library of symbols, grouped by type of module or component. The library contains more that 500 ready-to-use design snippets: from simple buttons to more complex modules.

Make sure to study the component library and use components with correct naming. We use a simplified version of the Atomic Design methodology, adapted to suit our design process and our team culture. The main difference with Atomic Design is that all modules are either an atom or a molecule, categorised by purpose. Our approach to defining modules and naming them is function-directed, rather than presentational. It is based on evolving a shared design language collaboratively and empowering all designers and engineers on the team to contribute to the system.