Crear variables string en Figma: textos de interfaz compartidos

Para crear variables string en Figma, abre Variables, crea una variable de tipo String, escribe su nombre y valor y aplícala al contenido de una capa de texto. Comprueba el vínculo cambiando el valor de origen. Comparte las cadenas que deban actualizarse juntas y conserva independientes los contenidos que tengan otra función.

Esta guía desarrolla un ejercicio propuesto para Fieldnote, un espacio ficticio de proyectos. Dos pantallas sin proyectos comparten una acción de creación, mientras una invitación conserva su propio texto. Los nombres, traducciones y comprobaciones son ejemplos editoriales. La tarea consiste en reutilizar textos de interfaz, sin convertir el ejercicio en una plataforma completa de localización ni en una receta tipográfica.

Define qué textos deben seguir compartidos

Empieza por el significado del mensaje, no por las letras repetidas. Dos botones que dicen Crear un proyecto pueden representar la misma operación. Otro botón que dice Crear invitación cumple una función distinta. Anota la operación, el público y el destino antes de decidir que un texto debe depender de una variable compartida.

Coloca dos pantallas sin proyectos una junto a otra: un espacio personal y otro de equipo. Ambas ofrecen Crear un proyecto. Escribe una explicación distinta en cada pantalla, porque sus contextos cambian. Añade una tarjeta de invitación con Enviar invitación como control independiente. La regla propuesta es que solo las dos acciones de proyecto se actualicen juntas.

La muestra real de estados vacíos de EmviUI combina varias ilustraciones con titulares, explicaciones y acciones repetidas. Sirve para examinar qué textos podrían compartirse. Es una muestra de diseño de EmviUI, no de Fieldnote, y sus píxeles no demuestran vínculos con variables. EmviUI ofrece un kit de interfaz y sistema de diseño para Figma; inspecciona el archivo que utilices antes de afirmar que un texto ya está conectado.

Crea un inventario pequeño junto al lienzo. Llama copy/project/create a la acción compartida y escribe Crear un proyecto como valor inicial español. Registra su responsable, los dos consumidores previstos y la invitación que debe permanecer intacta. Un nombre basado en la operación seguirá teniendo sentido aunque cambie la redacción aprobada.

La referencia de tipos de variables distingue cadenas, números, colores y booleanos. Las cadenas pueden alimentar contenido textual y otras propiedades compatibles. Aquí el valor representa copy de interfaz: no establece el tamaño de fuente, el espaciado ni hace que un clic cree datos reales. Mantén esas responsabilidades separadas en las notas del ejercicio.

Evita centralizar todas las apariciones de una palabra habitual. Un valor genérico Continuar puede ocultar pasos distintos en una bienvenida, una confirmación de pago y un panel de ajustes. Comparte la cadena cuando el cambio editorial deba llegar a todos esos lugares. Si el equipo no puede describir esa dependencia, conserva los textos independientes hasta aclarar la decisión.

Crea una cadena y vincula el texto

Con permiso de edición, sigue la guía actual de creación de variables: abre Variables desde la navegación izquierda, crea una variable String dentro de una colección y escribe nombre y valor. Llama Textos de interfaz a la colección del ejercicio. Empieza con un conjunto local y suficientemente pequeño para revisarlo sin otro proceso de publicación.

Añade copy/project/create con el valor Crear un proyecto. Incluye una descripción como «Acción que inicia un proyecto desde las dos pantallas vacías del espacio de trabajo». Evita describirla como etiqueta del botón predeterminado: eso no explica su función. Anota también quién revisa el contenido para que un futuro cambio tenga un responsable reconocible.

Selecciona la capa que contiene las palabras del botón, usa Apply variable en la sección Text y elige la nueva cadena. La guía de aplicación documenta este vínculo con el contenido. Comprueba que has seleccionado el texto, no el frame exterior ni el campo de familia tipográfica. Conecta la segunda acción de proyecto al mismo origen.

