Starting a New Design and General Tips

Embarking on a new design project with the Uno Platform requires a structured approach to ensure compatibility with Uno Toolkit and an efficient development workflow. Here are the essential steps and tips to help you create technically sound and visually appealing designs.

Key Steps for Starting a New Design with Uno

1. Initiate with the Uno Platform Material Toolkit

  • Why it's crucial: Using the Uno Toolkit from the start ensures compatibility with the Uno Platform and streamlines the development process.

  • Action plan: Duplicate the Uno Platform Material Toolkit, available in the Downloads page. Rename this file and update its cover image to start your project.

  • Avoid common pitfalls: Directly work within the duplicated Uno Toolkit file. Do not copy elements into separate Figma files, as this might lead to compatibility issues with the plugin.

    Important

    Do not use the Uno Toolkit as a linked Figma Library. To ensure that all advanced features are available and functioning correctly, always start your design within the duplicated Uno Toolkit file.

2. Leverage the Provided Color Styles

  • Make use of predefined color styles: These styles are tailored to align with the Material Design principles and ensure a consistent look across platforms.
  • Customization approach: You can update the HEX values of these color styles as per your design requirements, following the guidelines provided in the Toolkit.

3. Employ Provided Type Styles

  • Flexibility with fonts: The recent updates to the Uno Toolkit now allow the use of custom fonts and sizes in your designs.
  • Stick to predefined styles: While you have the freedom to choose fonts and sizes, creating new type styles is not supported. Ensure to use the existing type styles for consistency and better integration with Uno Toolkit.

4. Use Page Templates Effectively

  • Importance of templates: Page templates in the Uno Toolkit come with predefined structures that are crucial for accurate XAML generation and design previews.
  • Working with templates: Select a suitable template from the Assets section, drag it to your canvas, and detach the instance. This step is vital to transform the template into a functional page for your design.
  • Crucial tip: Always keep the 'Body' node intact within your page templates. This ensures that the structure remains compatible with the Uno Toolkit and functions correctly.

5. Incorporate Flexibility with Auto Layouts

  • Advantages of Auto Layouts: They offer adaptability and responsiveness in your design, essential for various screen sizes and orientations.
  • Applying Auto Layouts: Utilize Auto Layouts to ensure dynamic design elements that adjust seamlessly across different devices.

Finalizing Your Design

With these guidelines, you are well-equipped to start your design journey on the Uno Platform. Remember, a well-structured approach not only enhances the aesthetic appeal of your design but also ensures seamless integration and development.

Download and set up the Uno Platform Material Toolkit to begin your Uno design project with confidence!