Cómo copiar un código QR a Figma como vectores editables

Cómo copiar un código QR a Figma

Copiar un código QR a Figma son cuatro acciones y ningún plugin: construye el código en el navegador, cópialo como SVG, pégalo en una parte vacía del lienzo y luego fija su tamaño numéricamente con el bloqueo de proporciones activado. Toda la ruta lleva menos de un minuto, y el resultado es un grupo de capas vectoriales que puedes recolorear y exportar como cualquier otro dibujo de Figma.

1. Construye el código. Abre el generador, introduce la URL u otro contenido y ajusta la forma, el patrón, los ojos, los colores, el marco y el logotipo. Lo que llega a Figma es exactamente lo que muestra la vista previa, así que el estilo se decide aquí y no después de pegar.
2. Abre el menú de descarga. Haz clic en la flecha junto al botón Download y elige Copy to Figma. El botón parpadea con Copied, que es la confirmación de que el marcado SVG llegó a tu portapapeles.
3. Pega sobre el lienzo vacío. Cambia a Figma, haz clic en una zona vacía para que no haya nada seleccionado ni ninguna capa de texto en modo edición, y luego pulsa Cmd+V en macOS o Ctrl+V en Windows.
4. Revisa las capas. El código llega como un grupo que contiene Background y QR-code, más Frame y Logo cuando el diseño los usó. Ver esos nombres es como sabes que Figma interpretó vectores en vez de pegar una imagen.
5. Bloquea las proporciones antes de redimensionar. Activa el bloqueo de proporciones en el panel derecho y luego escribe el ancho que necesitas en lugar de arrastrar un tirador de esquina. El ancho y el alto deben seguir siendo iguales.
6. Escanéalo en pantalla. Pon el lienzo al 100% y escanea el código con un móvil. Confirma que el destino que se abre es el que querías antes de que el archivo llegue a nadie más.

Copy to Figma no hace nada mientras el campo de contenido está vacío. El generador muestra un código de ejemplo con estilo antes de que escribas nada, y copiar ese ejemplo pondría en tu diseño un código que no apunta a ninguna parte, así que el botón hace parpadear el campo vacío en lugar de escribir en el portapapeles.

Qué llega realmente al lienzo de Figma

Un código de KoloQR pegado llega como un grupo de capas con nombre y no como una imagen plana: un contenedor con Background y QR-code, y con Frame y Logo añadidos cuando el diseño los usa. Cada módulo es un trazado vectorial real, así que cualquier capa se puede seleccionar, recolorear, ocultar o exportar por su cuenta.

El SVG lleva un ancho y un alto explícitos tomados de su viewBox, así que el código llega a su tamaño real en lugar de a la caja por defecto a la que Figma recurre cuando un archivo no declara dimensiones. Eso importa sobre todo porque un código pegado a la escala equivocada se suele arreglar arrastrando un tirador, que es como se pierden las proporciones.

Las etiquetas del marco llegan como trazados contorneados y no como texto vivo. Una etiqueta curva se emite como un único trazado fusionado en lugar de un objeto por letra, así que las palabras son una sola forma que puedes recolorear y mover, pero no reescribir. Cambiar el texto significa editar la etiqueta en el generador y copiar el código otra vez, que además es el orden correcto, ya que el arco de la etiqueta se calcula a partir del marco.

Copiar varios códigos en un mismo archivo de Figma es seguro. Cada id al que hace referencia el marcado —máscaras de recorte, el trazado invisible por el que discurre una etiqueta curva— recibe un prefijo único en el momento en que copias. Que dos SVG compartan un id es la razón habitual de que un segundo gráfico pegado se dibuje con el recorte del primero, y este flujo lo evita por construcción.

Los nombres de capa puramente cosméticos se dejan limpios a propósito. Background, QR-code, Frame y Logo no los referencia nada dentro del archivo, así que conservan sus nombres legibles en el panel de capas de Figma en lugar de llevar un prefijo aleatorio.

SVG o PNG: qué formato llevar a Figma

Usa SVG para todo lo que se vaya a redimensionar, recolorear o imprimir, y PNG solo para una maqueta que vayas a tirar. El SVG es el único de los dos que sigue siendo editable en Figma; un PNG es una imagen terminada en el momento en que se exporta, y ampliarlo dentro de un marco emborrona el borde de cada módulo.

La asimetría pilla a mucha gente en la entrega: Figma exporta PDF pero no lo importa. Un código QR en PDF de cualquier generador hay que convertirlo, o sustituirlo por el SVG, antes de que pueda entrar en una maquetación de Figma.

