The design system is for us, created by system-thinkers for product-minded designers, to build beautiful and cohesive user experiences.
Frame Design System is here to help you build this ecosystem, not to restrict your design but to ensure stability.
Pillars of FDS
We built our design system as a combination of two different categories: structural and contextual layers.
This way of grouping allows us to build the core components of the design system on one hand, while working on the elements that will bring forth the unique user experience we aim to create across our domain and its needs.
How to work with FDS
📖 Follow the principle design components and foundation elements provided in the documentation.
🎨 Check out the Frame Design System component (or pattern) library in Figma.
🔎 Make sure your project/product is compatible with the Frame Design System. Learn the criteria from here.
❔For any queries, use the #frame-design-system Slack channel. Any questions are welcome; the team is here to help you. If you are outside of Mikrogrup, please open an issue on GitHub, and we’ll take a look.
🌀 Use the UI elements in your mock-ups/concept designs. Refer to the FDS team when you need a component.
🗺️ It would be best to explore the feasibility of concepts and ideas with the FDS team during workshop hours or through direct 1:1s.
🖼️ Involve the project/product’s engineer (or BA, if needed) for collaboration to frame a seamless handoff and to learn about the design system.
💎 Stay updated with both the documentation and Figma libraries. Also, do not forget to request a Supernova account so you can track the system’s latest updates (Mikrogrup employees only).
When should you ask for a new component?
You might be working on a new project or creating a new feature for an existing product. There will be times when FDS does not fully address your design needs.
First, we expect every designer on the team to try to adjust the component to their design. If you can override the component, do not hesitate to do so. However, be cautious and ensure this is a common decision. Let the design system team know if there is an issue or a need, so they can work on and develop the component.
Follow our component decision tree if you are not confident about how to communicate with the design system team (employee only):
Where to find FDS
Design documentation
This is the ultimate area where all information about our design system is compiled and gathered. Everything that needs tracking regarding design and code infrastructure is located here.
Figma sources
We conduct all our design processes through Figma and keep all design files related to FDS on Figma.
You can access the Frame Design System project on our Figma team (only for Mikrogrup employees).
Storybook
Storybook is a tool we use to develop, test, and document our design components in an interactive playground. It allows us to view our UI components and their various states.
When to use FDS
|
Use cases |
Usage |
|---|---|
|
If you are building a module or flow for an existing product, |
you can benefit from our component usage and specific patterns. |
|
If you are building a brand-new product within our domain, |
we expect you to build the designs using FDS and stay connected with the design system team. |
|
If you are working on a project outside the accounting domain but related to fintech, |
you can use FDS components and visual styles. However, be cautious with using patterns, specific component usages, and interaction states to ensure they fit and work well with your designs. |
Need help?
If you are a team member, you can reach out with any inquiries at #frame-design-system on Slack or Teams, or contact to Feyza or Onur directly (for employees only).
If you are outside of Mikrogrup, you can create an issue on our GitHub.