The design team at Mikrogrup uses Figma for design. Anything designed for FDS is available as libraries in Figma.
Main design libraries
The design team at Mikrogrup uses Figma for design — and Anything designed for FDS is available as libraries in Figma
All these libraries are default enabled through for all team design files.
Components
This is the main file for design components, including foundational elements (typography, colors, shadows, grids) and tokens (WIP).
All components can be accessed through the file’s assets panel or by using the shift+I shortcut.
Be cautious when there is an update to the main component library. Read the update description to determine if a major update will affect your design. If it does, consider alternatives to incorporate the latest updates into your designs without directly updating the components.
File structure
Status Annotations
A component may still be a work in progress or may have been removed from our list. In such cases, we indicate this by adding [WIP], [on hold]or [deprecated] label next to the component page name in the main library.
Component properties
Component properties represent the values defined in code to create similar component properties in Figma.
We order properties based on their prominence. Properties with dropdowns are mostly used for selecting variants, toggle switches are used for boolean properties, and text strings are for setting the text label.
Nested components
Some components contain other components and become parent components. These child components can be set as nested components and adjusted in the component properties panel.
Detaching a component on projects
Detaching a component is at your own risk. If you are detaching a commonly used component in your design, keep an eye on the component’s latest updates to ensure your designs stay up-to-date.
If you need to detach the component in your design, it indicates there might be something wrong with the component itself. Please reach out to us and let us know why you need to make changes. It will help us make further improvements.
Patterns
The patterns library contains ready-to-use pages — when a common pattern is needed, designers can use these examples in their work.
Since we have different types of products, patterns might be designed based on a specific product example. The key is to refer to the pattern’s behavior and apply it appropriately in your design.
E-mail Design System
Our email design system offers sets of usage guidelines for specific needs related to email notifications. The library includes style guidelines, components, and a few examples.
You can check our the email design system in more detail here:
Resources
Fonts
We use Inter and JetBrains Mono for the system’s typeface. Fonts can be downloaded here:
Icon stack
We use Font Awesome (version 6) as our icon stack for visually communicating actions in the Frame Design System. We use this icon library as an icon font in our designs. To use and display the icon font in your projects, you need to install the fonts on your device.
You can find what you need to download from FontAwesome here:
Tutorials
If you don’t feel very confident in using Figma, you can look into a few resources to get knowledge about Figma.