Tener un sistema de diseño es importante
En 2019 enfrentamos un desafío importante. Teníamos que resolver las siguientes preguntas: ¿Cómo podemos estructurar la implementación de nuestros componentes front-end para ser reutilizados en todas las experiencias digitales? ¿Cómo podemos unir las fuerzas de los equipos de desarrollo y diseño para hacer que los elementos se vean como queremos?
Respondimos estas preguntas. Aquí te contamos cómo fue nuestro viaje
Nosotros podemos utilizar ingredientes similares, por ejemplo el pan, queso, proteína y obtener dos aperitivos diametral diferentes entre ellos.
Este concepto aplicado al mundo digital nos deja en claro que podemos estándarizar componentes sin perder la oportunidad de personalizar nuestras aplicaciones.
Atomic Design
Para construir algo debes escoger alguna metodología, em este caso decidimos utilizar la metodología de Atomic Design.
El creador de esta metodología es Brad Frost, el cual nos explica que debemos dividir nuestras experiencias digitales en los siguientes elementos:
Átomos
Los átomos son componentes que no pueden ser divididos en elementos más pequeños sin dejar de ser interactuadle con otros. Un buen ejemplo son las etiquetas HTML comunes, o en Flutter los elementos más simples(por ejemplo el IconButton).
Moléculas
Las moléculas son elementos constituidos por varios átomos, pero ellos no tienen múltiples responsabilidades. Por ejemplo un botón de búsqueda, o por ejemplo un modal.
Profundicemos en Flutter
Ahora que conocemos la teoría lo podemos aplicar en nuestros proyectos en Flutter. Para ello hice un pequeño ejemplo que nos resultará útil para comprender acerca de este tema.
Lo primero que debo decir, es que una muy buena práctica crear una librería independiente para contener en ella tu sistema de diseño. En Flutter podemos crear una librería de forma muy sencilla, tan solo ejecutando el siguiente comando:
flutter create --template=package orgname_design_systemAhora comencemos a analizar como se puede construir cada una de las capas.
La capa de Tokens
Ahora podemos crear nuestra capa de tokens. En grandes empresas el equipo de diseño nos narraría cuales son las definiciones que deben ir en esta capa. Sin embargo, dado que esto es un ejemplo realicé unas definiciones y las ingresé dentro de la capa de tokens, como resultado vemos el siguiente contenido:
Veamos el contenido del archivo colors.dart :
// ..................................................
// .██████╗.██████╗.██╗......██████╗.██████╗.███████╗
// ██╔════╝██╔═══██╗██║.....██╔═══██╗██╔══██╗██╔════╝
// ██║.....██║...██║██║.....██║...██║██████╔╝███████╗
// ██║.....██║...██║██║.....██║...██║██╔══██╗╚════██║
// ╚██████╗╚██████╔╝███████╗╚██████╔╝██║..██║███████║
// .╚═════╝.╚═════╝.╚══════╝.╚═════╝.╚═╝..╚═╝╚══════╝
// ..................................................
import 'package:flutter/material.dart';
class WeincodeColors {
WeincodeColors._();
static const Color statusDanger01 = Color.fromARGB(255, 255, 138, 80);
static const Color statusDanger02 = Color.fromARGB(255, 241, 3, 3);
static const Color statusSuccess01 = Color.fromARGB(255, 99, 255, 208);
static const Color statusSuccess02 = Color.fromARGB(255, 8, 180, 105);
static const Color statusInfo = Color.fromARGB(255, 16, 195, 240);
static const Color statusWarning = Color.fromARGB(255, 250, 217, 54);
static const Color statusDisabled = Color(0xFFCCCCCC);
static const MaterialColor brandPrimaryMat = Colors.deepPurple;
static const Color bGBlack = Color.fromARGB(255, 49, 47, 46);
static const Color bGArena = Color.fromARGB(255, 169, 163, 155);
static const Color bgDarkGray = Color.fromARGB(255, 212, 210, 210);
static const Color bgLigthGray = Color.fromARGB(255, 243, 240, 240);
static const Color bgWhite = Color(0xFFFFFFFF);
static const brandPrimary = Color(0xFF401a71);
static const brandSecondary = Color(0xFFFFFFFF);
static const scale00 = Color(0xFFFFFFFF);
static const scale01 = Color(0xFFF7F7F7);
static const scale02 = Color(0xFFE6E7E8);
static const scale03 = Color(0xFF747779);
static const scale04 = Color(0xFF808285);
static const scale05 = Color(0xFF454648);
static const scale06 = Color(0xFF292929);
}Como puedes ver los nombres de las variables no están atados a ningún componente lo que significa que pueden ser aplicados a cualquier componente. Un ejemplo de una definición errónea es ButtonColor en ese escenario estíamos atando un token a algún componente que lo usa.
Veámos el archivo foundation_colors.dart :
import 'package:design_system_weincode/tokens/colors.dart';
import 'package:flutter/material.dart';
class WeincodeColorsFoundation {
WeincodeColorsFoundation._();
static const Color bgGray = WeincodeColors.bgLigthGray;
static const Color bgDark = WeincodeColors.scale06;
static const Color colorButtonPrimary = WeincodeColors.brandPrimary;
static const Color primaryColor = WeincodeColors.brandPrimary;
static const MaterialColor primaryColorMat = WeincodeColors.brandPrimaryMat;
static const Color colorButtonSecondary = WeincodeColors.brandSecondary;
static const Color colorWhite = WeincodeColors.bgWhite;
static const Color darkTextColors = WeincodeColors.scale06;
static const Color ligthTextColors = WeincodeColors.scale02;
static const Color bodyColor = WeincodeColors.scale04;
static const Color bodyTextColor = WeincodeColors.scale04;
static const Color cardBgColor = WeincodeColors.scale02;
static const Color cardCircularBgColor = WeincodeColors.statusInfo;
static const Color infoBgColor = WeincodeColors.statusInfo;
static const Color warningBgColor = WeincodeColors.statusWarning;
static const Color succcessBgColor = WeincodeColors.statusSuccess01;
static const Color dangerBgColor = WeincodeColors.statusDanger01;
static const Color errorBgColor = WeincodeColors.statusDanger02;
}Como puedes observar existen nombres cómo colorButtonSecondary, bodyTextColor. Por lo tanto, evidentemente en esta capa realizamos las correlaciones existentes.
Gracias por leer. Ponte en contacto con nosotros si tienes dudas. Equipo de desarrollo.
Recuerda seguirnos en nuestras redes sociales.