Designing Complex Components in Figma: Our Build Record

Figma, a web-based graphic editor and prototyping tool, is widely used for UI design, and this post outlines a case study on using Figma components to manage different states in the Codefresh UI. The blog, written prior to the release of variants and new auto-layout features, will be updated once these features are incorporated into the style guide. The redesign of the complex build record header in Codefresh involved breaking it down into different components for easier modification, with a focus on creating components for each section that can be easily swapped based on Git events. The post highlights the benefits of using two versions of components, one with a label and one without, to avoid duplication and maintain intuitive use in the design system. The design employs a grid layout for responsiveness, and additional components, such as status indicators and build stat items, are nested in auto-layout frames to ensure consistent spacing and alignment. This approach facilitates easy switching between states and prevents inconsistencies that could arise from using overrides. The tutorial aims to provide helpful tips for optimizing component use in design systems, inviting feedback and further exploration of the components in action through creating a free Codefresh account.