Cambia temporalmente el valor a Iniciar un proyecto. Los dos botones previstos deberían responder. La invitación debe seguir diciendo Enviar invitación. Después restaura el texto aprobado. Esta modificación controlada demuestra más que una captura con dos etiquetas iguales: podrías haber escrito esas etiquetas por separado sin crear ninguna relación reutilizable.

Si la variable no aparece en el selector, revisa su tipo, su ámbito y la disponibilidad de la biblioteca esperada. En este ejercicio local, empieza confirmando que estás en la colección correcta. No crees otra cadena con un nombre casi idéntico solo para encontrarla en el selector; podrías terminar manteniendo dos orígenes que compiten entre sí.

Vincular el contenido no decide su tratamiento visual. Conserva el estilo de texto mientras verificas que solo cambian las palabras. La guía sobre variables y estilos explica esa separación. Para reutilizar roles tipográficos, sigue el flujo de variables tipográficas y evita mezclar nombres de fuentes y frases de acciones dentro del mismo grupo.

Decide qué sobrescrituras son intencionadas

Decide ahora si el componente reutilizable ofrece un espacio para contenido o si el sistema mantiene una frase compartida. Un botón puede exponer Etiqueta para que cada diseñador indique una acción diferente. Una variable de contenido busca otra cosa: mantener conectada una redacción aprobada entre consumidores concretos. Escribe el comportamiento esperado antes de modificar el componente.

La documentación de propiedades de componente describe las propiedades de texto y permite usar una cadena existente como valor predeterminado. También distingue las actualizaciones del valor inicial de las sobrescrituras de instancia. Haz este experimento en una copia del componente para inspeccionar ambos casos sin modificar una biblioteca publicada.

Crea dos instancias del botón de prueba. Deja la primera con su etiqueta compartida aprobada. En la segunda introduce una excepción intencionada, como Crear un proyecto privado, y regístrala en el inventario. Vuelve a cambiar la cadena de origen y observa el resultado real en ambas instancias. Anota qué consumidor mantiene el vínculo; no lo deduzcas del nombre del componente.

El resultado correcto depende del acuerdo de contenido. Si todas las acciones de las pantallas vacías deben compartir redacción, una sobrescritura independiente es un defecto que resolver. Si la acción privada abre un destino diferente, obligarla a heredar una etiqueta genérica puede ser el error. La uniformidad visual del botón no resuelve esa decisión editorial.

Durante la revisión, utiliza un control independiente deliberado. Coloca fuera del sistema una capa corriente que diga Crear un proyecto y márcala como Muestra independiente. Cambia el origen a Iniciar un proyecto. Los controles conectados deberían actualizarse y la muestra conservar su texto. Retira esta muestra de revisión cuando el equipo comprenda la dependencia.

Evita separar una instancia completa del componente para corregir una palabra. Inspecciona primero la capa seleccionada, la propiedad expuesta y el vínculo correspondiente. Haz la corrección mínima que recupere la relación prevista. Después repite tanto el cambio de origen como la comprobación del control independiente: arreglar una captura no demuestra que funcionen las siguientes actualizaciones.

Mantén un registro breve de excepciones: consumidor, texto aprobado, motivo y responsable. Por ejemplo: «Acción de proyecto privado; Crear un proyecto privado; abre otra configuración; revisión de contenido de producto». Así la siguiente persona podrá conservar una diferencia significativa en lugar de eliminar automáticamente todas las sobrescrituras que encuentre.

Revisa inglés y español como layouts

Cuando funcione la dependencia inicial, compara una versión inglesa y otra española con el mismo ancho de componente. Empieza por Create project y Crear un proyecto. Conserva la operación equivalente y examina los saltos, el ancho del botón y la explicación cercana. Revisar una traducción exige comprobar tanto su significado como su composición.

La documentación de modos explica los valores contextuales de una variable y que la disponibilidad de modos depende del plan. Si tu archivo admite los necesarios, añade valores English y Español a la colección de copy y aplica el modo previsto a cada frame de revisión. Comprueba todas las entradas de la nueva columna: copiar valores iniciales no completa una traducción.

