Importar desde Figma a Base44

​

Antes de importar desde Figma

• Asegúrate de estar trabajando en un archivo de Figma Design. FigJam, Slides y otros tipos de archivo no están soportados.
  
• 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.

​

Estructurar tu layout de Figma

• 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.
  
• 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.
  
• 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

• 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.
  
• 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.
  
• 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.
  

​

Fuentes, efectos y otras limitaciones

• 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 Visual 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.

​

Construir el resto de tu app

• 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.

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.