Anima te permite convertir cualquier diseño de Figma en código HTML & CSS, React o Vue.js en pocos pasos 😎! Tienes la opción de descargar el código para todo tu diseño, una sola pantalla o para un componente individual.
❗️Para empezar, necesitarás una cuenta en Anima (con un plan Pro/Business si planeas exportar o copiar el código).
Si deseas exportar componentes de Figma a React.JS de forma gratuita - aprende cómo hacerlo aquí.
Salta a una sección:
Paso 1: Sincroniza tu Diseño con la Aplicación Web de Anima
Opción 1: Previsualiza y Sincroniza tu diseño
El primer paso para utilizar Anima es sincronizar tu diseño:
Obtén el plugin de Anima para Figma.
Abre el diseño de Figma que creaste utilizando Anima (Si no tienes uno, aquí tienes un Archivo de Muestra).
Selecciona los "Frames" que deseas traducir en código.
Previsualiza y sincroniza tu diseño de Figma con tu proyecto en Anima:
Selecciona el proyecto de tu equipo y haz clic en Preview en la esquina superior derecha del panel del complemento para previsualizar tu prototipo en una ventana separada.
Una vez que estés satisfecho con la vista previa, haz clic en Sync (en la parte inferior del plugin).
o en Get Code en la esquina superior derecha para guardar tu proyecto y exportar tu código.
A continuación, elige el framework de código que deseas utilizar y selecciona el proyecto en tu equipo correspondiente o, si aún no lo has hecho, crea uno nuevo.
Una vez que elijas el framework de código, tu proyecto se sincronizará con tu cuenta de la aplicación web de Anima.
Paso 2: Exportar código desde la Aplicación Web de Anima
Para ver el código de tu diseño, abre tu proyecto sincronizado en la aplicación web de Anima y ve a la opción Code Mode.
Una vez en el Code Mode, puedes seleccionar entre un componente (selección), una pantalla o todo el proyecto. Para cambiar el framework de código, haz clic en el botón ⚙️:
Selecciona cualquier componente para inspeccionar instantáneamente su código.
Una vez que estés satisfecho con el código, puedes exportar el código para todo el proyecto ("Full project"), la pantalla actual ("Current screen") o una selección de componentes individuales ("Selection") haciendo clic en Download Zip. También puedes abrir una selección o una pantalla actual en CodeSandbox: 👇
Cuando la descarga esté completa, descomprime el archivo para ver el paquete de código 🚀.
¿Qué obtienes en el paquete de código HTML?
El paquete de código descargado se guarda en tu computadora como un archivo zip en la ubicación que seleccionaste. Dentro de este archivo zip, encontrarás todos los archivos de tu diseño (esto incluye los archivos HTML, CSS, imágenes y tipografía).
Una vez que los archivos estén descomprimidos, puedes previsualizarlos localmente en el navegador haciendo doble clic en el archivo HTML. Podrás ver todas tus Capas Inteligentes (Smart Layers) y las interacciones, ¡igual que el producto final!
❗️Nota:
Cada pantalla recibe su propio archivo HTML y CSS.
Las pantallas con breakpoints (puntos de quiebre) comparten el mismo archivo HTML y CSS.
¿Qué incluye el paquete de código de React?
El paquete de código incluye todos los archivos de código relevantes para tu diseño, incluido el código de los componentes individuales.
Una vez descomprimidos, puedes previsualizar los archivos localmente en el navegador. Podrás ver los Smart Layers y las interacciones de tu diseño, ¡igual que en el producto real!
💁¿Quieres revisar el código por ti mismo? Descarga nuestro paquete de código de ejemplo para React.
¿Qué incluye el paquete de código de Vue?
Guía de Estilo: Hemos creado un método para generar código que elimina colores repetitivos, estilos de texto y otras propiedades CSS, que se convierten en clases y variables CSS reutilizables.
Reutilización de Código en Vue: Los elementos repetitivos se detectan en la estructura del DOM y los componentes se extraen automáticamente.
Layout: Hemos optimizado el código para utilizar el Layout de CSS Flexbox. Esto significa que hemos fusionado, agrupado o desagrupado capas de tal manera que el resultado final sea un fragmento de código limpio.
💁Lee esta publicación para obtener más información sobre el código de Vue.js.