---
title: Marco (Frame)
description: Envuelve imágenes y demos en un contenedor con borde estilizado y leyendas opcionales. Hace que las capturas de pantalla destaquen.
---

Frame envuelve imágenes y demos en un contenedor con borde y leyendas opcionales.

Las capturas de pantalla muestran la interfaz en inglés.

*Las capturas de pantalla en esta página pueden mostrar la interfaz en inglés.*

Usa Frame cuando quieras:
- Dar a las capturas de pantalla e imágenes de interfaz un aspecto acabado
- Añadir leyendas para explicar lo que los lectores están viendo
- Distinguir la salida de una demo del contenido regular
- Crear consistencia visual en toda tu documentación

## Uso

```mdx
<Frame caption="Architecture diagram">
  ![Diagram](/images/city-skyline.jpg)
</Frame>
```

## Frame básico

<Frame>
  ![City skyline](/images/city-skyline.webp)
</Frame>

```mdx
<Frame>
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## Con leyenda

Añade una leyenda debajo del marco:

<Frame caption="New York City at dusk">
  ![City skyline](/images/city-skyline.webp)
</Frame>

```mdx
<Frame caption="New York City at dusk">
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## Enmarcando otro contenido

Frame funciona con cualquier contenido, no solo imágenes:

<Frame caption="Example code output">
```
✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production
```
</Frame>

## Cuándo NO usar Frame

- **Imágenes decorativas en línea** - Las imágenes Markdown regulares son adecuadas para ilustraciones
- **Iconos o gráficos pequeños** - Frame añade peso visual innecesario
- **Imágenes que fluyen con el texto** - Frame crea una ruptura visual; úsalo para elementos visuales independientes

## Mejores prácticas

- **Mantén las leyendas concisas** - Una frase que explique lo que el lector está viendo
- **Úsalo de forma consistente** - Si enmarcar una captura de pantalla, enmarca todas las capturas para consistencia visual
- **No abuses del enmarcado** - Reserva los marcos para elementos visuales importantes, no para cada imagen de la página

## Props

<ParamField name="caption" type="string">
  Texto opcional debajo del marco.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Resumen de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>