YouTap Design Styleguide | Youtap Onboarding

What is a styleguide?

Welcome to the YouTap Design Styleguide! This guide was created to provide you as developers and designers with a comprehensive source of information on design elements, principles, and best practices here at YouTap. By adhering to the guidelines presented here, you can create consistent, high-quality designs that meet user needs and business objectives.

The guidelines are organized into sections, with each section containing information on a specific aspect of design. Additionally, you'll find helpful links to further resources. We hope you find this guide to be a valuable resource in your design work.

How can I use it?

The design system is organized in the following main parts: Foundations, components, and animations. Each section includes design guidance and tools to help you customize and build with YouTap.

Part 1 - Foundations

Within this part, the foundation to design the YouTap app is set. These can be customised to some extend, but will mainly stay consistent across all YouTap client apps.

It includes the following elements like colour styles, iconography, layout, and others to set the standard across the different areas for the app.

Go to foundation section

Part 2 - Components

Within this part, all available components are listed that can be used in the YouTap app. These include all their individual variations and statuses. It holds all necessary design guidance for development, incl. specifications and Flutter code elements for efficient and consistent design.

Go to components section

Part 3 - Animations WIP

Go to animations section

How can I access it?

Product Design

All the design elements are in our main Figma design library https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?type=design&node-id=602%3A59870&t=C5R4CBk47OlWlqCV-1

Please only reference designs within this design library and add to it when necessary by following the guidelines outlined in this styleguide.

Product Management

All the design elements are in our main Figma design library https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?type=design&node-id=602%3A59870&t=C5R4CBk47OlWlqCV-1

These are used within the related screens for each individual client, e.g. One NZ, Aera.

Development

All the design elements are in our main Figma design library https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?type=design&node-id=602%3A59870&t=C5R4CBk47OlWlqCV-1

The ‘Inspect’ tab allows you to view all properties of an element on screen.

How to use Figma

How to use Figma for developers

If you prefer to watch how to use Figma specifically from a development perspective, please watch the following:

https://www.youtube.com/watch?v=ybc2gkvjMDs ~ 10mins

Follow these steps

Sign up for a Figma account: To get started with Figma, you'll need to sign up for a free account using your email address or Google account. (Sign up for Figma)
Explore the Figma interface: Take some time to explore the Figma interface, paying special attention to the layers panel and the inspect panel. These panels will be important for managing your design elements and inspecting their properties.
Create and manage design files: To create a new design file, simply click on the "Create New File" button and choose a template or start from scratch. You can also collaborate with team members by sharing design files and granting access to specific users or groups.
Inspect design elements: Figma's inspect panel allows you to view and copy CSS or other code snippets for each design element. Simply click on a design element to see its properties, including size, position, and color.
Collaborate with team members: Figma makes it easy to collaborate with other team members in real-time. You can invite team members to your design file and allow them to make changes or comments directly in the file. You can also use the comments panel to discuss specific design elements and provide feedback to your team.
Use the design components library: Figma's design components library allows you to easily reuse and maintain consistent design elements across multiple projects. You can create your own components or use ones that are provided by Figma.
Export designs and design specs: Once you're done with your design, you can export it in a variety of formats, including PNG, SVG, and PDF. Figma also allows you to create design specs that include detailed information about each design element, such as size and color.

We put together a playground for developers to switch between different variations of components in Figma. Here is the link to this area.https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?type=design&node-id=1361%3A69988&t=C5R4CBk47OlWlqCV-1

Style Values Documentation:

Introduction: An overview of the style values used in your design system, including color palette, typography, spacing, and other visual elements.
Usage Guidelines: Guidelines on how to use the style values effectively in your designs, including best practices, usage examples, and any restrictions or limitations.
Code Examples: Code snippets and examples of how to implement the style values in code, including CSS, SCSS, or any other relevant code samples.
Design Tokens: Detailed documentation on the design tokens used in your design system, including variable names, values, and how they relate to the overall visual style.

2. Components Documentation:

Introduction: An overview of the components available in your design system, including their purpose, usage, and key features.
Installation and Setup: Step-by-step instructions on how to install and set up the components in your project, including any dependencies or configuration required.
Usage Guidelines: Detailed guidelines on how to use each component effectively in your designs, including recommended patterns, best practices, and usage examples.
API Documentation: Detailed documentation on the available props, methods, and events for each component, including their purpose, usage, and any customization options.
Examples: Code snippets and examples of how to use the components in different scenarios, including variations, layouts, and interactions.

3. Iconography Documentation:

Introduction: An overview of the icons available in your design system, including their purpose, style, and usage guidelines.
Usage Guidelines: Guidelines on how to use the icons effectively in your designs, including best practices, usage examples, and any restrictions or limitations.
Code Examples: Code snippets and examples of how to implement the icons in code, including HTML, CSS, or any other relevant code samples.
Icon Type: Catalog of all the icons available in your design system, including their names, previews, and usage instructions.

4. Logo Documentation:

Introduction: An overview of your brand's logo and its usage guidelines, including size, placement, and color variations.
Usage Guidelines: Detailed guidelines on how to use the logo effectively in different contexts, including digital and print materials, and any restrictions or limitations.
File Formats: Information on the different file formats and resolutions available for the logo, including vector, raster, and print-ready formats.
Branding Guidelines: Detailed documentation on your brand's visual identity, including color palette, typography, and other visual elements, to ensure consistent and cohesive branding across all touchpoints.