Antes de empezar

Quién puede usar esta función

Disponible en todos los planes pagados

Requiere un licencia de Diseño completo o un licencia de Modo de desarrollo.

La extensión Figma para VS Code ofrece a los desarrolladores una forma sencilla de acceder a los diseños e inspeccionarlos directamente desde VS Code. Puede navegar e inspeccionar archivos de diseño, colaborar con diseñadores, realizar un seguimiento de los cambios y acelerar la implementación del diseño, todo ello sin salir de su entorno de desarrollo.

Utilice la extensión Figma para VS Code para hacer lo siguiente:

• Ver y responder a los comentarios y a la actividad en tiempo real.
• Obtener sugerencias de código basadas en diseños.
• Vincular archivos de código a componentes de diseño.

Abrir diseños de Figma en VS Code

Hay dos maneras de abrir un archivo de diseño a través de la extensión VS Code:

Desde el Modo de desarrollo

1. Establezca el CSS como su lenguaje preferido en Ajustes de código o en la sección Código del panel Inspeccionar.
2. Haga clic en un marco de nivel superior.
3. En el panel Inspeccionar, haga clic en Opciones junto al nombre de la capa.
4. Seleccione Abrir en VS Code.

Desde VS Code

1. Abra VS Code.
2. Haga clic en Figma en la barra de actividades o busque Figma para VS Code en su lista de extensiones.
3. En la barra lateral principal, debajo de Archivos, haga clic en el diseño que desea abrir.

Inspeccionar diseños de Figma en VS Code

Explorar un archivo de diseño en VS Code

Figma para VS Code amplía la funcionalidad de inspección del Modo de desarrollo y lleva los archivos de diseño directamente a su editor de texto. Cuando seleccione un archivo de diseño en VS Code, verá los marcos del archivo agrupados por sección, estado (por ejemplo, listo para desarrollo) y página. Si un marco no tiene una sección matriz o un estado asignado, estos no serán visibles.

Inspeccionar un marco

Seleccione entre una cuadrícula de marcos y véalos individualmente con la vista de enfoque. Busque marcos y filtre los resultados para encontrar rápidamente lo que busca.

Ver qué diseños están listos para el desarrollo

Haga clic en Capas en la barra de herramientas para ver las secciones marcadas como Listas para el desarrollo.

Ver fragmentos de código

Vea fragmentos de código e información relevante, como modos y estilos, en la pestaña Código.

Elija su unidad y lenguaje preferido para fragmentos de código en la parte superior derecha de la barra de herramientas Inspeccionar.

Acceder a los recursos de desarrollo

Acceda a los enlaces de desarrollo correspondientes en la pestaña Recursos de desarrollo. Haga clic en Agregar recursos de desarrollo a fin de agregar un enlace a un archivo de código o recurso de desarrollo.

Si un enlace tiene una implementación coincidente en su código base actual, abre el archivo en VS Code en lugar del explorador.

Vincular recursos de desarrollo a capas en el Modo de desarrollo→

Ver las propiedades de los componentes

Si seleccionó un componente, puede ver sus propiedades en la pestaña Componente.

Exportar activos

Descargue y exporte los activos de una capa seleccionada en la pestaña Activos.

Obtenga más información sobre la exportación de selecciones desde Figma →

Sugerencias de autocompletado de código

La extensión Figma para VS Code proporciona sugerencias de autocompletado basadas en la capa seleccionada. Esto es útil si está compilando componentes que no tienen una implementación existente en su código base.

Ver notificaciones sobre comentarios

Puede ver las notificaciones sobre comentarios en tiempo real en Notificaciones, en la barra lateral principal. Haga clic en una notificación para ver y agregar un comentario al diseño a través de VS Code.

Guía de comentarios en Figma →

Ejecutar plugins en VS Code

Aproveche las herramientas de terceros y el código personalizado sin salir del editor de código.  Consulte nuestra documentación para aprender a hacer que su plugin privado funcione en VS Code →.

Cerrar sesión en Figma para VS Code

1. Mientras está en VS Code, presione Shift Comando P para Mostrar y ejecutar comandos.
2. Seleccione Figma: Cerrar sesión en la lista de opciones de la barra de búsqueda.