Design Kits

Quickly build beautiful and accesible experiences through prototypes.

Figma is our main design tool. The Material Design kits for Figma contains a variety of resources for designing our products.

Get the libraries

1. Sign in into Figma

Join

To join the team please write us through the form.

Sign in with your institutional email account. You need to be joined to the CT UI/UX team to access the libraries.

Once your request is approved, you will be able to view the files.

Within the team you will find the project called Material Design System. In this project you can visualize the different libraries that have been compiled and authorized to design prototypes. You should make use of them for your designs.

2. Turn on the libraries

You will find the libraries that have been approved for use in prototype design. You can turn on as many libraries as you'd like.

Step 1: Inside of a design file, navigate to the main menu panel in the top left of the toolbar. Open the menu and select Libraries from the list.
Step 2: Then in the libraries modal, find the team called CT UI/UX and switch the toogle beside a library to on. You must activate the library Grupo FUNIBER SD where you will find the custom resources for our design system such as typography, color guidelines, custom components and patterns. This library is for the organization's own use and we are constantly updating it with new patterns and components.
Step 3: You can turn on the additional libraries such as Vuetify (Material Design Components) or Mui (Material Design Components). You can use them at your convenience. For icons you should use the Material Design Icons library.

You must always activate the library Grupo FUNIBER SD

Start designing

For most components we work with libraries developed and maintained by the community. We are working hard to continue to nurture our library, in the future we hope to expand this library to ensure consistency between design assets and code.

To preview the libraries, visit these links.

Grupo FUNIBER SD (Centro Tecnológico)

Vuetify (Material Design Components)

Mui (Material Design Components)

Material 2 Design Kit (Google)

Material Design Icons