Skip to main content

​
Antes de importar desde Figma

Preparar tu archivo de Figma correctamente ayuda a Base44 a leer tu diseño y recrearlo como un layout funcional.
  • Asegúrate de estar trabajando en un archivo de Figma Design. FigJam, Slides y otros tipos de archivo no están soportados.
    Selector de tipo de archivo de Figma con Design resaltado, junto a FigJam, Slides, Buzz, Site y Make

    Tipo de archivo Figma Design

  • Selecciona un solo frame o sección que quieras importar. No uses un documento completo o enlace a nivel de página.
  • En Figma, haz clic en Share y bajo Who has access, configura el enlace como Anyone with the link – Can view. Copia el enlace del frame o sección seleccionado y pégalo en Import from Figma en Base44. Después de que la importación se complete, puedes regresar los permisos del archivo de Figma a privado si lo prefieres.
Import from Figma se enfoca en el frame o sección seleccionado. Otras partes del archivo de Figma no se traen a Base44 a menos que las importes por separado.

​
Estructurar tu layout de Figma

Una estructura clara en Figma facilita que Base44 construya un layout responsivo que coincida con tu intención.
Una página principal bien estructurada con secciones claras y componentes consistentes da los mejores resultados al extender el diseño a una app completa.
  • Divide la página en secciones lógicas: Envuelve contenido relacionado (por ejemplo, un hero, fila de funciones o footer) dentro de frames o grupos para que cada área esté claramente definida.
  • Usa auto layout para jerarquía: Aplica Auto Layout a componentes como cards, barras de navegación y bloques de contenido repetidos. Por ejemplo, una info card con imagen, título y descripción debe agruparse como Frame o Group, o preferiblemente Auto Layout. Esto ayuda a Base44 a entender cómo se relacionan los elementos y cómo deberían redimensionarse.
    Lienzo de Figma con dos capas seleccionadas y Add auto layout resaltado en el menú contextual

    Añadir auto layout a dos elementos seleccionados

  • Mantén el anidado significativo: Agrupa elementos que pertenecen juntos (por ejemplo, imagen + título + descripción en una card) y evita anidamientos profundos e innecesarios que no reflejen la estructura visual.
    Lista de capas de Figma con Frame 12 que envuelve a Paragraph y Frame 11, con el panel Auto layout activo

    El grupo de frame después de aplicar auto layout

  • Alinea y espacia de forma consistente: Usa padding, gaps y alineación consistentes dentro de tus frames para que Base44 pueda preservar tu espaciado y jerarquía.

​
Trabajar con vectores y formas

Limpiar los elementos vectoriales antes de importar hace que el posicionamiento y renderizado sean más precisos. Aplanar y simplificar vectores reduce sorpresas en cómo los elementos se alinean, escalan y renderizan una vez en Base44.
  • Aplana vectores complejos: Si un vector está construido de muchos paths separados (por ejemplo, un ícono hecho de varias formas), aplánalo en un solo vector siempre que puedas.
    Un icono de estrella formado por seis capas vectoriales separadas, con Flatten resaltado en el menú contextual

    Aplanar un icono de varios trazados en un solo vector

  • Outline strokes antes de aplanar: Para líneas, círculos, estrellas y formas similares:
    • Usa Outline Stroke luego aplana el resultado en un solo elemento vectorial.
  • Quita elementos ocultos: Elimina capas que estén completamente ocultas o muy fuera del canvas para que no interfieran con el layout importado.
    Lista de capas de Figma con una capa de imagen seleccionada abajo, con los iconos de bloqueo y visibilidad

    Una capa de imagen seleccionada en Figma

  • Simplifica los fills: Si un elemento tiene varios fills, mantén solo lo que realmente necesitas. Base44 solo importa el último fill de un elemento.
    Panel Fill de Figma con cinco fills en un elemento: tres imágenes, un relleno rojo y un degradado lineal

    Un elemento con cinco fills apilados

​
Fuentes, efectos y otras limitaciones

Algunas partes de tu diseño de Figma se adaptan durante la importación para que el layout resultante funcione de forma fiable en Base44.
  • Fuentes:
    • Solo las Google Fonts están totalmente soportadas.
    • Las fuentes personalizadas se reemplazan con una fuente por defecto durante la importación. Puedes actualizar la tipografía después dentro de Base44.
  • Efectos de diseño que pueden no preservarse con exactitud:
    • Filtros de imagen
    • Varias capas de fondo en un solo elemento
    • Variables y estilos basados en variables
  • Afinaciones de layout:
    • Afina el espaciado, responsividad e interacciones después de importar usando el chat de IA o el modo Edit.
    • Si algo no luce bien, ajusta la estructura directamente en Base44 o actualiza tu archivo de Figma e importa de nuevo desde un frame más limpio.
Si tu diseño depende mucho de efectos no soportados o configuraciones complejas de variables, espera diferencias visuales después de la importación y planea refinar el resultado dentro de Base44.

​
Añadir una página desde Figma

Una vez que tu app está en el editor de la app, puedes seguir añadiendo frames de Figma como páginas nuevas. No estás limitado a la importación inicial: cada frame que añades se convierte en una página nueva de tu app. Para añadir una página desde Figma:
  1. Abre tu app en el editor de la app.
  2. En el campo del chat, haz clic en el icono +.
  3. Selecciona Add page from Figma.
  4. Pega un enlace al frame de Figma que quieres importar.
  5. Haz clic en Add page.
Base44 genera una página nueva a partir de tu diseño y la añade a tu app. Se aplican los mismos requisitos de configuración del archivo: asegúrate de que el enlace de tu frame esté configurado como Anyone with the link – Can view antes de añadirlo.
Necesitas acceso de Editor para añadir páginas desde Figma. Los Viewers no pueden añadir páginas. Además, la app no puede estar procesando otro prompt al mismo tiempo. Espera a que termine cualquier generación activa antes de añadir una página.
Importar frames del mismo archivo de Figma mantiene las fuentes, los colores y el espaciado consistentes entre páginas. Después de añadir una página, pide al chat de IA que conecte la navegación entre tus páginas existentes y la nueva.

​
Construir el resto de tu app

Una vez que tu frame de Figma se importa, puedes tratar la nueva página como la base de una app o sitio web completo.
  • Usa la página importada como tu página principal y referencia principal para estructura, layout y lenguaje visual.
  • Pide al chat de IA:
    • Identificar qué páginas adicionales faltan (por ejemplo, About, Pricing, Blog o Contact).
    • Crear nuevas páginas que sigan el mismo lenguaje de diseño y principios de layout.
    • Conectar botones, menús y enlaces en la página principal con las nuevas páginas internas.
Puedes usar un prompt como:
Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.
Si ves patrones repetidos en tu diseño importado (como cards, filas de funciones o bloques de call-to-action), menciónalos en tu prompt para que la IA pueda reutilizarlos en las nuevas páginas.
Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la versión en inglés.