Figma - Hyvä UI

Hyvä UI provides a comprehensive design system available for Figma, allowing you to customize it for your specific brand identity.

This design system includes all the essential Hyvä UI components and reusable elements, such as colors and buttons used consistently across components.

Using Figma

Some tips and resources to get you started.

New to Figma?

In this Hyvä UI Figma Design, you'll experience the full potential of Figma's robust features, such as components, Auto Layout, and Variants, enabling efficient design workflows.

If you're new to Figma, fear not! We have curated a selection of fantastic resources to help you quickly get started and harness its true potential.

Or read about it in Figma Best Practices

Styles in Figma

Hyvä UI uses text, colour and effect styles in Figma to ensure consistency across the board. Edit these styles to quickly apply them throughout the library.

Or read about it in Styles in Figma

Auto layout in Figma

Most of our UI components are created using auto layout, allowing them to be as flexible as they possibly can.

Or read about it in Auto Layout in Figma

Components and variants in Figma

You’ll notice the use of shared Figma components and variants throughout this file. This allows you to easily edit components and see the results applied on all UI components in the file, reducing manual labour.

Using Hyvä UI as a Figma library

Within Figma, you have the capability to share components and styles within a file by publishing them. This transforms your file into a library, enabling you to utilize instances of these components in other files.

Any modifications made to the design of these components in the library can be published and subsequently applied to other projects where instances of these components exist. Essentially, your library becomes the authoritative reference for all design iterations.

Step 1: Publish Hyvä UI as a library

View, manage, and publish libraries from the Library modal. The publishing process is the same for new libraries, as well as changes to existing libraries. There are a few ways to access the Library modal from within a file:

A. Editor toolbar

Click on an empty spot in the canvas to deselect.
Click the arrow next to the file name in the toolbar.
Select Publish library from the options.

B. Assets panel

Click on the Assets panel in the left sidebar.
Click the book icon to open the library modal.

C. Keyboard shortcuts

On Mac: ⌥ Option + 3
On windows: Alt + 3

From the Library modal, select Publish to convert Hyvä UI to a library. Figma will let you fine-tune which components you’d like to publish.

Please note that publishing for the first time might take a while.

Step 2: Activate your new library in other projects

After creating the Hyvä UI Figma library in step 1, you’ll need to activate it before using in other projects and files.

Open the Library modal in your desired project/file, Using one of the methods (A,B,C) above (from steps 1), open the Library modal and activate the Hyvä UI library.
Access Hyvä UI
Use the Assets panel to browse Hyvä UI Figma components.
Copy and paste UI components from the Hyvä UI Figma file.
Hyvä UI styles are available in your new file.