Design Ops

📄️ About us

📄️ Accessibility

1. Every interactive element should be focusable

📄️ Atomic design

Atomic design is a methodology composed of distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

📄️ Boolean-traps

Every time you have to define a prop you should think about how it adapts with other existant props and future possible features.

📄️ Bugs

We've simplified all our processes to 5 maximum steps.

📄️ Code-of-conduct

Foster open, respectful and inclusive discussions

📄️ Collaboration model

Every user can influence on the direction of the project through proposals, ideas and bugs reporting.

📄️ Colour Theming Multiplatform

Write a one line description here

📄️ Communication

We value every effort to bring designers and developers closer together. The language you use should always be correct but not at the expense of providing clarity.

📄️ Community

SUI-Components is conformed by the Github public frontend Adevinta Spain's Community. It hosts all public opensource projects.

📄️ Components

Adevinta Spain uses React JS in all its different web pages.

📄️ SUI is Open Source, and anyone can collaborate with it

We've simplified all our processes to the very minimum to have you covered with just a few steps.

📄️ Controlled Uncontrolled Components

<!-- Lo que se espera de esta sección:

📄️ Deprecating components in Figma

Watch a complete explanation in Spanish here

📄️ Deprecate components in code

<!-- Lo que se espera de esta sección:

📄️ Design System

Create, unify and evolve great experiences

📄️ DesignOps team

We take care of all operational efforts to enable Designers and Developers to focus on improving our products.

📄️ Discussions

We use the feature Discussions from Github to organise most of the conversations around SUI Components: New component, proposals, doubts, weeklies, etc.

📄️ Definition of Done (DoD)

This definition is a checklist of details to take into consideration before pushing any bug, feature or new development into production for SUI.

📄️ Definition of Ready (DoR)

This definition is a checklist of details to consider before commiting to work on any bug, feature or new development for SUI.

📄️ Feedback loops

- Record all conversations in github discussions.

📄️ Figma's Files

At Adevinta we have a common File Starter to unify navigation around different marketplaces.

📄️ Figma's Teams & Projects

At Adevinta we have a common Team & Projects organization to speed up sharing user flows around different marketplaces.

En Adevinta disponemos de UI Kits en Team Libraries de Figma para acelerar los procesos de diseño. Están estructurados con nuestro sistema atómico y nos permiten tener una estructura reutilizable, escalable y que nos proporciona consistencia en nuestros productos.

📄️ Figma

Figma is our official tool for Design, Handoff and Prototyping.

📄️ Flexibility

The balance between flexibility and standardisation of our systems is a recurrent topic in our community, hence we revisit our agreements 2 times a year, and 3 things are clear every time we discuss it:

📄️ Functional-Components

📄️ Grid

Grid en SUI

📄️ Design System Guidelines

Our Brand guidelines and UI guides are housed in Lingo, not in Figma.

📄️ Welcome!

📄️ Hooks

<!-- Lo que se espera de esta sección:

📄️ Implementation

- Engineer just enough of a solution

📄️ Improvements

We've simplified all our processes to 5 maximum steps.

📄️ Initialise state using props

📄️ Innovation

- Avoid big bangs: Make small experiments that provide data

📄️ Judgment and Deciosion making

There are many correct ways to do things and solve problems. Many times we have to make decisions without the help of best-practice examples to follow and move forward.

📄️ Layout

El Layout es la estructura del contenido principal en el diseño. Usamos diferentes Layouts para diferentes requisitos de diseño.

📄️ Meetings

Design Systems Weekly

📄️ Mobile 1st

Mobile first, significa que comenzamos el diseño de producto desde el extremo Mobile que cuenta con más restricciones y posteriormente expandimos las funciones para crear una versión Tablet y Desktop.

📄️ Motion

Our Motion system improves the narrative of our products.

📄️ Naming-convention

Naming is hard, please follow these rules

📄️ Node NPM

<!-- Lo que se espera de esta sección:

📄️ Vision and Mission

We have a single Vision for the team, and unique missions that give support to it from different angles.

📄️ Patterns

📄️ Performance dashboard

We track our progress in this performance dashboard, only available for Adevintians.

📄️ Plugins

📄️ Props spreading

<!-- Lo que se espera de esta sección:

📄️ Props

<!-- Lo que se espera de esta sección:

📄️ QA and UX checks

Guidelines for quality assurance

📄️ Welcome

In this playbook you will find all the information to understand everything about our Design System.

📄️ React components

Every react component declaration have the same structure: receive arguments (called props) and returns its virtual dom rendered elements.

📄️ Release process

<!-- Lo que se espera de esta sección:

📄️ Requirements and dependencies

<!-- Lo que se espera de esta sección:

📄️ Reset and Normalise

<!-- Lo que se espera de esta sección:

📄️ Resources

📄️ Retrocompatibility

<!-- Lo que se espera de esta sección:

📄️ Roadmap

<!-- Lo que se espera de esta sección:

📄️ S.O.L.I.D.

Single Responsibility Principle (SRP)

📄️ SUI Components

The components from this library are at the core of everything we do for web: Each of our brands uses its atoms and molecules, and also the tools and theme to build its own library of components.