Figma best practices for Uncodie
- Always keep your work area tidy so that item mix-ups don't arise later.
- Remember to work with parents so that any correction of elements that are on another screen is modified automatically, this will save you a lot of time.
- Use variants in the parents, for example if you have the same element that is going to be repeated but its content or aesthetics will change, variants are the best option.
- It's all handled with Auto-layout, it's an algorithm that determines the position and size of boxes based on the way they interact with their siblings and parents. Think that a huge container has many small containers, and these contain even smaller ones.
- Be careful with your Layouts so that your project can compile well, for example, don't use negative numbers in them.
- Name your components in an orderly way, for example: Screen + component. Avoid very long names! Always in English and without spaces between words
- All the components have to have a different name, remember that if there is one with the same name, when compiling the project it will throw you errors.
- If your project has responsiveness you will have to make the components that will change, just don't forget to differentiate them from the originals.
- Remember to flow your project inside the project you are going to compile.
- Upload your images in PNG and not in vectors to avoid structure problems in your code and to make it look good when compiling.
- Your png images should be in the best resolution you can have (we recommend 4x) so they don't pixelate at zooms below 700
- Make sure that your components, texts or PNG images are in Hug or Fill so that they are not deformed when compiling
- Always add the global parameters in the Figma project (Colors, Texts, Shadows, etc.) so that your design is equal and constant.
- Do not save your files (Design Files) in draft. Always work on them in their respective team and project. This way everything will be more orderly, and it will be easier for everyone to access the file.
- Arrange your components in alphabetical order to make it easier for all project members to access them
- Always make your mockups responsive so that your designs are dynamic and viewable on different devices.