Vídeo tutorial: dar estilo a capas de Figma desde una hoja de cálculo con la sincronización de estilos CSS
Este vídeo explica cómo dar estilo a capas de Figma desde una hoja de cálculo con la sincronización de estilos CSS del plugin CopyDoc.
Por ejemplo, si tienes capas de texto en Figma llamadas #SectionHeading, puedes cambiar el tamaño de fuente y el color de esas capas en Figma añadiendo font-size: 40px; color: #999999; a las filas que hay bajo la columna #SectionHeading de tu hoja de cálculo.
Al sincronizar la hoja de cálculo con Figma, los estilos de las capas de Figma que coincidan se actualizarán automáticamente, siempre que el valor CSS sea compatible y se aplique a ese tipo de capa.
Propiedades CSS compatibles para dar estilo a tus capas de Figma
Cada tipo de capa admite determinadas propiedades CSS, y puedes aplicar varias propiedades a una capa poniéndolas en la misma celda de la hoja de cálculo:
por ejemplo, color: #000000; font-size: 24px; font-weight: bold;
| #HeroBlock | #Menu | #CardFrame | #StaffName |
|---|---|---|---|
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
Estas son las propiedades CSS que admite actualmente la sincronización de hojas de cálculo:
Capas de texto
Estas propiedades CSS se pueden aplicar a cualquier capa de texto de Figma.
- color (por ejemplo,
color: #CCCCCC;) - font-size (por ejemplo,
font-size: 40px;) - line-height (por ejemplo,
line-height: 48px;) - font-family (por ejemplo,
font-family: Arial;) - font-weight (por ejemplo,
font-weight: bold;) - font-style (por ejemplo,
font-style: italic;) - text-align (por ejemplo,
text-align: center;) - text-transform (por ejemplo,
text-transform: uppercase;) - vertical-align (por ejemplo,
vertical-align: middle;)
Aplicar estilos de texto a todas las capas hijas. Si aplicas estilos CSS de capas de texto (por ejemplo, font-size: 30px) a una capa que contiene capas hijas (por ejemplo, un frame, un grupo, un componente o una instancia), el estilo se aplicará automáticamente a todas las capas de texto que haya dentro de esa capa.
Otras capas
Estas propiedades CSS se pueden aplicar a otras capas de Figma (imágenes, rectángulos, frames, etc.):
- width (por ejemplo,
width: 100px;) - height (por ejemplo,
height: 100px;) - opacity (por ejemplo,
opacity: 0.5;) - background-color (por ejemplo,
background-color: #CCCCCC;) - border (por ejemplo,
border: 1px solid #CCCCCC;) - border-radius (por ejemplo,
border-radius: 20px;)
Propiedades de posición
Estas propiedades CSS se pueden aplicar a cualquier capa de Figma (incluidos textos, imágenes, rectángulos, frames, etc.).
Transformación
La propiedad transform de CSS te permite cambiar visualmente la posición, la rotación y la escala de un elemento sin afectar al espacio que ocupa en el diseño. Se suele usar en Figma y en herramientas de diseño similares para reproducir desplazamientos, rotaciones y cambios de tamaño que se producen dentro de un frame, no respecto al flujo del documento.
Estas son algunas funciones de transformación habituales:
translate Desplaza un elemento en los ejes X e Y. Ejemplo:
transform: translate(10px, 20px)→ desplaza el elemento 10px a la derecha y 20px hacia abajo.translateX Desplaza un elemento en horizontal, en el eje X. Ejemplo:
transform: translateX(10px)→ desplaza el elemento 10px a la derecha.translateY Desplaza un elemento en vertical, en el eje Y. Ejemplo:
transform: translateY(20px)→ desplaza el elemento 20px hacia abajo.rotate Gira un elemento alrededor de su punto de origen. Ejemplo:
transform: rotate(45deg)→ gira el elemento 45 grados en el sentido de las agujas del reloj.scale Cambia el tamaño de un elemento según un factor de escala en los ejes X e Y. Ejemplo:
transform: scale(1.5)otransform: scale(2, 1.5)→ aumenta el tamaño del elemento 1,5× en total o 2× en horizontal / 1,5× en vertical.
Puedes combinar varias funciones de transformación seguidas. Ejemplo: css transform: translateX(10px) rotate(45deg) scale(1.2); El orden importa, porque cada función se aplica sobre el resultado de la anterior.
Posición X/Y
A diferencia de las transformaciones, los valores X e Y de Figma corresponden a la posición absoluta del elemento dentro de su frame principal o sistema de coordenadas. En CSS, esta posición se representa con propiedades como:
top Indica el desplazamiento vertical desde el borde superior del elemento contenedor. Ejemplo:
top: 100px;→ coloca el elemento 100px por debajo del borde superior de su contenedor.left Indica el desplazamiento horizontal desde el borde izquierdo del elemento contenedor. Ejemplo:
left: 100px;→ coloca el elemento a 100px del borde izquierdo de su contenedor.
Diferencia con transform: - top y left definen la posición en el diseño del elemento. - transform: translate() desplaza el elemento visualmente sin afectar a los elementos de alrededor ni al flujo del diseño.
Repetir automáticamente una capa de Figma con las filas de tu hoja de cálculo
Con las pestañas de sincronización Content o Styles, puedes repetir automáticamente una capa de Figma activando el interruptor Auto Repeat. Este copia la capa de Figma seleccionada originalmente y la duplica tantas veces como filas tengan los datos de tu hoja de cálculo.
Úsalo para convertir una tarjeta, un artículo de catálogo o el diseño de una campaña en un diseño rellenado por cada fila de la hoja de cálculo. Las capas de texto y de imagen del diseño usan las columnas correspondientes de la hoja de cálculo.
Si seleccionas un componente principal, CopyDoc crea una instancia por cada fila. Si seleccionas una instancia existente, se duplica esa instancia; si seleccionas un frame, se duplica el frame.
Si la capa de Figma seleccionada ya está directamente dentro de otra capa de Figma con Auto Layout activado, la capa seleccionada se duplicará automáticamente dentro de esa capa principal. Si no, CopyDoc creará un nuevo frame con Auto Layout y duplicará ahí tus nuevas capas de Figma.
Nombres dinámicos para las capas principales repetidas
Para dar nombre a cada capa de Figma duplicada desde tu hoja de cálculo, haz que el nombre de la capa de plantilla seleccionada coincida con un encabezado de columna. CopyDoc usa el valor de esa columna en cada fila como nuevo nombre de la capa.
Un único # inicial es opcional: una capa llamada #Title puede coincidir con una columna Title, y una capa llamada Title puede coincidir con una columna #Title. Si existen los dos encabezados, tiene prioridad la coincidencia exacta, incluso cuando su valor está vacío. Las mayúsculas y los espacios tienen que coincidir.
Si no hay ningún nombre de capa coincidente en tu hoja de cálculo, el plugin CopyDoc tomará el nombre original de la capa de Figma y le añadirá un número de fila (por ejemplo, My Frame Layer (Row 3)).