Hire a designer

Explore Orbit’s Mission and Goals for Consistency

Orbit has a clear and essential mission: to create a sense of order and consistency across Kiwi.com's products, while enhancing the user experience. Having a cohesive design is important because it helps users feel at ease and confident as they move between different applications and services. When everything adheres to the same design principles, it reduces confusion and makes navigation smoother. Orbit accomplishes this by offering a carefully selected set of components that are designed and tested to meet Kiwi.com's high standards.

Another important goal of Orbit is to streamline the design and development process. The design team has established clear guidelines and priorities for contributions, which means that anyone looking to enhance Orbit can do so with a clear understanding of what’s needed. By encouraging community involvement and feedback, Orbit not only improves its offerings, but also cultivates a sense of ownership among contributors. This collaborative spirit is essential for fostering innovation and ensuring that the design system evolves to meet the changing needs of users.

Identify Key Components and Tokens in Kiwi’s Design System

In the Kiwi Design System, components and tokens are the building blocks that bring the design to life. Components are reusable UI elements, such as buttons, forms and navigation menus, that can be mixed and matched to create various interfaces. These components are designed to be flexible yet consistent, meaning they can adapt to different contexts while maintaining a recognizable look and feel.

Tokens are the essential elements that form the foundation of the design system. They include aspects like colors, typography, spacing and shadows. By clearly defining these tokens, Kiwi ensures that every design decision is based on a shared set of principles. For instance, once the color palette is established, designers can consistently apply those colors across their projects, creating a unified appearance. This organization not only simplifies the design process but also makes it easier to maintain and update the system when needed. Understanding these components and tokens is important for anyone looking to navigate the Kiwi Design System effectively.

Install Required Tools and Libraries

Once you’ve got your basic tools, the next step is to install the libraries you’ll be using. If you’re working on Orbit for SwiftUI, adding the Orbit package is straightforward. Just include it in your project’s dependencies and you’re good to go. For the React side of things, you’ll want to install the orbit-components library using npm. This allows you to import all the necessary components into your application effortlessly.

Make sure to check the documentation, as it provides useful information on how to install everything. The Orbit documentation is detailed and includes guides for seamlessly integrating components. Sticking to these instructions is a wise choice to avoid any problems down the road.

Configure Tailwind CSS and Theming for Orbit

Now that you have your tools and libraries set up, it's time to get into the configuration, starting with Tailwind CSS. Since Orbit uses Tailwind for styling, you'll need to install it in your project. Make sure to add Tailwind CSS as a dependency and follow the setup instructions outlined in the Orbit documentation.

Once you have Tailwind set up, you can begin tailoring your themes to suit your project's requirements. This is where the real fun begins; with Tailwind's utility-first approach, you can quickly create responsive designs. The OrbitProvider component will become invaluable, as it lets you define your theme and apply it consistently across all your components.

By taking the time to properly configure your environment, you set yourself up for a smoother development experience. You'll find that having everything in place not only saves time but also helps you maintain consistency throughout your project. With the right setup, you’re well on your way to creating beautiful, functional UI components with Orbit.

Implement Component Override Logic and Grouping

Component override logic plays a key role in allowing designers to customize and modify components without having to start from scratch. For example, if you have a button that needs some tweaks like changing its color or size, you can easily adjust those properties while preserving the original design. This method encourages creativity and helps keep everything organized. Plus, grouping components makes things even easier. By sorting them based on their functionality or design context, team members can quickly find what they need, making it simpler to select the right component for any project.

Optimize Bitmap Assets for Performance

Bitmap assets play a significant role in the visual appeal of any design system, but they can also be a performance bottleneck if not handled properly. Optimizing these assets means ensuring they are the correct size, format and resolution for their intended use. For example, using PNG or JPEG formats appropriately based on the type of image can drastically reduce load times and improve the overall user experience. It’s also essential to compress these images to minimize file size without sacrificing quality. By maintaining performance standards, designers can create visually stunning applications that don’t compromise on speed or efficiency.

Maintain Clear Project and File Structure

