For Designers

The aim of this page is to get designers started with the right tooling, and to create awareness of the useful links on this website.

About Riverty Design System

Riverty Design System enables teams to efficiently deliver consistent user interfaces through a Riverty-aligned design and development toolkit that promotes reusability.

Let’s look at what Riverty Design System offers:

• Guidelines
  Explanations about how we deal with overarching topics. Fore example, dark mode, copywriting, and accessibility.
• Components
  The interactive or non-interactive elements in a User Interface. For example, checkboxes, tables, tabs, toasts, dividers, text areas, and lists.
• Patterns
  The decisions made on how we combine components, and define certain flows and behaviours. For example, notifications, navigation, logging in.
• Tokens
  The smallest style elements written as variables. For example, spacing, colors, and typography.
• Brand assets
  The assets that make our products (Riverty) branded. For example, logos, fonts, icons, and graphics.

Figma guidance

At Riverty we use Figma for all our design needs. Figma is available to everyone in the organization. It depends on your role what Figma license you need. There are three options:

• Full design seat (UX or UI designers);
• Developer seat (Front-end Developers);
• View-only / restricted seat (all others).

You can use the tool online but we recommend that you download the application for the full experience.

Installing libraries in Figma projects

Riverty Design System encourages you to add the following libraries to each of your Figma projects:

• Components
• Icons
• Semantic Tokens (= Colors)
• Typography
• Grid

Optionally, you can install the Resources and Logo libraries as well.

Step-by-step guide

• Make sure you are signed into Figma with your Riverty account.
• Open a Figma project (existing or new).
• Select “Assets” (1) in the tab bar on the upper left of your Figma screen, next to “Layers”.
• Click on the small “Libraries” icon (2) to open the Libraries modal dialog.
• Select “Other teams” in the tab bar.
• Add the Riverty Design System Libraries by clicking the several “Add to file” buttons.

After adding those libraries, you will now find the Components under the Assets tab again (1). Select the component you want and simply drag and drop it into your page.

Library items like text styles and colours can be found under the Text panel (3) or Colour Panel (4).

There will be continuous updates of all libraries. The updates will contain small tweaks and adjustments as well as releases of new components. Therefore, be sure to review and update the libraries when the blue badge notification appears (5).

Request icons

How to request a new icon available in Figma and Code?

1. Find the icon on stream line website: https://www.streamlinehq.com/icons/sharp-line-style.

2. Create a ticket in Jira on the DSYS board: https://riverty.atlassian.net/jira/software/c/projects/DSYS/boards/1332.

   • Add the link to stream line icon;
   • Add a screenshot of the context you’ll be using the icon in.

3. Design System team will evaluate the request and will:

   1. Approve the request and move the ticket to “In progress”;
   2. Decline the request, and suggest to use another (existing) icon;
   3. Come back to you with questions, and later proceed to step 1 or 2.

4. Design System UI designer will make sure the icon is adjusted to proper sizes and aligns with stroke width and icon grid, and that the icon gets added to the UI kit in Figma.

5. Design System developer will make sure the icon will be published in the code package.

6. The Jira ticket will be put to “Done” in order to let you know that the icon is published and ready to be used!

What if you’re unable to find a suitable icon on the stream line website?

1. Propose an icon design yourself;
2. Schedule a review with a Design System team member for review;
3. If approved, create a Jira ticket for the Design System team to finalise the icon and continue step 4 and further.

Experimental Component Library

As a UX designer, you might be in need of (additions to) components that are not in Riverty Design System (yet). In Figma, we have created an experimental component library in which you can add your design proposals for new components and additions to existing components.

The main goal of this library is to create awareness for the Design System team as well as amongst UX designers about what’s currently needed in terms of components and what’s being worked on at the moment.

The library offers instructions (How to use), a template (Template to copy) and already added proposals for new components or additions to components. It’s a document in progress, so feel free to test and provide us with feedback anytime.

Get in touch

Receive design feedback from Design System team members
Book a Design Critique with a Design System designer to get feedback on your designs. Your meeting might be forwarded to other Design System team members to be able to provide you with the best feedback.

Share with Riverty Design System team
Provide your feedback, bugs or ask questions via DSYS feedback, Q and A teams channel.

Contribute to Riverty Design System
Are you interested in contributing to the Riverty Design System? Designing and documenting a component or pattern? Reach out to one of the Design System team members and they will onboard you.