Figma a WCF

Objetivo:

Crear una serie de buenas practicas para crear componentes para WCF

Alcance:

Aplica solo a los componentes que van a ser utilizados en WCF

Componentes

Crear el componente con todas sus partes con Autolayout

El set de componentes debe tener Autolayout para evitarnos problemas a la hora de visualizar el componente

Los iconos que vienen con frame por defecto, cambiarlo por Autolayout

Alineación de texto

La alineación al eje central de un frame que contiene texto, sobre escribe cualquier alineación que se le haya dado al texto en si

Visualización en figma.

El componente padre que contiene a los 3 textos “main” esta alineado al medio

Los textos “main” están alineados a los lados y al medio

Esta es la visualización en WCF del componente visto arriba

En caso de querer justificar diferentes textos hacia alguno de los lados, es necesario alinear el contenido hacia la izquierda.

Solo es posible alinear texto a la derecha seteando en Fill y seleccionando allign right en las propiedades del texto.

Tener en cuenta que si tenemos un texto el Fill y a la derecha un botón de acción, el hecho de que el texto este el Fill puede llevar al componente a dos líneas

Booleanos o Switches

En figma vamos a crear booleanos comunes que sus propiedades serán on y off, pero además vamos a poder “concatenarlos” con otros booleanos que van a tomar efecto una vez agreguemos custom CSS o JS

Para agregar mas propiedades booleanas sobre un mismo objeto los escribimos con un guion de por medio

Ejemplo: showicon-borde-desactivado

Para que los booleanos que no son showicon (en este caso) tomen efecto, se deberá modificar vía custom CSS o JS

Links

Los links nos van a permitir conectar atributos de diferentes componentes

Ejemplo:

<script> 

let linkdata=[{oriAttr:”variant”, oriValue:”1″, destTagId:”comp-testing120240620″, destAttr:”estrella”, destValue:”off”}]; 

wcf_allInstances.setLinkData (“comp-testing120240620”, linkdata); 

</script> 

Este codigo va a funcionar de tal manera que cuando cambiermos a la version 1 del componente en cuestión, el atributo que consiste en una estrella, se apague


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

7 + 0 =