This enables the element to be responsive while maintaining spacing between each item. The design specifies a grid of six columns, with a gutter of 20 pixels. Providing two versions is more intuitive to use and utilize in our design system.įor instance, the stat items are nested in a frame with a layout grid: Grid Layout However, this would easily become difficult to follow. In comparison, we could have just created one version with the label and swapped out the internal instance for that stat item. This allows us to standardize components without duplicating them. Additionally, there are several variations of the fields displayed. We differentiate between two versions the first one has a label included, and the other one does not. Here’s how it looks in our design system: Design Components Overview within the Design System We call this component a stat item and we use it quite frequently. We created a component for each section so that we can easily swap them out depending on which Git event we want to demonstrate.Īs you can see, each Git event is composed of similar fields with slight variations. The fields within the header change in accordance with different Git events. This is the event information, which changes for each Git event. To make it easier to view and modify the different parts, we broke it down into different components. Let me show you how we recently redesigned the header of our build record in Figma. There are simply so many variations to each part of it that you could easily lose count trying to connect all the records. One of the most complex design components in the Codefresh UI is the build record header.
#Figma components update
We will update the blog after we update our style guide with these new amazing features. Note that this blog post was written before the release of variants and the new auto-layout features.
This post provides a case study on how we utilize Figma components to manage different states in the Codefresh UI. Independent of the size of your organization, it is considered good practice to use design components. Figma is a web-based graphic editor and prototyping tool that is commonly used for UI design.
0 kommentar(er)
