---
url: "/es/weblify/overview/quickstart.md"
description: "Crea, previsualiza, inspecciona y exporta sitios web con Weblify, o copia páginas existentes en Figma con la extensión de Chrome de Weblify."
---

# Primeros pasos con Weblify

> Crea, previsualiza, inspecciona y exporta sitios web con Weblify, o copia páginas existentes en Figma con la extensión de Chrome de Weblify.

[![Weblify Figma Plugin](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Instalar el plugin Weblify de Figma

1. Abre cualquier archivo de Figma.
2. Haz clic en el icono **Actions** de la barra de herramientas inferior de Figma.
3. Haz clic en la pestaña **Plugins & Widgets** para ver solo plugins de Figma.
4. Busca **Weblify** en la barra de búsqueda.
5. Haz clic en el resultado **Weblify**.
6. Haz clic en el botón **Save** para instalar el plugin Weblify.

> **Note:** Si formas parte de una **Figma Organization**, es posible que solo puedas instalar plugins aprobados. Si no puedes instalar algunos plugins de Figma, pide al administrador de la organización de Figma de tu empresa que [apruebe el plugin Weblify](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization).

## Ejecutar el plugin Weblify de Figma

Cuando hayas [instalado](#instalar-el-plugin-weblify-de-figma) el plugin **Weblify** de Figma, sigue estos pasos para ejecutarlo en tu archivo de Figma:

  1. Haz **clic derecho** en cualquier parte del lienzo de la página de tu archivo de Figma
  2. Pasa el ratón por encima del elemento de menú **Plugins** ▶
  3. Pasa el ratón por encima del elemento de menú **Saved plugins** ▶
  4. Haz clic en el elemento de menú del plugin **Weblify**

> **Tip:** Después de ejecutar el plugin **Weblify** una vez en un archivo de Figma, podrás volver a abrirlo rápidamente haciendo clic en el icono de **Weblify** de la columna derecha de Figma (bajo el subtítulo **Plugin**).

> **Warning:** Solo los usuarios de Figma con acceso de **Edit** a un archivo de Figma pueden ejecutar plugins de Figma en ese archivo; si solo tienes permisos de **View**, no podrás ejecutar ningún plugin de Figma en ese archivo.

## Instalar y activar Weblify

- [Instalar y ejecutar el plugin de Figma](/es/weblify/overview/install.md): Cómo ejecutar Weblify dentro de Figma
- [Activar Weblify Pro](/es/weblify/overview/pro.md): Cómo comprar y usar una clave de licencia Pro

## Usar Weblify

  - [Crear un sitio web](/es/weblify/build/site-builder.md): Crea páginas web editables a partir de plantillas, secciones y elementos
  - [Importar un sitio web](/es/weblify/advanced/import-website.md): Copia una página o un elemento seleccionado con la extensión de Chrome gratuita
  - [Auditar y exportar](/es/weblify/build/export.md): Valida y descarga un sitio web estático en HTML y CSS
  - [Inspeccionar capas de Figma](/es/weblify/inspect/layers.md): Genera código HTML, Tailwind, React o Vue a partir de una capa seleccionada

## Preguntas frecuentes

- [Solución de problemas de Weblify](/es/weblify/faq/troubleshooting.md): Problemas habituales con los que te puedes encontrar
- [Seguridad de Weblify](/es/weblify/faq/security.md): Detalles sobre cómo funciona Weblify
- [Recibos](/es/faq/receipts.md): Encuentra los recibos por email y las facturas en PDF
- [Facturación](/es/faq/billing.md): Gestiona tu suscripción Pro
- [Gestión de puestos de la licencia](/es/faq/seats.md): Gestiona los usuarios de Figma de tu clave
- [Weblify gratis y Pro](/es/weblify/faq/plans.md): Compara las funciones gratis y Pro

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Funciones de Weblify

- Crea páginas web editables a partir de plantillas, secciones, elementos y layouts responsive.
- Copia sitios web públicos o con sesión iniciada en Figma con la extensión de Chrome gratuita.
- Previsualiza el sitio web generado con distintos anchos de viewport.
- Audita y exporta las páginas de Weblify como un sitio web estático en HTML y CSS.
- Inspecciona las capas de Figma seleccionadas como código HTML/CSS, Tailwind, React o Vue.
- Copia el código generado o descarga un ZIP del componente con sus recursos de imagen.
- Trabaja con el Auto Layout de Figma, el ajuste de línea (wrapping) y las propiedades de layout mín./máx.
- Usa las herramientas de inspección de código de Weblify desde el Dev Mode de Figma.