General
Use the provided variables
Get familiar with the semantic colors, typography, spacing, and elevation system. Defining colors, typography, etc. manually should be an exception.
Use auto layout
Auto layout is our preferred way of designing for web projects, and manually positioning elements on the canvas should be an exception. Auto layout lets you create designs that grow to fill or shrink to fit, and reflow as content changes. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve. Also, auto-layout works very similarly to how front-end implements designs in HTML and CSS, which gets the designs closer to the real-world constraints of the actual implementation. See “Add auto layout to a design” for more info.
Use the included layout grids
The layout grids provided by the design system are synced with the front-end grid and by designing with them as guidelines, we get a much smoother and shorter hand-over process.
Designing interfaces
Our libraries make it easier to create consistent user experiences by helping designers get familiar with the available components and tools.
Organising in Figma
Teams – Each product area has it’s own team and each team hosts their design files separate from other teams. This helps with Figma analytics and keeps unrelated work separate, making it easier to find relevant information.
File thumbnails – Design files are easier to find when they have a thumbnail with a clear and descriptive title and short description. Included in the design system is a File Cover component which should be used.
File structure – Design files should be organised to make it as easy as possible for other designers and stakeholders to find what they are looking for. A “Master file” is a source of truth that reflects the latest decisions and designs as they are represented in production. Using a project template file makes a clear distinction between what is ready for development, work in progress or experimental designs, helps prevent misunderstandings and wasted time.
Naming layers – It is a lot easier to navigate or take over a design file if the layers are named. Especially since multiple designers can work on the same projects. Naming does not need to be super specific, but should at least give an indication of what the layer represents.
Detaching components – Avoid detaching components when possible. Instead, use the component’s variant options or show and hide layers within the component.
Stay up-to-date – Make sure to keep your components and files up-to-date. You may see a notification in the bottom right corner of Figma when a new update is available.
Guidelines
The Coloplast Design System provides guidance for creating experiences that are consistent. We use design principles to guide decisions, UI components to provide a unified visual look and feel, patterns to keep solutions consistent, and accessibility standards to ensure inclusivity and access for all users.