Saltar al contenido principal
Fabled
Docs
How-to
Personalizar un Frame en The Forge

Personalizar un Frame en The Forge

Actualizado 22 jul 2026

2 min de lectura

Paso 1: Abre el menú de creación y elige New Frame

Abre The Forge. Busca el activador del menú de creación en el árbol de The Forge (insignia 1) y haz clic para ver las opciones de creación.

Selecciona New Frame en el menú. Esto inicia una nueva plantilla de visualización y abre el panel de configuración del frame.

Abre el menú de creación y elige New Frame

Paso 2: Nombra el frame y asígnale un juego y una categoría

Escribe un nombre para tu frame en el campo de nombre. Elige nombres descriptivos que indiquen el propósito del frame, como «Character Sidebar» o «Item Card».

Selecciona el juego y la categoría de contenido a la que pertenece este frame. Usa el panel derecho para asignar el frame a una carpeta de The Forge y que aparezca junto a los elementos que lo utilizarán.

Nombra el frame y asígnale un juego y una categoría

Paso 3: Inspecciona el contenedor raíz en el lienzo

El Editor de Frames se abre sobre el contenedor raíz del frame. Esta es la superficie de diseño de nivel superior de tu plantilla.

El contenedor raíz ocupa el área del lienzo. Construyes tu diseño arrastrando componentes desde la paleta izquierda hacia este contenedor.

Inspecciona el contenedor raíz en el lienzo

Paso 4: Arrastra componentes desde la paleta al lienzo

La paleta de componentes de la izquierda lista los bloques de construcción disponibles: Text, Image, Video, Table, Icon y Container.

Arrastra cualquier componente al contenedor raíz para colocarlo. Puedes anidar componentes dentro de un Container para crear diseños agrupados.

Arrastra componentes desde la paleta al lienzo

Paso 5: Vincula las propiedades de los componentes a datos de elementos en tiempo real

Selecciona un componente en el lienzo. Sus propiedades aparecen en el panel derecho.

Usa la sintaxis de expresiones para vincular una propiedad a un campo del elemento que mostrará este frame. Por ejemplo, escribe {{element.name}} para obtener el nombre del elemento, o {{element.portrait}} para referenciar un campo de imagen de retrato.

Repite esto para cada componente del lienzo hasta que todos los campos de contenido estén conectados a los datos correctos del elemento.

Vincula las propiedades de los componentes a datos de elementos en tiempo real