Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes

Cualquier persona con acceso de edición puede actualizar las propiedades del trazo

Los trazos son una colección de propiedades que se pueden aplicar a las capas en los archivos de diseño. Pueden considerarse los trazos como la representación visual de una ruta vectorial. Utiliza las propiedades del trazo para:

• Añadir esquemas alrededor de formas, redes vectoriales u operaciones booleanas
• Crear líneas y flechas
• Añade bordes a imágenes
• Añade trazos a los lados individuales de las capas rectangulares, como rectángulos, marcos y componentes

Puedes controlar el aspecto de un trazo con propiedades de color, grosor, distribución, lado y extremo.

Propiedades del trazo

Ver y ajustar las propiedades del trazo en la sección trazo de la barra lateral derecha.

Pinturas

El color es la propiedad principal que usarás para definir el trazo. Puedes aplicar más de un color de pintura a un trazo. Esto incluye rellenos de gradiente y pinturas de imagen. Las capas deben compartir las mismas propiedades de grosor, posición y estilo.

1. Utiliza el selector de color para elegir un tipo de pintura, un valor y una opacidad.
2. Haz clic en para añadir otra pintura a la selección actual.
3. Selecciona o para alternar la visibilidad de cada capa.
4. Selecciona para abrir el selector de estilo. Desde allí, puedes aplicar un estilo de color o crear uno nuevo desde la selección actual.
5. Selecciona para eliminar el trazo de la capa seleccionada.

Posición

Figma te permite definir dónde aplicar el trazo en el recorrido de la capa. Elige entre Interior, Exterior o Central. La opción predeterminada para la mayoría de las capas de forma es Interior, excepto para las líneas que se configuran en el centro.

El formato SVG solo admite trazo central. Debes tenerlo en cuenta si planeas exportar la capa como un SVG.

Cuando exportas una capa con un trazo interior o exterior a SVG, Figma «simplificará» el trazo. Esto hace que un trazo interior o exterior se asemeje a un trazo central. Esto no afectará la apariencia del objeto exportado, pero cambiará la complejidad del código SVG.

Obtén más información sobre simplificar el trazo →

Peso

Utiliza el campo para seleccionar el grosor del trazo, en píxeles. Introduce un valor, o activa el campo y desplázate por los valores usando el ratón o el panel táctil.

Trazos individuales

De forma predeterminada, Figma aplica las propiedades del trazo a todos los lados de una capa. Si tu capa es un rectángulo, un marco o un componente/instancia, también tendrás una propiedad de Trazo por lado.

Utiliza la propiedad Trazo por lado para elegir el lado o los lados a los que se va a aplicar el trazo.

• Todos (predeterminado)
• Superior
• Inferior
• Izquierda
• Derecha
• Personalizado: para elegir en qué lados aplicar el trazo. La opción Personalizado también te permite establecer un grosor de trazo diferente para cada lado.

Trazos personalizados por cada lado

Cuando selecciones Personalizado, verás cuatro campos individuales en la sección Trazo. Utiliza los campos para ajustar el peso de cada lado de forma independiente. Para quitar un trazo de un lado, ajusta el grosor a 0.

Puedes usar trazos individuales para crear elementos y patrones de diseño comunes:

• Aplicar un solo trazo en la parte superior o inferior de una fila de una tabla
• Mostrar una línea horizontal debajo de un encabezado o divisor de sección
• Aplicar un borde a solo tres lados de un elemento
• Añadir un bloque de color al lado izquierdo de una tarjeta o elemento de tarea

Puntos finales

Añadir estilo a los extremos de cualquier ruta abierta. La propiedad del extremo aparecerá en dos ubicaciones diferentes, según la ruta vectorial que hayas seleccionado.

Solo dos extremos

Si la capa es una ruta vectorial abierta, puedes establecer los extremos al principio y al final de dicha ruta vectorial en la sección principal de Trazo. Por ejemplo: formas de línea y flecha.

Utiliza los dos campos para definir el estilo de las puntas o remates↓ para los extremos de inicio (izquierda) y final (derecha).

Más de dos extremos

Si tienes un trazado o forma vectorial cerrada, o un trazado abierto con más de dos extremos, encontrarás la configuración de los extremos en el menú avanzado de trazos.

Si tienes seleccionada toda la capa, puedes usar la propiedad Extremos para establecer el mismo estilo de punta o remate para todos los extremos.