El PNG no está mal, simplemente es definitivo. La exportación PNG de KoloQR renderiza el código a cuatro veces su tamaño en pantalla, que basta para una maqueta y para impresión pequeña a un tamaño conocido, pero esos píxeles son fijos. Si la maquetación necesita después el código al doble de tamaño, el PNG hay que regenerarlo y no escalarlo: consulta resolución de códigos QR para la aritmética que decide cuán grande puede imprimirse con seguridad un código de mapa de bits.

Por qué a veces al pegar sale texto, o no sale nada

Casi todo pegado fallido es una de tres cosas: había una capa de texto en modo edición, se bloqueó la escritura en el portapapeles, o el pegado fue a una superficie que no interpreta marcado SVG. Ninguna es un fallo del código en sí, y las tres tienen la misma alternativa: descargar el archivo SVG y arrastrarlo.

• El marcado aparece como caracteres visibles. Había una capa de texto en modo edición cuando pulsaste Cmd+V, así que Figma insertó el texto del portapapeles como texto. Pulsa Escape, haz clic en el lienzo vacío y pega de nuevo.
• No aparece nada. El navegador rechazó la escritura en el portapapeles. El acceso al portapapeles requiere una página segura HTTPS y un clic real, y algunas extensiones de privacidad lo bloquean del todo. Usa la descarga SVG en lugar de discutir con el permiso.
• Otra superficie se comporta de otra manera. FigJam y Figma Slides no tratan el marcado pegado igual que el lienzo de diseño. Si ahí el pegado llega como texto, arrastra el archivo .svg descargado al tablero.
• El botón Copy to Figma hace parpadear el campo. El campo de contenido está vacío, así que todavía no hay ningún código real que copiar. Introduce primero la URL u otro contenido.

Vale la pena conocer la ruta alternativa antes de necesitarla: Download, luego SVG, luego arrastrar el archivo .svg desde tu gestor de archivos al lienzo de Figma. Figma importa un SVG soltado a las mismas capas vectoriales que produce un pegado, así que nada cambia en el resultado: solo el número de pasos.

Qué ediciones de Figma son seguras y cuáles rompen el código

Recolorear, mover, rotar, agrupar, enmarcar y redimensionar proporcionalmente son operaciones seguras. Estirar un eje, recortar la zona de silencio, bajar el contraste y las operaciones booleanas que quitan geometría no lo son. Un código QR se decodifica a partir de la geometría de una cuadrícula cuadrada, así que cualquier edición que cambie esa cuadrícula cambia lo que lee el escáner.

El contraste es la edición que conviene resolver antes de copiar y no después de pegar. La vista previa del generador informa de una relación de contraste para el par que has elegido y dice claramente cuándo una combinación puede ser difícil de escanear, una comprobación que Figma no tiene equivalente: Figma dibujará tan contento un código gris medio sobre un fondo beige medio sin señalarte nada.

Si el diseño cubre parte del símbolo —un logotipo en el centro, una forma cruzando una esquina—, la tolerancia que lo absorbe se fija al generar, no en Figma. Consulta corrección de errores para saber cuánto símbolo recupera cada nivel, y genera al nivel que el diseño necesita antes de copiar.

Una limitación honesta: ninguna regla de aquí garantiza un escaneo en el hardware de otra persona. Las relaciones de contraste, los tamaños de módulo y los niveles de corrección de errores inclinan las probabilidades a tu favor, y una prueba física en dos móviles es lo que lo zanja de verdad.

Dimensionar un código QR dentro de un frame de Figma

Figma mide en píxeles y no tiene unidades físicas, así que dimensiona un código QR decidiendo qué significa un píxel en el medio final y manteniéndolo. A 96 px por pulgada, 1 cm son 37,8 px, así que un código de 2 cm son 76 px. A 300 px por pulgada ese mismo código de 2 cm son 236 px. Para diseños de pantalla, apunta a 4 px por módulo como mínimo.

El número de módulos lo decide el contenido, no el diseño. Una URL corta con corrección de errores media suele quedar en 29 o 33 módulos, que son 37 o 41 con la zona de silencio incluida. A 4 px por módulo eso son unos 150–165 px en pantalla, y bastante por debajo de eso empieza a perderse la definición de los módulos en una pantalla de densidad estándar.

