Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes de pago

Se requiere una licencia completa de Design o una licencia de Dev Mode

La extensión de Figma para VS Code proporciona a los desarrolladores una forma fácil de acceder a archivos de diseño e inspeccionarlos, colaborar con diseñadores, hacer un seguimiento de los cambios y acelerar la implementación del diseño, todo ello sin salir del entorno de desarrollo.

Utiliza la extensión de Figma para VS Code para:

• Ver y responder a 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 un par de formas de abrir un archivo de diseño a través de la extensión de VS Code:

Desde Dev Mode

1. Establece CSS como tu lenguaje de preferencia en los ajustes de Código o la sección Código del panel de Inspección.
2. Haz clic en un marco de nivel superior.
3. En el panel de Inspección, haz clic en Opciones junto al nombre de la capa.
4. Selecciona Abrir en VS Code.

Desde VS Code

1. Abre VS Code.
2. Haz clic en la barra de actividades de Figa o busca Figma para VS Code en la lista de extensiones.
3. En la barra lateral principal de Archivos, haz clic en el diseño que deseas abrir.

Inspeccionar los diseños de Figma en VS Code

Explorar un archivo de diseño en VS Code

Figma para VS Code extiende la funcionalidad de las características de inspección de Dev Mode y lleva los archivos de diseño directamente al editor de texto. Al seleccionar un archivo de diseño en VS Code, verás los marcos del archivo agrupados por sección, estado (p. ej., listos para el desarrollo) y página. Si un marco no tiene sección principal o un estado asignado, no se verá.

Inspeccionar un marco

Selecciona desde una cuadrícula de marcos para verlos de forma individual con la vista de enfoque. Busca los marcos y filtra los resultados para encontrar rápidamente lo que buscas.

Ver los diseños que están listos para desarrollo

Haz clic en las capas de la barra de herramientas para ver las secciones marcados como Listas para desarrollo.

Ver fragmentos de código

Ve fragmentos de código e información de interés como los modos y estilos en la pestaña Código.

Elige el idioma que prefieras y la unidad para los fragmentos de código en la parte superior derecha de la barra de herramientas Inspeccionar.

Acceder a recursos de desarrolladores

Accede a enlaces de desarrollo de interés desde la pestaña Recursos de desarrolladores. Haz clic en Añadir recursos de desarrolladores para añadir un enalce a un archivo de código o recurso de desarrollador.

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

Vincular recursos de desarrollador a capas en Dev Mode→

Ver propiedades de componentes

Si has seleccionado un componente, puedes ver sus propiedades en la pestaña Componente.

Exportar activos

Descarga y exporta activos para una capa seleccionada en la pestaña Activos.

Obtén más información acerca de cómo exportar selecciones desde Figma →

Autocompletar sugerencias de código

La extensión de Figma para VS Code ofrece sugerencias de autocompletar según la capa seleccionada. Esto resulta útil si estás creando componentes que no tienen una implementación existente en tu base de código.

Ver notificaciones de comentarios

Puedes ver las notificaciones de los comentarios en tiempo real en Notificaciones en la barra lateral principal. Haz clic en una notificación para ver y añadir un comentario al diseño con VS Code.

Guía para comentarios en Figma→ 

Ejecutar plugins en VS Code

Aprovecha las herramientas de terceros y el código personalizado sin salir del editor de código. Echa un vistazo a nuestros documentos para saber cómo hacer que tu plugin privado funcione en VS Code→

Cerrar sesión en Figma para VS Code

1. Cuando estés en VS Code, presiona Mayús Comando P para Mostrar y ejecutar comandos.
2. Selecciona Figma: Cerrar sesión en la lista de opciones de la barra de búsqueda.