Getting started as a Designer

The HDS design kit contains all the resources you need to get started designing beautiful and accessible user experiences that follow the City of Helsinki brand.

The HDS design libraries are the single point of reference for your design. When you connect your design files with the design system libraries, you can have the components synced whenever the design system is updated.

Principles

Always keep these core principles in mind when making design decisions:

  • Modular and flexible: All components are designed to work as reusable, customisable building blocks to help people work smarter, better, and faster.
  • Consistent: All components are designed to fit together seamlessly to ensure a consistent and cohesive user experience.
  • Accessibility baked-in: Accessibility is part of the process from start to end. It is designed to be accessible to all, regardless of ability or situation.

Getting started

  1. Explore the City of Helsinki Visual Identity Guidelines to learn the design principles of the brand.
  2. Take a look at the Components documentation to see what is available and how you can incorporate those into your designs.
  3. The design assets are available either via direct design kit download or via the City of Helsinki Figma. To access HDS libraries, you will need to use Figma. See more on downloading and setting up the libraries below.
  4. If you have an idea for improvements or a component that could be a useful addition to the Design System, see the Contributing page for more information.

Setting up

Install the tools

The HDS design library can be accessed in Figma (if you have access to Helsinki organisation):

  • Figma is a vector graphics editor and is widely adopted by designers to create user interface designs for web and mobile services.

If you are a newcomer to Figma, there are great tutorials and help over at:

You do not necessarily need access to Helsinki city organisation to use HDS design library. We offer a downloadable HDS design Kit alongside Git releases. Download the latest HDS Design kit from the HDS GitHub repository. Please note that if you use the design kit outside of Helsinki organisation, you need to manually download the kit again to gain access to the newest updates. We are working toward releasing the design kit as a community file that receives updates automatically when we have a release.

Install fonts

Make sure that you have the Helsinki Grotesk font installed.

Helsinki Grotesk font can be purchased from Camelot Typefaces website

Set up your Figma project

To set up a project in Figma, you will need to:

  1. Create a new Figma project in All Helsinki projects-team
  2. Add a new design file
  3. Add HDS Design Kit library to your project
  4. Start making design changes

Get familiar with HDS

Before you start designing, it is a good idea to get familiar with the HDS offering.

For designers, a good place to start is to browse through HDS Design Kit overview

Customising components

The components use autolayout for easy resizing. In Figma when you bring an asset into your file from the library it creates an instance of the main component that is easily customisable. You can configure the content and styling of component instance parts from the property section.

When changing the colour or other styles of component instances, be sure your custom design adheres to the design guidelines. Styles within components are carefully considered. We do not recommend detaching the instance to change default styles.

Styling text elements

HDS Figma library includes typography styles you can conveniently add to your elements. You can browse the library’s text styles when you have a text element selected.