Las reglas de impresión no cambian porque la maquetación viva en Figma. Un código impreso necesita alrededor de 1 cm de ancho por cada 10 cm de distancia de lectura, con 2 × 2 cm como suelo práctico para lectura de cerca, y los módulos impresos deberían quedarse en 0,4 mm o más: 0,5 mm en papel no estucado, donde la ganancia de tinta engorda los módulos oscuros.

Fija el ancho numéricamente en lugar de arrastrar un tirador. Una esquina arrastrada con el bloqueo de proporciones desactivado es la forma más común de que un código QR salga de un archivo de Figma sutilmente estirado, y una distorsión del 4% es invisible en pantalla y fatal en el escáner.

Exportar el código QR de vuelta desde Figma

Selecciona la capa de nivel superior del código y exporta SVG para entrega vectorial, PDF para imprenta o PNG a 3x o 4x para pantallas. Exportar el frame en lugar del código exporta la maquetación que lo rodea, que es lo que quiere una imprenta y casi nunca lo que quiere quien desarrolla.

• SVG. Deja activado «Include id attribute» si quieres que los nombres de capa sobrevivan al archivo. «Outline text» no cambia nada aquí, porque las etiquetas del marco ya llegaron como trazados.
• PDF. Figma exporta PDF aunque no pueda importarlo, lo que convierte al PDF en la entrega natural de una maquetación impresa que contiene el código.
• PNG a 3x o 4x. Un código de 100 px exportado a 4x son 400 px, que es un recurso de pantalla. No lo trates como un recurso de impresión: parte del tamaño impreso hacia atrás.
• Nada a 1x para imprenta. Una exportación de mapa de bits nunca es mayor que los píxeles que contiene, y el techo de impresión es aproximadamente ancho en píxeles ÷ 300 × 2,54 centímetros.

Para un código que va a aparecer en un sitio web, la mejor entrega a menudo no es una exportación en absoluto. Quien desarrolla puede generar el código en tiempo de compilación o enviar el archivo SVG directamente, y cualquiera de las dos opciones gana a una imagen exportada de un archivo de diseño que nadie se acordará de actualizar cuando cambie la URL.

Copy to Figma frente a un plugin de códigos QR para Figma

Un plugin genera el código dentro de Figma y puede regenerar o generar por lotes sin salir del archivo. La ruta del portapapeles lo genera en el navegador y da más control sobre la forma, el marco y el logotipo. Ambos producen un código estático: ninguno puede cambiar adónde apunta un código ya colocado sin sustituir el dibujo.

Usa un plugin cuando el problema sea el volumen. Generar cuarenta acreditaciones de evento a partir de una hoja de cálculo dentro de Figma es un trabajo que la ruta del portapapeles no puede hacer agradable, y un plugin de lotes es sin más la mejor herramienta para eso. KoloQR no tiene plugin de Figma, y esta página no va a fingir que eso sea una ventaja.

Usa el portapapeles cuando el problema sea el diseño. Los códigos circulares y de otras formas personalizadas, los marcos, los estilos decorativos de ojos y un logotipo colocado con la corrección de errores adecuada detrás son decisiones que se toman en un generador, y llegan a Figma completamente formadas: mira códigos QR redondos y códigos QR de marca para ver qué aspecto tiene eso.

Vale la pena nombrar una diferencia duradera: un plugin es una dependencia. Los plugins de Figma los actualizan sus autores, se rompen cuando cambia la API de plugins y de vez en cuando desaparecen de la Community. El SVG por portapapeles es un pegado: no hay nada en la ruta que pueda dejar de mantenerse.

Qué no puedes hacer una vez que el código está en Figma

El código pegado es un código QR estático, así que el destino está escrito en la geometría en lugar de guardado junto a ella. Figma puede reestilizar esa geometría pero no puede recalcularla, lo que deja cuatro deseos habituales fuera de alcance.

• Cambiar adónde apunta. Editar la URL significa generar un símbolo nuevo. No hay ningún campo que editar, ni en Figma ni en ninguna otra parte.
• Subir el nivel de corrección de errores a posteriori. El nivel decide cómo se distribuyen los datos, así que cambia el símbolo en sí en lugar de ser una propiedad del dibujo terminado.
• Reescribir la etiqueta de un marco. Las palabras llegaron como trazados contorneados. Cámbialas en el generador y copia el código otra vez.
• Afinar un logotipo de mapa de bits. Un logotipo subido como PNG o JPG se incrusta dentro del SVG como imagen, así que sigue siendo mapa de bits dentro de un archivo por lo demás vectorial y no ganará nitidez cuando el código se amplíe.

