Importar desde Figma

​

Iniciar una nueva app desde Figma

1. Ve a Base44.
2. Haz clic en el icono + en el cuadro de prompt.
3. Haz clic en Import from Figma.
4. Haz clic en Connect to Figma.
5. Sigue las instrucciones en pantalla para dar acceso a Base44 a Figma.
6. Pega tu enlace de Figma y haz clic en Generate.

​

Añadir una página desde Figma

1. Abre tu app en el editor de app.
2. En el chat de IA, haz clic en el icono + y selecciona Add page from Figma.
3. En Figma, haz clic derecho en el frame o sección que quieres importar.
4. Elige “Copy/Paste as”, luego selecciona “Copy link to selection”.
5. Pega el enlace en el diálogo y haz clic en Add page.

​

Guías de importación de Figma

​

Estructurar tu diseño de Figma

• Divide la página en secciones lógicas: Envuelve contenido relacionado (por ejemplo, un hero, una fila de funciones o un pie de página) dentro de frames o grupos para que cada área de la página esté claramente definida.
• Usa auto layout para la jerarquía: Aplica Auto Layout a componentes como tarjetas, barras de navegación y bloques de contenido repetidos. Por ejemplo, una tarjeta de información con una 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 entre sí y cómo deben cambiar de tamaño.
  
• Mantén el anidamiento significativo: Agrupa elementos que van juntos (por ejemplo, imagen + título + descripción en una tarjeta) y evita el anidamiento profundo e innecesario que no refleja la estructura visual.
  
• Alinea y espacia de forma consistente: Usa relleno, espacios 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 a partir de muchos caminos separados (por ejemplo, un icono hecho de varias formas), aplánalo en un solo vector siempre que puedas.
  
• Esboza los trazos antes de aplanar: Para líneas, círculos, estrellas y formas similares:
  • Usa Outline Stroke y luego aplana el resultado en un solo elemento vectorial.
• Elimina elementos ocultos: Elimina las capas completamente ocultas o empujadas lejos del lienzo para que no interfieran con el diseño importado.
  
• Simplifica rellenos: Si un elemento tiene múltiples rellenos, mantén solo lo que realmente necesitas. Base44 solo importa el último relleno en un elemento.
  

​

Fuentes, efectos y otras limitaciones

• Fuentes:
  • Solo Google Fonts son totalmente admitidas.
  • Las fuentes personalizadas se reemplazan con una fuente predeterminada durante la importación. Puedes actualizar la tipografía después dentro de Base44.
• Efectos de diseño que pueden no preservarse exactamente:
  • Filtros de imagen
  • Múltiples capas de fondo en un solo elemento
  • Variables y estilos impulsados por variables
• Refinamientos de diseño:
  • Afina el espaciado, la capacidad de respuesta y las interacciones después de la importación usando el chat de IA o el modo Visual Edit.
  • Si algo no se ve 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 de inicio y referencia principal para la estructura, diseño y lenguaje visual.
• Pide al chat de IA que:
  • Identifique qué páginas adicionales faltan (por ejemplo, About, Pricing, Blog o Contact).
  • Cree nuevas páginas que sigan el mismo lenguaje de diseño y principios de layout.
  • Conecte botones, menús y enlaces en la página de inicio a 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.