Skip to content
plural
Plural DS
Plural DS
Plural DS

Primeros pasos

Te damos la bienvenida a Plural DS, un framework para crear sistemas de diseño personalizados multi marca o producto.
⁠
⁠
⁠
Para comenzar a utilizarlo, puedes elegir la información que se ajusta mejor a tu perfil profesional:

Diseño

Actualmente, en Plural DS se puede consultar y consumir en la herramienta Figma, aunque esta decisión no es excluyente. Seguramente en un futuro contaremos con consumibles para diseño en otras herramientas como Sketch.
La arquitectura de librerías en Figma por aplicación en proyecto es la siguiente:

Master

⁠
Átomos
⁠
: Contiene los componentes atómicos del sistema.
⁠
Moléculas
⁠
: Contiene los componentes moléculas, estos contienen átomos.
⁠
Organismos
⁠
: Contiene organismos o bloques finales para consumidor. Contienen átomos y moléculas.
⁠
Iconos
⁠
: Contiene el set de iconos propios del sistema.
Estas librerías funcionan con decisiones, no soportamos librerías de opciones, no son necesarias estrictamente para trabajar con Plural DS. A pesar de ello hemos incluido una definición de opciones “por defecto” en esta documentación.
Las decisiones sí están definidas en librerías de Figma. Estas librerías son del equipo constructor del sistema. Por defecto nuestros componentes cargan estas decisiones por defecto:

Themes

Color - Sngular Positive
Typography - Sngular Large
Typography - Sngular Medium/Small
Estas librerías de decisiones puede variar de proyecto en proyecto por lo que recuerda comunicarlo al inicio de tu proyecto tus necesidades.
info
Recuerda que nunca enlazamos a opciones.
Estos son los pasos que te ayudarán a crear una instancia del sistema de diseño utilizando en Plural DS.
Instala una instancia de nuestra librería Máster.
⁠
Personaliza
⁠
los componentes para tu marca.
Aprende un poco más sobre
nuestros componentes
⁠
.
¿Dudas o sugerencias?
Escríbenos
⁠
.

Desarrollo

Los componentes de Plural DS están desarrollados siguiendo el estándar de
web components
⁠
y son consumibles vía npm. Estos son los pasos que deberías seguir para empezar a utilizar Plural DS.
Instala
Node.js
⁠
.
Instala los componentes y el theme que necesites usando npm.
Importa los componentes y el theme instalados a tu proyecto.
Para conocer el uso de cada componente consultar la
documentación
⁠
.

Nuestra apuesta por los Web Components

Los Web Components son un conjunto de tecnologías que proporcionan un modelo de componentes basado en estándares para la web. Permiten crear elementos personalizados reutilizables con su funcionalidad encapsulada del resto del código.
Son agnósticos a la tecnología, a la hora de crear un interfaces modulares necesitamos reducir la complejidad y mejorar la reutilización.
Los estándares web están más preparados para el futuro que cualquier framework de Javascript dado. Los frameworks aparecen y desaparecen, los estándares prosperan y evolucionan manteniendo la compatibilidad.
Los Web Components se pueden utilizar con cualquier framework de JavaScript o sin ello. Se puede dar soporte a cualquier equipo de desarrollo con una única fuente de código.
Se trata de construir un conjunto de componentes reutilizables fácilmente mantenible y que pueda utilizarse en cualquier framework de desarrollo.
⁠
Imágen mostrando las diferencias entre un proyecto sin o con web components
⁠
⁠
Los Web Components son piezas de código encapsuladas que permiten su reutilización. Implementar un sistema de diseño con Web Components genera una única biblioteca de componentes que dan soporte a todos los productos independientemente del framework elegido.
Diseño
Master
Themes
Desarrollo
Nuestra apuesta por los Web Components
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.