Maintaining a clear project and file structure is essential when building Kiwi’s Design System. It might seem like a small detail, but having an organized setup can prevent a lot of confusion later on. By grouping related files and using consistent naming conventions, team members can easily find and understand the purpose of each component. For example, creating a separate project file for each flow and minimizing the number of nested folders can make navigation much simpler. Adopting these practices not only makes the design system easier to manage but also lays a strong foundation for future growth and scalability.

In the end, applying these best practices will help Kiwi’s Design System evolve smoothly while ensuring that it remains a valuable resource for all designers and developers involved.

Use Figma’s Version History to Track Iterations

Figma’s version history feature is a great asset for tracking the evolution of design components. Every time a change is made, Figma automatically saves that version, creating a chronological log that designers can refer back to. This is particularly useful during collaborative projects where multiple designers might make alterations simultaneously. By leveraging this function, the team can easily revisit previous iterations, compare designs and understand the rationale behind certain decisions. It’s like having a time capsule of your work that you can explore whenever necessary.

It's important to recognize that while Figma’s version history is useful, it’s mainly available to those with editor permissions. This can sometimes be a challenge for developers who want to understand how the design has changed over time. To address this issue, having clear documentation and good communication practices is key. This way, everyone can stay informed and have the context they need, even if they can't directly access the version history.

Organize Components and Files for Version Control

A clear file structure is essential for efficient version control. When it comes to a design system, the aim is to reduce clutter and confusion. At Kiwi.com, the design team has taken a hybrid approach, organizing components based on how stable they are and their stage of development. This means they keep stable components, which change infrequently, separate from those that are always evolving. This method makes it much simpler to manage updates and identify which files need some attention.

Having a clear naming convention for files and components really helps keep everything organized. For example, incorporating a versioning system in your file names, like X.Y (where X represents major updates, and Y stands for minor changes), makes it easier to track and navigate through them. This straightforward structure not only supports version control but also improves collaboration, as everyone knows where to find the latest files and how to reference them correctly.

Establish Domain Libraries for Modular Development

Creating domain libraries is another effective strategy for managing versioning within the Kiwi Design System. By segregating components based on their specific domains like Search, Booking and Manage My Booking the design team can focus on iterative development without overwhelming the broader design system. Each domain library serves as a modular unit that can evolve independently, making it easier to introduce new features or make changes without disrupting the entire ecosystem.

This modular approach makes it easier to document processes and communicate clearly within the team. Designers can quickly grasp how different components in a specific area work together, while developers can see the dependencies and connections among various UI elements. By setting up these domain libraries, we not only make versioning more efficient but also promote a more collaborative and productive development process, helping the team create a smooth user experience throughout the mobile app.

Report Issues and Suggest Features

If you come across a bug while using Orbit or have an idea for a new feature that could enhance functionality, don’t hesitate to speak up! The process is straightforward. Most repositories have a dedicated section for issues where you can detail what you encountered. When reporting an issue, including as much context as you can is helpful. Describe the steps that led to the problem and if possible, share screenshots or error messages. This not only aids the developers in understanding the issue but also speeds up the resolution process.

As for suggesting features, think of how your idea can improve usability or enhance the overall aesthetic of the design system. Are there components that feel clunky? Is there something you wish Orbit could do that it currently doesn't? Your insights can drive the development of new features that benefit the entire community.

Follow Contribution Guidelines and Priorities

Contributing to Orbit is an exciting opportunity, but it’s important to familiarize yourself with the contribution guidelines laid out by the maintainers. These guidelines help streamline the process and ensure that everyone is on the same page. They typically cover how to submit issues, propose features and create pull requests.

Having clear priorities helps you understand what the team is currently focused on. For instance, they may be concentrating on achieving API consistency or standardizing design variations. By aligning your efforts with these goals, you can create a more meaningful impact and ensure your work supports the team's ongoing development. Engaging with the community and embracing these practices not only enhances your own experience but also strengthens Orbit as a whole. Get involved, share your thoughts and be a part of this ongoing journey!