Para editarlos de forma independiente, debes seleccionar cada extremo en el modo Edición vectorial:

1. Con la capa seleccionada, pulsa Enter / Return para abrir el modo Edición vectorial →
2. Selecciona un único extremo. Puedes identificar el extremo seleccionado por el círculo azul con un trazo blanco.
3. Selecciona en la sección Trazo de la barra lateral derecha para abrir el menú avanzado de trazos.
4. Actualiza la propiedad Extremo.
5. El menú avanzado de trazos permanecerá abierto para que puedas seleccionar otro extremo en el lienzo y actualizar nuevamente el extremo.

Extremos de remate y punta

Elige entre una selección de remates o puntas para agregar a los extremos:

• Ninguno: no se añade ningún remate ni punta al final del trazado. Los extremos son cuadrados, sin añadir longitud alguna al trazado.
• Redondeado (predeterminado): añade un remate con la mitad del grosor del trazo, además de redondear el extremo del trazado al 50 % de su anchura.
• Remate cuadrado: añade un remate de la mitad del grosor del trazo y cuadra el extremo del trazado.
• Flecha de línea: dos líneas de 45 grados a cada lado de los extremos. La flecha de línea usa el mismo grosor de trazo que el propio trazado. No se puede cambiar la longitud de las líneas de las puntas de flecha.
• Flecha triangular: flecha con punta triangular en ambos extremos. Debes entrar en el modo Edición vectorial → para aplicar una flecha a solo un extremo del trazado.
• Triángulo invertido: versión invertida o volteada de la flecha triangular, con la flecha apuntando hacia adentro (hacia el trazado).
• Flecha de diamante: añade una punta sólida en forma de diamante al extremo.

Tipos de trazo

Puedes usar las propiedades avanzadas de trazo para personalizar aún más el aspecto de un trazo. Para acceder a estos ajustes, ve a la sección Trazo en la barra lateral derecha y selecciona Configuración avanzada de trazo.

Trazo básico

Puedes usar los ajustes básicos de trazo para crear un trazo discontinuo o punteado. 

Discontinuo

Crea una línea de guiones uniforme.

1. En el panel Trazo, selecciona para abrir el menú avanzado de trazos.
2. Selecciona el estilo de trazo guion
3. Introduce la longitud que deseas para el guion, en píxeles.
4. Introduce la longitud de la separación entre guiones, en píxeles.
5. Elige el tipo de remate para el guion:
   • Ninguno
   • Redondo
   • Cuadrado

Punteado

Crea una línea de puntos.

1. En el panel Trazo, utiliza el menú desplegable para cambiar la posición del trazo a Central.
2. Selecciona para abrir el menú avanzado de trazos.
3. Selecciona el estilo de trazo guion
4. Introduce una longitud de guion de 1 píxel.
5. En la configuración del extremo de guion, selecciona Redondeado.
6. Ajusta el espacio correspondiente entre los guiones.

Personalizado

Crea una línea de guiones o puntos con un patrón personalizado.

1. En el panel Trazo, selecciona para abrir el menú avanzado de trazos.
2. Configura la opción de estilo de trazo en Personalizado.
3. Utiliza la siguiente sintaxis en la configuración de Guiones para definir el patrón de guiones guión, espacio, guión, espacio...
4. Selecciona el extremo de guion que deseas usar.

Trazo del pincel

Los trazos del pincel dan a tu selección un aspecto orgánico y pintado a mano. Utiliza la pestaña Pincel en la configuración avanzada de trazos para explorar los estilos de pincel disponibles, incluidos los pinceles personalizados que hayas creado. Pasa el cursor sobre un estilo para crear una vista previa de tu selección. Una vez que apliques un trazo de pincel, puedes usar la configuración de Orientación para determinar en qué sentido fluirá el trazo.

Trazo dinámico

Los trazos dinámicos proporcionan a tu selección un aspecto de trazo dibujado a mano e irregular. Puedes usar los ajustes de Trazo dinámico para configurar la apariencia del trazo:

• Frecuencia: determina la cantidad de irregularidades en el trazo
• Movimiento: determina el tamaño de las irregularidades
• Alisar: determina la forma de las irregularidades

Ángulo de unión y ángulo de miter

