En este artículo le diré cómo hacer un componente en Figma que sea adecuado para exportar a código. En Figma, puede seleccionar nuestro componente y usar el complemento para generar el código terminado.
UPD
Figma es una aplicación que se especializa en proporcionar un paquete completo de servicios y funciones para desarrollar interfaces de diversa complejidad. La aplicación en sí es multiplataforma y se puede utilizar tanto como aplicación de escritorio como en un navegador. En esencia, es un editor de gráficos vectoriales que admite una gran base de complementos. Desde el principio, apoyó la generación de estilos y código CSS para dispositivos móviles. Una gran ventaja es el almacenamiento de diseños en la nube y la capacidad de trabajar simultáneamente en un proyecto con todo un equipo de diseñadores. Para los desarrolladores, existe una exportación conveniente de recursos (por ejemplo, iconos vectoriales) a formatos PNG / SVG / JPG, así como la exportación de páginas a un archivo PDF.
Los complementos en Figma sirven para facilitar la tarea del diseñador y desarrollador: extender la funcionalidad de la aplicación básica de Figma con extensiones personalizadas (complementos).
Dibujemos una vista de hoja con un icono y generemos un diseño.
Así es como se ve la estructura aproximada de nuestro elemento de lista: un icono a la izquierda y luego texto.
Esta será la estructura de nuestro componente: el conjunto vertical de elementos que se nos ocurrió anteriormente.
Entonces, descubrimos la estructura, entendimos lo que debemos hacer aproximadamente, ahora procedemos directamente al diseño. Para hacer esto, tomaremos un elemento y lo haremos basado en los componentes de Figma y le aplicaremos el diseño automático. Primero, combinemos el texto y el ícono, agreguemos algo de relleno y alineemos en el medio y a la izquierda. Resulta así ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
Dibujé el diseño como en el ejemplo anterior, hice el diseño, distribuí los bloques y, usando el diseño automático, alineé todo como necesitaba. Generé el código, corrigí algunos de los matices con imágenes e íconos, y como resultado recibí una tarjeta de producto terminado. Obtenga más información sobre Flexbox aquí .
Mi marcado generado está disponible aquí . Puedes mirar y probar por ti mismo.
Espero que mi artículo te sea útil y que sea mucho más fácil de componer. Pero si no, le pido que no reste el artículo, sino que me ayude a refinarlo a una forma digerible dejando sus comentarios.