Una de las mejores características de Figma es que te permite transferir rápidamente los diseños que haces con él al código. Si eres un desarrollador de aplicaciones o trabajas con diseñadores, esta es una habilidad valiosa para aprender. Con la ayuda de herramientas integradas y numerosos complementos, Figma le permite exportar su diseño a varias plataformas.

Cómo exportar código en Figma

Si desea obtener más información sobre cómo convertir su diseño de Figma en código, ha venido al lugar correcto. En este artículo, discutiremos cómo exportar código en Figma y qué herramientas necesitará usar.

Cómo exportar código en Figma en una PC con Windows

Si eres un usuario de Windows y quieres exportar código en Figma, te alegrará saber que puedes usar numerosas opciones.

figma inspeccionar

Uno de los métodos que puede usar para exportar código en Figma es Figma Inspect. Esta función le permite convertir fácilmente sus diseños a Android, iOS o código web. Como está integrado, no es necesario instalar complementos ni aplicaciones de terceros.

He aquí cómo usarlo:

  1. Seleccione los elementos que le interesen y vaya a la pestaña Inspeccionar.
  2. En la sección "Código", seleccione el código que desea exportar (CSS para Web, Swift para iOS o XML para Android).

La herramienta generará el código según la opción que elijas y luego podrás exportarlo. Aunque esta es una gran herramienta, tiene algunas limitaciones. Es decir, no puede exportar SVG a HTML. Para eso, necesitarás usar un complemento.

Complementos de Figma

Figma presenta cientos de complementos útiles. Mencionaremos algunos que puede usar para exportar su diseño a HTML.

Figma a HTML

El complemento le permite convertir su diseño en HTML o CSS, según sus necesidades. Siga los pasos a continuación para instalar el complemento y exportar el código:

  1. Acceda al menú principal presionando el ícono en la esquina superior izquierda.
  2. Presiona "Complementos".
  3. Presione "Examinar complementos en la comunidad".
  4. Escriba "Figma a HTML" y seleccione "Complementos" en la parte superior.
  5. Presiona "Instalar".
  6. Vuelva a su diseño y seleccione los elementos deseados.
  7. Regrese al menú principal, seleccione "Complementos" y luego seleccione "Figma a HTML".
  8. Elija HTML o CSS.
  9. Presione "Copiar" o "Descargar", según sus necesidades.

Ánima para Figma

Otro complemento útil es Anima for Figma. Con este complemento, puede convertir su diseño a HTML, CSS, React y Vue. Siga estos pasos para usar el complemento:

  1. Abra el menú principal seleccionando el icono superior izquierdo.
  2. Presiona "Complementos".
  3. Seleccione "Examinar complementos en la comunidad".
  4. Escribe "Anima para Figma".
  5. Presiona "Instalar".
  6. Seleccione los elementos que desea exportar.
  7. Abra el menú principal, presione "Complementos" y seleccione "Anima para Figma". Regístrese si no tiene una cuenta.
  8. Elija el tipo de código y presione "Exportar código".

Cómo exportar código en Figma en una Mac

La exportación de su diseño a código en un dispositivo Mac se puede hacer de varias maneras.

figma inspeccionar

Esta herramienta integrada le permite inspeccionar y exportar código y otros valores para sus diseños. Con Figma Inspect, puede elegir entre tres opciones de código: Android, iOS o Web (solo CSS).

Siga los pasos a continuación para usar Figma Inspect en una Mac:

  1. Seleccione los elementos que desea exportar.
  2. Abra la pestaña "Inspeccionar" a la derecha.
  3. Elija entre CSS, iOS o Android.
  4. Copia tu código.

Si solo está interesado en CSS, iOS y Android, esta es una excelente herramienta para usar. Sin embargo, si desea exportar su diseño a HTML, deberá utilizar un método diferente.

Complementos de Figma

Si desea convertir sus diseños en HTML, Figma ofrece docenas de complementos que sirven para este propósito. El proceso de instalación es simple. Vamos a enumerar algunos de los más populares.

Figma a HTML

Este complemento le permite convertir su diseño a CSS o HTML. Aquí se explica cómo instalarlo:

  1. Seleccione el icono superior izquierdo para abrir el menú principal.
  2. Presiona "Complementos".
  3. Seleccione "Examinar complementos en la comunidad".
  4. Escriba "Figma to HTML" en la barra de búsqueda y seleccione "Complementos" en la parte superior.
  5. Presiona "Instalar".
  6. Regrese a su diseño y seleccione los elementos que desea exportar.
  7. Abra el menú principal, seleccione "Complementos" y luego seleccione "Figma a HTML".
  8. Seleccione HTML o CSS.
  9. Presiona "Copiar" o "Descargar".

Figma a código

Con este complemento , puede convertir su diseño de Figma a HTML, Tailwind, Flutter o Swift UI. Siga los pasos a continuación para instalarlo y usarlo:

  1. Presiona el ícono superior izquierdo para acceder al menú principal.
  2. Seleccione "Complementos".
  3. Presione "Examinar complementos en la comunidad".
  4. Escriba "Figma to Code" en la barra de búsqueda y elija "Complementos" en la parte superior para obtener resultados relevantes.
  5. Presiona "Instalar".
  6. Vaya a su diseño y seleccione los elementos deseados.
  7. Acceda al menú principal nuevamente, seleccione "Complementos" y luego seleccione "Figma to Code"
  8. Seleccione el código deseado.
  9. Presione "Copiar al portapapeles".

