OneFish Design System
Hajimemashite, mediumers!!!
Here I will bring an article about OneFish Design System, at the last meeting of Aqua Developer, eFishery Academy. Here’s the explanation.
1. Design System
A design system is a unified language that helps a team solve problems consistently. Pieces of a design system can include guiding principles, brand elements, voice and tone guidelines, code standards, and a UI library. Innovation and technological advancements bring rapid shifts and new discoveries to the market. The user is continuously evolving so the organization needs to build and iterate the product quickly. Building faster and more scalable products while maintaining a consistent and cohesive experience is the new metric for products and businesses to succeed.
This urge to build products better, faster, and more scalable leads to the Design System. Let us consider Outlook, One-drive, and PowerPoint by Microsoft. Each one of these has very different functionalities and is available across different devices. But the experience is consistent and cohesive since it is governed by Microsoft Fluent Design System.
To build a Design System, you can start with the resources you have. Document and understand the existing components, their context, and functionality. Now facilitate these components into primitives in a similar way organism breaks down into atoms. These primitives are used to design interrelated and interdependent parts called UI Patterns. These patterns will be governed by guidelines that are established by analyzing context and functionality.
“Standing on the shoulders of giants”. Organizations like Google, IBM, and Microsoft have an open-source design system. A lot can be taken from these existing design systems. Building a design system is a continuous improvement cycle and evolves as the product matures. If a design system component doesn’t support the required functionality or context, it should be designed and added using the primitives.
The design system is a set of guidelines and reusable components with functionality across different devices that speed up the building, delivering, and iterating process while maintaining product quality. The design system consists of the style guides, components, coding conventions, and policies that govern it, with the fundamental purpose to facilitate the work of the teams.
Wrapping up
A design System is basically a product to design products. It keeps evolving itself as the products mature. As Product Designers, we have the challenge to design faster, better, and scalable and the solution is a Design System.
2. OneFish Design System
OneFish is eFishery’s design language system. This is a collection of guidelines and components which can be used to create simple, intuitive, and beautiful experiences. The Onefish Design System includes the resources to create user interfaces consistent with the Onefish principles, design language, and best practices. User experience focus on interactions, and flows.
3. React js as Basic
React is a JavaScript library for building user interfaces. React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.
Get Febry Heri Setiyawan’s stories in your inbox
Join Medium for free to get updates from this writer.
People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful.
- If you prefer to learn by doing, start with our practical tutorial.
- If you prefer to learn concepts step by step, start with our guide to the main concepts.
Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it.
Tutorial React js
The techniques you’ll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing. If you prefer learning concepts from the ground up, check out our step-by-step guide. You might find this tutorial and the guide complementary to each other.
The tutorial is divided into several sections:
- Setup for the Tutorial will give you a starting point to follow the tutorial.
- The overview will teach you the fundamentals of React: components, props, and state.
- Completing the Game will teach you the most common techniques in React development.
- Adding Time Travel will give you a deeper insight into the unique strengths of React.
You don’t have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can — even if it’s one or two sections. For the complete React js tutorial, you can access this article reference.
This is the article about OneFish Design System which is the last article for Aqua Developer, eFishery Academy. If there are criticisms and suggestions, you can put them in the medium comment column. That is all and thank you.
Ref:
eFishery presentation material, accessed on September 3rd, 2022
https://medium.muz.li/design-system-why-how-and-what-dbf3943e7629, accessed on September 3rd, 2022
https://reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment, accessed on September 3rd, 2022
