Guidelines

UX/UI development guidelines for better performance and CI

Overview

Uncodie handles most Figma designer's practices out of the box, nevertheless, there are practices that when followed will help teams and projects get the best results for their projects and apps.

Most guidelines will be in terms of designer good practices, but there are team considerations to most of Uncodie Design Systems automation.

Component Naming

Uncodie will generate a computer name for your component by default and handle weird name cases as spaces or special characters, your CTO should provide component naming guidelines for every type of component, variant, or element in your library to match your coding style.

Example:

"principal button" will be exported into <PrincipalButton/>

Variant Handling

The variant name in your Figma component will be used as the variant name in your compiled main component. Your CTO should provide naming guidelines to achieve the most readable code for the team and developers while using your variants.

Component Structure

Every layer in your figma component is equivalent to a <div> layer in HTML, the best industry practice is to achieve your UX/UI with the minimal amount of layers possible to decrease layer rendering costs, file size, developing costs in code handling and CSS overhead and errors while designing use local variables and data binding for a fast start, but try to refactor your designs into the minimal layer structure possible.

Component Logic

You can start adding component actions, events, and GraphQL queries without any additional consideration in your components, all of the IDE functions are available for Design Systems as well.

Continuous Integration

To facilitate your app life cycle, you can add a CI between your app and uncodie libraries to pull and push your design changes automatically, this is especially important for big teams.