¿Puedo exportar código en Figma en el iPhone?

La nueva aplicación Figma para iPhone solo estuvo disponible como una versión beta a través de Testflight para los primeros 10,000 iPhones, pero la compañía afirma que el lanzamiento completo llegará pronto. La aplicación le permite navegar y acceder a sus diseños y realizar un seguimiento de los cambios en vivo en su iPhone mientras edita el diseño en su computadora.

En este momento, no es posible editar diseños a través de la aplicación para iPhone, lo que significa que no hay forma de exportar código a través de ella.

Figma también ofrece la aplicación Figma Mirror en la App Store. Esta aplicación le permite reflejar sus diseños en cualquier dispositivo iOS sin estar conectado a la misma red. De esa manera, puede verificar cómo se ve su diseño en un dispositivo en particular (en este caso, iPhone) y realizar un seguimiento de los cambios. Aunque es útil, la aplicación no te permite exportar código en tu iPhone. Para eso, tendrás que agarrar tu computadora.

También puede acceder a sus diseños a través de su navegador. Sin embargo, solo podrá ver su diseño y realizar un seguimiento de los cambios en vivo.

¿Puedo exportar código en Figma en un iPad?

Desafortunadamente, no es posible exportar código en Figma si está usando un iPad. Figma está trabajando en la aplicación móvil y hay una versión beta, pero no estaba disponible para tabletas, solo para iPhone y Android.

La aplicación Figma Mirror está disponible en iPads. La aplicación le permite realizar un seguimiento de los cambios que realiza en su diseño en la computadora y verificar cómo se ven en la pantalla del iPad. Desafortunadamente, la opción de exportar código dentro de la aplicación no está disponible.

Si no desea instalar la aplicación, puede acceder a Figma a través de su navegador y realizar un seguimiento de los cambios en el diseño. Pero, exportar código en Figma solo es posible en una computadora.

¿Puedo exportar código en Figma en un Android?

Figma está trabajando actualmente en la aplicación de Android y ofrece una versión beta para 10.000 teléfonos Android. Puedes convertirte en tester descargando la aplicación desde Play Store y accediendo a este enlace . Puede explorar, ver y compartir sus diseños y realizar un seguimiento de los cambios dentro de la aplicación, incluso cuando no esté cerca de su computadora.

Aunque la aplicación es útil para muchos propósitos, por ahora no le permite exportar código.

La aplicación Figma Mirror también está disponible para Android. Su objetivo principal es realizar un seguimiento de los cambios que realice en sus diseños en su computadora y asegurarse de que se vean bien en todos los dispositivos Android. La opción de exportar código no está disponible.

También puede usar Figma dentro de su navegador si no desea instalar la aplicación. Sin embargo, aún no podrá exportar el código. Para eso, tendrás que usar tu computadora.

Preguntas frecuentes adicionales

¿Cómo exporto colores de Figma a Xcode?

Desafortunadamente, no es posible exportar colores de Figma a Xcode ya que Figma no lo admite. Pero, hay una solución alternativa que puede usar llamada Exportación de Figma . Siga los pasos a continuación para usarlo:

1. Si aún no lo ha hecho, instale Figma Export .

2. Abra "Terminal.aplicación".

3. Abra la carpeta con el archivo "figma-export".

4. Inicie "exportación de figma".

5. Exporte colores usando “./figma-export colors -i figma-export.yaml”.

¿Cómo exporto el código HTML de Figma?

Como se mencionó anteriormente, la herramienta integrada llamada Figma Inspect le permite obtener CSS, pero no HTML. Si necesita el código HTML, deberá instalar un complemento.

Figma presenta docenas de complementos que sirven para este propósito. Nuestra recomendación es Figma to HTML . He aquí cómo usarlo:

1. Abra el menú principal. Es el icono de arriba a la izquierda.

2. Presione "Complementos".

3. Seleccione "Examinar complementos en la comunidad".

4. Escriba "Figma to HTML" en la barra de búsqueda y asegúrese de que "Complementos" esté seleccionado en la parte superior.

5. Seleccione "Instalar".

6. Regrese a su diseño y seleccione los elementos que desea convertir a HTML.

7. Vaya al menú principal, seleccione "Complementos" y abra "Figma a HTML".

8. Pulse HTML.

9. Elija entre "Copiar" o "Descargar".

Obtenga el código que necesita

Figma le permite exportar diferentes tipos de códigos usando varios métodos. Puede usar herramientas integradas o descargar diferentes complementos, según sus necesidades. Por ahora, la exportación de códigos solo es posible a través de computadoras. Figma lanzó la versión beta de la aplicación móvil (limitada a 10,000 dispositivos iPhone o Android), pero no cuenta con esta opción. Afortunadamente, exportar código en computadoras es rápido y fácil.

¿Cómo exportar código en Figma? ¿Utiliza uno de los métodos que mencionamos en este artículo? Cuéntanos en la sección de comentarios a continuación.