A common design language
Get started using the Design System resources in your projects and designs. The Coloplast Design System provides a common visual language for designers, developers and stakeholders. It allows everyone to speak the same design language, leading to fewer misunderstandings, and allowing for more streamlined specification of UX requirements.
If you have a question about any of the provided resources or tools, or are unable to find what you are looking for, you can reach out to the Design System Team in Teams or try connecting with your fellow designers. Chances are, someone has had a similar problem and will jump in to help you out.
Design system as a starting point
The Coloplast Design System should always be used as a starting point in order to keep the UI consistent, easy to maintain, and aligned with the front-end implementation.
Coloplast font
The Coloplast font is made available through Figma for full seat users. It’s a custom variable font especially developed to maintain a consistent brand presentation and enhanced performance in digital spaces. Partners can request to download the Coloplast font through the Brand Portal.
Figma library files
The Coloplast Design System consists of the following Figma libraries:
- Foundation – Colours, layout grids, spacing, documentation tools and more.
- Web Typography – Text components.
- Web UI kit – Components for building consistent web interfaces.
- Web Blocks – Components for page blocks and sections.
- App UI kit – Components and guidelines for iOS and Android.
- Wireframe Components – Components for creating wireframes.
- Icons – A set of functional icons for interfaces.
- Brand icons – A set of illustrative icons for visual communication.
Installing libraries
You can access the library view in a few ways. Through the main dropdown, the assets tab (option + 2), directly via the command palette(cmd + Å), or a shortcut option + cmd + o .
Some CDS (Coloplast Design System) libraries are active by default when a new file is created. Other libraries have to be manually added to the file. Here’s how:
Find and open the library view
Add one or more libraries
Library updates
All libraries are updated regularly as components evolve and new decisions are made. It’s mandatory to keep master design files up to date so to help manage this, library changes are always described and aim to communicate the change and potential impact. If ever in doubt, reach out the the Design System team.
🚀 New: [summary of a new thing]
✨ Improved: [summary of an improved thing]
🐛 Fixed: [summary of a bug fix]
❗️ Breaking: [summary of a breaking change]
Using library assets
Components
To start using the components, open the Assets panel, and drag a component from the list onto your canvas. UI elements, typography and other components are always available here.
Drag and drop components on the canvas
Variables and styles
Variables and styles are very similar, yet very different. This article by Figma helps explain the differences and when one is more appropriate over the other.
Figma distinguishes between styles and variables by displaying style values as circles while variables are squares. The Coloplast Design System is moving towards the use of variables exclusively, so designers should choose variables over styles when possible. Learn more about how we work with variables.
Design tokens
For designers working with the core parts of the Coloplast Design System (e.g. foundation, components, etc), we use the Tokens Studio plug-in to maintain and communicate the majority of our design decisions between design and code. If you are new to Tokens Studio, consider visiting their documentation site for a quick introduction.
The design tokens are maintained and provided by the Design System Core Team. Designers can access all tokens via variables in Figma.
Repository
The design tokens are stored in an Azure repository called design-system-tokens. This repository is the design system’s “single source of truth” and where we sync our design decisions between design and code.
Before you start designing
Get familiar with the concepts and components the Coloplast Design System offers. Understanding use cases and guidelines for individual components will ensure your designs align with the rest of the design system. Need somewhere to start? Check out the Foundation section.
Give feedback
Any feedback you have around improvements, challenges, or ideas for new components are always welcome. Reach out to the design system team, and we’ll do our best to support you.