Homepage

Features

Last edit: Oct 26, 2022

The platformOS Component Library has great design features, which makes working with the Library efficient for UX and UI designers. It is dynamic, flexible, mobile-friendly, accessible, and the components have several swappable variants. This topic describes these features in more detail, and explains the features of the Figma tool that we used during the creation process.

Dynamic, flexible

Related Figma feature: Auto Layout

We built flexible components, dynamic layouts using Auto layout. In the platformOS Component Library every component has been built using this feature, allowing us to structure components in a way that they can automatically scale to adapt to a new size.

Dynamic layout created with Auto layout

Image: Dynamic layout created with Auto layout

Components adapt to the amount of content as well. For example, a Button component stretches horizontally to make enough room for the content.

Button component automatically adapts to the new content

Image: Button component automatically adapts to the new content

Auto layout also helps you to keep consistent spacing inside elements, between the components, and distribute and align them properly.

Set spacing between components using Auto layout

Image: Set spacing between components using Auto layout

Mobile friendly

All components are mobile-friendly in the Library and have a tappable size. So it is handy to use them on desktop (clicking on them with the mouse), or on mobile devices, tablets by tapping them as well. This means that you don’t necessarily need to create separate interface designs for these devices, the UI built from the components will be usable on all of them.

We extend the Library from time to time with elements that have a separate desktop and mobile version, providing assets for those who prefer a different look on the given devices.

Mobile friendly UI components

Image: Mobile friendly UI components

We keep in mind when we create components, groups, or sections that they should be responsive and be able to adapt to the screen width of the given device.
However a 4-column layout might change to 1-column on mobile as the components drop under each other due to the lack of vertical space, the components can adjust easily to the new screen-width.

Look of a Card component group on a small mobile screen

Image: Look of a Card component group on a small mobile screen

Swappable elements

Related Figma feature: Variants

Components are swappable using the Variants Figma feature. It takes just one click to replace an element in the Library with a different variant of it: e.g. buttons or form fields have normal, hover, disabled states, different types and sizes.

Sample for swapping a Button component to another variant

Image: Sample for swapping a Button component to another variant

Figma marks the variants of a component with a purple dashed rectangle. With a deeper experience in Figma, you can modify them as desired, and extend the list with new variants if needed.

Variants of a text input field and a textarea

Image: Variants of a text input field and a textarea

Accessible

Figma plugin that provides it: Able

We make sure that everything in our Component Library adheres to accessibility standards using the Able Figma plugin.

Using Able, the accessibility checker plugin

Image: Using Able, the accessibility checker plugin

To enhance the usability for all users, including those with visual impairments our components have:

  • A thoughtfully selected color scheme. High-contrast colors for fonts, graphical elements, and backgrounds.
  • Correct contrast-ratio between foreground elements and background, including the inverted elements, where the background has a darker color and the foreground is lighter.
  • Well-chosen interaction color, that is also prominent and aesthetic despite the required high-contrast.
  • Proper font sizes.
  • Text styles with several different font weights and sizes, instead of using lighter and darker gray shades to provide a visual hierarchy. E.g. metadata, less important texts use a smaller, lighter font (instead of a small, light gray color).

Resources

Contribute to this page

Github Icon

Questions?

We are always happy to help with any questions you may have.

contact us