Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes

Cualquiera con acceso de puede editar puede actualizar las propiedades de trazo

Los trazos son una colección de propiedades que se pueden aplicar a las capas en los archivos de diseño. Puedes considerar los trazos como la representación visual de un camino vectorial. Utiliza las propiedades de trazo para lo siguiente:

• Agregar contornos alrededor de formas, redes vectoriales u operaciones booleanas
• Crear líneas y flechas
• Añadir bordes a imágenes
• Agregar trazos a cada uno de los lados de 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 de trazo

Visualiza y ajusta las propiedades de 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 gradientes y pinturas de imágenes. 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 pintura.
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 trazado de la capa. Elige Interior, Exterior o Centro. La opción predeterminada para la mayoría de las capas de forma es Interior, excepto las líneas que están configuradas en Centro.

El formato SVG solo admite trazos centrados. Esto se debe considerar si planeas exportar la capa como un SVG.

Cuando exportas una capa con un trazo interior o exterior a SVG, Figma “simplificará” el trazo. Eso hace que un trazo interior o exterior se vea como un trazo centrado. No afectará la apariencia del objeto exportado, pero sí afectará la complejidad del código SVG.

Más información sobre la simplificación de trazo →

Peso

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

Trazos individuales

De forma predeterminada, Figma aplica las propiedades de 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 Trazos por lado para seleccionar el lado o los lados a los que se aplicará el trazo.

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

Trazos personalizados por lado

Cuando selecciones la opción de personalización, verás cuatro campos individuales en la sección Trazo. Usa los campos para ajustar el grosor 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:

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

Puntos finales

Agrega estilo a los extremos de cualquier trazado abierto. La propiedad de extremo se mostrará en dos ubicaciones diferentes, dependiendo del trazado vectorial que hayas seleccionado.

Solo dos extremos

Si la capa es un trazado vectorial abierto, puedes establecer los extremos al principio y al final del trazado 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 punta o terminación ↓ de los extremos inicial (izquierda) y final (derecha).

Más de dos extremos

Si tienes un trazado vectorial o una forma cerrados, 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 seleccionaste toda la capa, puedes usar la propiedad de extremo a fin de establecer el mismo estilo de punta o terminación para todos los extremos.

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

1. Con la capa seleccionada, presiona Enter/Return para abrir el modo de 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 trazo.
4. Actualiza la propiedad de extremo.
5. El menú avanzado de trazo permanecerá abierto, permitiéndote seleccionar otro extremo en el lienzo y actualizar el extremo de nuevo.

Extremos de puntas y terminaciones

Elige entre una selección de puntas o terminaciones para agregar a tus extremos:

• Nada: no se agrega ninguna punta o terminación al final del trazado. Los extremos son cuadrados, sin añadir longitud al trazado.
• Redondeado (predeterminado): agrega una terminación con la mitad del grosor del trazo y redondea el extremo del trazado al 50 % del ancho.
• Cuadrado: añade una terminación con la mitad del grosor del trazo, mientras se 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 utiliza el mismo grosor del trazado. No se puede cambiar la longitud de las líneas de las puntas de flecha.
• Flecha triangular: flecha triangular en ambos extremos. Necesitarás ingresar al modo de 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: agrega una punta sólida en forma de diamante al extremo.

Tipos de trazo

Puedes usar las propiedades de trazo avanzadas para personalizar aún más el trazado. Para acceder a estas configuraciones, navega a la sección Trazo en la barra lateral derecha y selecciona Configuraciones avanzadas 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 Trazo.
2. Selecciona el estilo de trazo discontinuo
3. Ingresa la longitud deseada para el guion, en píxeles.
4. Introduce la longitud del espacio entre guiones, en píxeles.
5. Selecciona el tipo de terminación para el guión:
   • Ninguno
   • Redondo
   • Cuadrado

Punteado

Crea una línea de puntos.

1. En el panel Trazo, usa el menú desplegable para cambiar la posición del trazo al Centro.
2. Selecciona para abrir el menú avanzado de trazos.
3. Selecciona el estilo de trazo discontinuo
4. Ingresa una longitud de guion de 1 píxel.
5. En la configuración de extremos de guion, selecciona Redondo.
6. Ajusta el espacio entre los guiones para que se adapte.

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 Trazo.
2. Configura el Estilo de trazo con la opción Personalizado.
3. Utiliza la siguiente sintaxis en la configuración de Guiones para definir el patrón de guiones guion, espacio, guion, espacio...
4. Selecciona el extremo de guion que deseas usar.

Trazo de pincel

Los trazos de pincel le dan a tu selección un aspecto orgánico y pintado a mano. Utiliza la pestaña Pincel en la configuración avanzada de trazo para explorar los estilos de pincel disponibles, incluidos los pinceles personalizados que creaste. Pasa el cursor sobre un estilo para previsualizar cómo se verá en tu selección. Una vez que apliques un trazo de pincel, puedes usar la configuración de Dirección para determinar la dirección del trazo.

Trazo dinámico

Los trazos dinámicos le dan a los trazos de tu selección un aspecto dibujado a mano y con irregularidades. Puedes utilizar la configuración de Trazo dinámico para ajustar la apariencia del trazo:

• Frecuencia: determina la cantidad de irregularidades en el trazo
• Oscilación: determina lo grande que aparecen las protuberancias
• Suavidad: determina lo irregulares que son las protuberancias

Ángulo de unión y ángulo de inglete

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

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

Utiliza la configuración de Ángulo de inglete para controlar el ángulo en el que dos líneas unidas se biselan. Por ejemplo: para un inglete de 90°, cualquier ángulo ≤90° se biselará; cualquier ángulo >90° tendrá una punta afilada.

Descripción de las propiedades de trazo compatibles

Algunas propiedades solo son compatibles con tipos específicos de capas. Consulta la tabla a continuación para verificar si una propiedad específica es compatible con el tipo de capa con el que está trabajando.

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

Mira y copia propiedades de trazo con acceso de solo visualización a un archivo

Si tiene permiso de puede ver para un archivo, las propiedades de trazo aparecen 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 cursor por encima de 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, aún puedes ajustar las otras propiedades. Esto incluye el grosor y la distribución, así como cualquier propiedad avanzada del trazo, como las terminaciones, la unión 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 derecho, haz clic en el ícono de estilo .

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

4. Ajusta cualquiera de las otras propiedades del trazo, según sea necesario.

Escala y redimensiona trazos

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

• Redimensiona el objeto si deseas mantener el grosor del trazo, mientras ajustas las dimensiones del objeto. Pasa el cursor sobre el cuadro delimitador del trazo hasta que aparezca el cursor ; luego, arrastra para cambiar el tamaño.
• Utiliza la herramienta escala para ajustar las propiedades del trazo junto con las dimensiones del objeto. Aprende a usar la herramienta de escala →

Convierte trazos en objetos vectoriales

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

Esto te permitirá:

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

Contornear el trazo

1. Haz clic derecho en la capa y selecciona Contorno de trazo o usa 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 utilizado de trazo como relleno.
3. Puedes ver el aspecto de ese objeto vectorial en el modo de edición vectorial. Presiona Enter/Return o haz clic en Editar objeto en la barra de herramientas para editar el objeto vectorial.