¿Cuántos colores necesitas para tener normas, cómo debes llamar estos colores y cómo usarlos?

Estoy hablando de un marco de color pequeño que se utiliza en nuestro DS. Primero, como de costumbre, un pequeño repaso de las mejores prácticas, y luego mi bicicleta. Vayamos en orden.





Cuantas flores necesitas

Nuestros "Clientes" de colores son diseñadores de productos, marketing y desarrollo.





¿Qué necesita un simple diseñador para ser feliz?





¿Qué necesita un marketing?





¿Qué necesita el desarrollo?





De acuerdo, ¿cuántos tonos de cada color necesitas? Por cierto, no es la pregunta más fácil.





Método 1





Para hacerlo una vez y eso es suficiente, generalmente hacen esto:





/ - ( ), . - , .





- , — :





2





, , . .





— , 49 , , , , , , , .





, :





— , , , ?





,

- . , , . - .





3





. Default, hover, pressed, .. . , , — - .





-
Color name / Default
Color name / Hover
Color name / Disabled
      
      



. .





. , . , , - .





2 :





— . .





  • Base — ;





  • BG — ;





  • Functional — .





— . .





  • Brand — , ;





  • Promo — -.





, -, . . , .





. — , — , - . , .





.





.





, , .





.





- - , : , . .





, . , , , .





— .





, , .





, , . , .





, - . , , - . , , , . "" .





, , . "" .





, " ", . , .





:





  /  / _  / 
Tea / Solid / Base / Primary_Inverted / Default 
Sugar / Gradient / Brand / Secondary / Up
      
      



Existe la opinión de que los tokens deberían tener el mismo nombre en figma y en el código. Pero no todo es tan sencillo. Los patrones de color en figma y diseño son diferentes. Al hacer todo igual, doblaremos al diseñador y obtendremos curvas del grupo de colores en Figma con las que le resultará difícil trabajar. Por lo tanto, para los colores, vale la pena describir la convención de nomenclatura, que describirá los principios mediante los cuales se nombran los colores en figma y cómo se debe transferir esta nomenclatura al código. Como resultado, todos deberían estar bien.






La idea con los cambios se espiĂł en el esquema de color Opium.Fill .








All Articles