Designers

Vattenfall Design Kit

The Vattenfall Design Kit (VDK) is a living library containing Vattenfall’s digital visual assets for everyday purposes: modules, components, icons, colour palettes, grids, typography, etc. The VDK 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 Abstract in Sketch format and connected to your working design documents as a Sketch Library source.

We’re currently in the process of making some larger updates, the latest update was completed by November 2021. You will find the latest file by following the link below.

Vattenfall Design Kit in Abstract
Vattenfall Design Kit in Figma

Get started as a designer

In order to get started with the Vattenfall Digital Design System, you need to either use Sketch or Figma.

If you’re using Sketch make sure you have been provided with both apps: Sketch and Abstract. Abstract is a version control tool, which keeps all of your Sketch working files in one place. It also prevents creating conflicting copies and allows contributors to request reviews and inspect the files without opening Sketch.

If you’re using Figma you need at least a free version of Figma installed to access the VF design file and your own license to create and share your own designs.

Get Abstract
Sketch introduction
Get Figma
Figma Introduction

Get started with Figma

To start using the Vattenfall Design Kit with Figma, the library should be duplicated. The following video explains this process.

Design Kit Structure

The VDK 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.