Define cómo se unen las líneas dentro de un trazado o red vectorial. Ajusta las uniones en un trazado completo o entra en el modo de edición de vectores para seleccionar un único punto de anclaje en el trazado. Elige entre:

• Miter: crea un punto agudo, como una flecha, donde se encuentran los dos trazados.
• Bisel: recorta la punta afilada para formar un borde plano.
• Redondeado: redondea el punto donde se encuentran dos trazados para suavizar la unión.

Utiliza el ajuste Ángulo de miter para controlar el ángulo en el que se biselan dos líneas unidas. Por ejemplo: para un miter de 90°, cualquier ángulo ≤90° se biselará y cualquier ángulo >90° formará una punta afilada.

Resumen de las propiedades de trazo compatibles

Algunas propiedades solo son compatibles con tipos de capa específicos. Utiliza la tabla a continuación para comprobar si una propiedad específica es compatible con el tipo de capa con el que trabajas.

Tipo de capa	Pinturas	Posición	Peso	Trazo por lado	Estilos de color	Punto final	Unirse
Rectángulo	✓	✓	✓	✓	✓	✕	✓
Líneas	✓	✕	✓	✕	✓	✓	✕
Flechas	✓	✕	✓	✕	✓	✓	✓
Elipse	✓	✓	✓	✕	✓	✕	Si se modifica con la herramienta de arcos
Polígono	✓	✓	✓	✕	✓	✕	✓
Estrella	✓	✓	✓	✕	✓	✕	✓
Booleanos	✓	✓	✓	✕	✓	✕	✓
Redes vectoriales	✓	✓	✓	✕	✓	Solo trazados abiertos	✓
Texto	✓	✓	✓	✕	✓	✕	✓
Marcos (incluidos componentes)	✓	✓	✓	✓	✓	✕	✓

Ver y copiar propiedades de trazo con acceso de solo visualización a un archivo

Si tienes permiso de visualización para un archivo, las propiedades del trazo se muestran en la barra lateral derecha como Bordes. Puedes elegir representar las propiedades como CSS, o como valores de color como Hex, RGB, HSL o HSB. Una vez que hayas elegido cómo representar las propiedades, pasa el ratón sobre la sección Bordes y haz clic en Copiar.

Estilos y trazos

Solo puedes crear y aplicar estilos de color a los trazos. No hay manera de guardar otras propiedades de un trazo, como el grosor y la posición, como un estilo.

Cuando aplicas un estilo de color a un trazo, puedes seguir ajustando las otras propiedades. Esto incluye el grosor y la distribución, así como cualquier propiedad avanzada del trazo, como los remates, las uniones y los guiones.

Aplica estilos de color a los trazos

1. Selecciona la capa que deseas actualizar.

2. En la sección Trazo del panel de la derecha, haz clic en el icono de estilo .

3. Utiliza el selector de estilo para elegir el estilo de color relevante.

4. Ajusta cualquiera de las otras propiedades del trazo según desees.

Escalar y redimensionar trazos

Los trazos responden de manera diferente según cómo se redimensionen.

• Redimensiona el objeto si deseas mantener el grosor del trazo al ajustar las dimensiones del objeto. Pasa el cursor sobre el cuadro de límite del trazo hasta que aparezca el cursor , luego arrastra para redimensionar.
• Utiliza la herramienta Escala para escalar las propiedades del trazo junto con las dimensiones del objeto. Aprende a usar la herramienta Escala →

Convierte trazos en objetos vectoriales

La función de esquema de trazo permite convertir los trazos en objetos vectoriales. Esto convertirá cada trazado del objeto en una única forma editable.

Esto te permitirá:

• Eliminar o extender los guiones de media longitud
• Crear formas personalizadas y editarlas en el modo Edición vectorial
• Combinar varios trazados en un único objeto
• Escalar los objetos vectoriales de manera uniforme

Contornear el trazo

1. Haz clic con el botón derecho en la capa y selecciona Contornear el trazo o utiliza el atajo de teclado:
   
   • Mac: ⌘ Command ⌥ Option O
   • Ventana: Control Alt O
2. Figma convertirá el trazado en un objeto vectorial y aplicará cualquier pintura que hayas tenido como trazo como relleno.
3. Puedes ver la apariencia de ese objeto en el modo Edición vectorial. Pulsa Enter / Return o haz clic en Editar objeto en la barra de herramientas para editar el objeto vectorial.