Si no dispones de esa configuración, conserva un ejercicio español separado y claramente identificado. Evita presentarlo como un selector de idioma funcional. El resultado útil es una pareja revisable cuyas dependencias se conocen. No necesitas una arquitectura compleja de colecciones para demostrar dos botones; primero debe quedar resuelta la relación de contenido.

La referencia de dimensiones de texto separa los límites de una capa del tamaño de fuente y explica cómo el redimensionado afecta al ajuste de líneas. Si crece la traducción, inspecciona la capa y su botón padre. Conserva el significado al corregir el espacio disponible. Reducir la letra hasta que quepa puede ocultar el problema original.

Prueba las mismas etiquetas en una tarjeta estrecha de estado vacío y en un panel más ancho. En la primera, revisa que la acción siga siendo legible junto al icono y que la explicación pueda crecer verticalmente. En el segundo, comprueba que el espacio adicional no desconecte visualmente el botón del mensaje al que responde.

Incluye una frase más larga pero verosímil, como Crear un proyecto para el equipo. Es una muestra de esfuerzo, no la traducción final propuesta. Registra si el botón la admite, si desplaza otra acción fuera del área visible y si mantiene el orden de lectura previsto. Restaura después el texto aprobado sin borrar el resultado de la prueba.

Revisa acentos, puntuación y explicación como un conjunto. Una acción compartida puede ser correcta por separado y resultar engañosa bajo una frase que describe otra operación. Pide a una persona hispanohablante que explique qué espera del botón. Contrasta esa expectativa con el destino registrado antes de aprobar el valor localizado.

Verifica los cambios y documenta la entrega

Termina con un registro de aceptación que se pueda repetir. Anota para cada consumidor la colección, el nombre de variable, el idioma seleccionado, el valor aprobado y su respuesta prevista a una edición del origen. Déjalo junto al ejercicio para que otra persona pueda comprobar la relación sin reconstruir tu demostración inicial.

Ejecuta tres cambios en orden: modifica el origen inglés, restáuralo e inspecciona el frame español. Confirma qué consumidores responden y qué valores de idioma permanecen independientes de forma intencionada. Revisa por último la tarjeta de invitación. Una prueba que solo observa capas modificadas no detectará una etiqueta ajena que también haya cambiado por accidente.

Si añades una demostración interactiva, distingue el copy de origen del estado temporal del prototipo. La guía de variables en prototipos documenta las acciones Set variable y los requisitos de acceso. Utiliza otra variable de prueba para una selección guionizada, en lugar de reescribir contenido aprobado y asumir que el prototipo representa datos de producción.

La referencia de expresiones permite componer cadenas mediante el operador de suma. Trata una frase generada como contenido que revisar, no como una traducción automática. Un prefijo inglés seguido de un nombre de proyecto puede producir una construcción poco natural en otro idioma. Prefiere mensajes completos y revisados cuando expliquen mejor lo que debe leer la persona usuaria.

Durante la entrega, acuerda con quien implementa la correspondencia entre la variable de diseño y el identificador real del contenido en la aplicación. Registra valores en inglés y español, sustituciones permitidas y contextos de uso. Una variable de Figma no demuestra que se haya actualizado un archivo de traducciones, una base de datos o el estado de la aplicación.

Consulta Auto Layout y Fill Container si el defecto restante pertenece al tamaño del padre y no al vínculo de la cadena. Los componentes de EmviUI proporcionan un lienzo concreto para estas comprobaciones, pero el inventario, las decisiones de vinculación, la revisión lingüística y la implementación siguen siendo responsabilidad del equipo.

Antes de entregar, pide a un colega que cambie la acción compartida en la copia del ejercicio e identifique todos sus consumidores. Pídele después que encuentre la excepción intencionada sin ayuda. Si no puede explicar ambos resultados, mejora nombres o notas y repite la revisión. El entregable es una relación de contenido fiable, no una lista de variables más larga.