El proceso de creación de un componente es el mismo que el de crear un elemento desde cero. Esta vez, voy a crear un componente de botón de interfaz de usuario como ejemplo.
Como todo, empieza por un marco.
Imagine el marco como un lienzo en blanco que puede modificar para convertirlo en cualquier componente que desee.
Determina la dimensión del componente que vas a crear. Aquí, estoy creando un botón para un dispositivo móvil. Delineé el marco para que pudiera ser visible en esta página.
Una plantilla para el botón.
Una vez que haya creado su marco, podrá editarlo como desee. A continuación se muestran algunas acciones que podría considerar realizar:
Determine el aspecto que tendría su componente en términos de color: La determinación del color del componente no tiene por qué ser solo el color principal del componente. También deberías considerar el ataque y el efectos que debe tener el componente. Mi botón no tiene trazo y tampoco tiene efecto ya que es un botón principal.
Colorea la plantillaAumente el radio de la esquina para hacerlo más atractivo a los ojos de los usuarios. Al arrinconar nuestro componente cuando es necesario, hace que nuestro diseño sea menos rígido y más acogedor. También hará que nuestro diseño sea más ordenado y minimalista. Recuerde, el valor máximo para el radio de la esquina es 50% de la altura del elemento..
Añade curvas para resaltarlas.
Inserte un campo de texto si es necesario
En este caso, cada botón de nuestra aplicación tendría muchos tipos de texto. Por lo tanto, necesitamos crear un campo de texto donde podamos ingresar el tipo de texto que nos gustaría.
Añade un texto si solo es necesario
Tenga en cuenta que debe considerar el espaciado, el tamaño de fuente, la alineación del texto y del componente, y el tipo de cuadro de texto para su componente si está utilizando un campo de texto.
Para simplificarlo, aquí hay ejemplos de los tipos de cuadros de texto que están disponibles en Figma. Estoy usando un elemento de formulario de interfaz de usuario como ejemplo.
Ancho automático — El cuadro de texto envuelve el texto de forma ordenada. Este tipo de cuadro de texto se utiliza cuando se combina con un componente de diseño automático que se expande horizontalmente para que parezca sencillo y no estropee la posición de los componentes en su interior.
Cuadro de texto de ancho automáticoAltura automática — El cuadro de texto se ajusta según el número de líneas que ocupará el texto. Determinamos el ancho del cuadro de texto. El cuadro de texto de altura automática se utiliza junto con un componente que se expande verticalmente.
Cuadro de texto de altura automáticaTamaño fijo – El nombre de este cuadro de texto ya se define por sí solo. Usamos este tipo de cuadro de texto cuando ya conocemos la cantidad máxima de caracteres o ya conocemos el tamaño exacto de los componentes. Es perfecto cuando queremos que el tamaño de nuestro componente sea inmutable.
Cuadro de texto de tamaño fijo
Crear el componente
Crear el componente a partir del elemento que hemos creado es sencillo. Podemos simplemente hacer clic en el botón Crear componente o simplemente hacer clic en Ctrl + Alt + K para generar un componente rápidamente a partir de un elemento seleccionado.
Haga clic derecho en el componente para acceder al menú.
Agregue variantes para mejorar la realidad del diseño con gestos naturales.
Los gestos comunes que las personas usan cuando usan una aplicación son presionar, desplazarse y hacer clic. Después de haber creado nuestro componente, tendremos la opción de agregar variantes a nuestro componente.
Agregue variante en el menú del lado derecho cuando haya hecho clic en el componente
Es fundamental prestar atención a los pequeños detalles porque esos detalles crearán una tremenda diferencia cuando creemos un prototipo a partir de nuestros componentes. Haría que nuestro diseño fuera mucho más realista y vivo.
Al crear un botón para un dispositivo móvil, debemos considerar tres variantes: cuando el botón no se toca, se hace clic y se desactiva. Prefiero llamar al botón intacto botón predeterminado.
De arriba a abajo: predeterminado, hecho clic, deshabilitado
Además de crear las variantes y diseñarlas, asegúrese de nombre ellos adecuadamente. Nombra tus variantes con un significado claro, nómbralas como parecen ser. Nombrar sus variantes con nombres aleatorios podría generar un error en Figma y le confundiría usarlo usted mismo.
Nombra tus variantes como parecen ser