El logotipo de mapa de bits es el que tiene una solución limpia. Sube el logotipo como SVG cuando tengas una versión vectorial, o borra la capa Logo en Figma y coloca tu propio logotipo vectorial en el hueco que ocupaba: el símbolo ya se generó con espacio despejado para él, y a la corrección de errores que recupera los módulos cubiertos le da igual qué dibujo va encima.

Tampoco hay analítica, y eso es una propiedad de los códigos estáticos y no de este flujo. Si el encargo necesita recuento de escaneos o un destino que se pueda cambiar después de imprimir, un código dinámico de una plataforma alojada es la herramienta correcta, y el diseño sigue entrando en Figma de la misma manera.

Mantener el código sostenible en un sistema de diseño

Convierte el código pegado en un componente de Figma la primera vez que lo uses. Cuando cambie el destino, pega el código nuevo en el componente principal una vez y todas las instancias de todos los archivos se actualizan, que es lo más cerca que un código QR estático llega a ser editable.

Nombra el componente por el destino y no por el diseño. Un código QR es ilegible para una persona, así que el nombre de la capa es el único sitio donde la URL es legible: «QR / menú-primavera» le dice a la siguiente persona qué está mirando, y «Código QR 3» no le dice nada. Pon la URL completa en la descripción del componente, donde sobrevive al copiar y pegar entre archivos.

Guarda los ajustes de origen donde la siguiente persona pueda encontrarlos. La forma, los colores, el marco, el logotipo y el nivel de corrección de errores no se pueden recuperar del dibujo, así que una nota en la descripción del componente —o el enlace del generador que lo produjo— es lo que hace que el código sea reproducible seis meses después.

No dejes que dos versiones del mismo código convivan en un archivo. El modo de fallo es concreto y habitual: un código antiguo se queda en una mesa de trabajo que nadie reexportó, se imprime y manda a la gente a una URL que ya se retiró. Un componente, un destino, un sitio donde actualizar.

Una prueba de escaneo antes de la entrega

1. Escanea el lienzo al 100%. Pon el zoom de Figma al 100% y escanea el código en pantalla con un móvil. Un fallo aquí es un problema de diseño: contraste, deformación o una zona de silencio cubierta.
2. Lee el destino carácter a carácter. Comprueba la URL que se abre contra la que querías, incluidos el protocolo y cualquier parámetro de seguimiento. Un código que se escanea perfectamente hacia la página equivocada es el fallo caro.
3. Escanea la exportación, no el lienzo. Exporta la mesa de trabajo tal como se va a publicar realmente y escanea ese archivo. Los efectos, la opacidad y las capas de fondo se comportan de otra manera en una exportación que como se ven en el lienzo.
4. Imprime una prueba a tamaño final. Si el diseño va a imprenta, imprime una página a tamaño final en el papel real y escanéala ahí. El contraste de pantalla favorece a todo.
5. Prueba en ambas plataformas. Escanea con un iPhone y con un móvil Android. Sus apps de cámara binarizan de forma distinta, y un código justito suele pasar en una y fallar en la otra.
6. Prueba con la luz del sitio. Escanea con la iluminación en la que va a vivir el código: un bar en penumbra, una ventana soleada, una tarjeta plastificada brillante en ángulo.

Los dos últimos pasos son los que pillan lo que la maquetación no puede enseñar. Un código que pasa en un monitor de escritorio brillante y falla en una carta plastificada con poca luz no ha cambiado en absoluto: han cambiado las condiciones de lectura.

El mismo SVG del portapapeles funciona fuera de Figma

El portapapeles contiene marcado SVG estándar, no un formato específico de Figma, así que la misma copia se pega en Illustrator, Sketch, Affinity Designer e Inkscape como vectores editables. Nada del flujo está atado a Figma salvo el nombre de la entrada del menú.

Las herramientas que esperan un archivo en lugar de marcado —editores de documentos, software de presentaciones, la mayoría de las herramientas de diseño en el navegador— quieren la descarga SVG. Descargar y colocar el archivo da el mismo dibujo vectorial; solo cambia el transporte.

Donde una herramienta no acepta ninguno de los dos, el PNG es la alternativa, y la decisión de tamaño se adelanta. Exporta el código al tamaño en píxeles que necesita el medio final y no a uno cómodo, porque un código de mapa de bits que hay que ampliar después no tiene buena reparación.