Herramientas esenciales para empezar
Todas las herramientas esenciales para empezar a crear de forma eficaz con Relume Site Builder.
En este documento, aprenderás sobre:
- Kit de Figma para Resume
- Plugin Relume Figma
- Biblioteca Relume Webflow
- Extensión Relume Chrome
- Guía de estilo de Relume para Webflow
- Aplicación Relume Site Builder Import Webflow
Kit de Figma para Resume
El Relume Figma Kit es un proyecto de Figma con más de 1400 componentes, todos creados de la misma manera que nuestra biblioteca Webflow. ¡Todos los meses actualizamos este archivo para incluir todos los componentes nuevos que hemos agregado! Recomendamos duplicar una copia nueva para cada nuevo proyecto.
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936d0d8bb92dbde5addf5_1%20Essential%20Tools_optimized.webp)
{{note-figma-kit="/resources/assets/rtc"}}
{{note-customize-figma="/resources/assets/rtc"}}
Plugin Relume Figma
El plugin Relume Figma te permite importar mapas de sitio y wireframes desde Site Builder a Figma. Puedes importar proyectos completos, páginas o incluso secciones individuales.
Instala el plugin Relume Figma
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936d822d0f2b1e92d9a49_2%20Essential%20Tools_optimized.webp)
{{note-figma-plugin="/resources/assets/rtc"}}
Biblioteca Relume Webflow
La biblioteca Webflow de Relume es nuestra base, donde puedes explorar todos los componentes que existen. Esta biblioteca se actualiza todos los meses y a este día lo llamamos «Día del componente».
Navegue por la biblioteca de componentes
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936df1f2e0dad1c4c2fba_3%20Essential%20Tools_optimized.webp)
Extensión Relume Chrome
La extensión de Chrome de Relume es una herramienta muy importante con algunas características muy importantes.
- Sincronización de clases: te permite pegar un componente en un proyecto existente y sincronizar las clases del mismo nombre con tus estilos.
- Preferencias de componentes: defina sus preferencias para la versión de la guía de estilo o la estrategia de espaciado.
- SVG Icon Converter: copia el código SVG y conviértelo en iconos incrustados en Webflow.
- Actualice la estrategia de espaciado: puede convertir un proyecto existente para usar espaciadores o envoltorios.
Instala la extensión de Chrome de Relume
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936e77e01a622846705d9_4%20Essential%20Tools_optimized.webp)
Guía de estilo de Relume para Webflow
Nuestro punto de partida recomendado para todos los proyectos de Webflow. Esta guía de estilo incluye todas las clases centradas en el cliente que son necesarias para usar Relume. Te recomendamos duplicar una versión nueva de esta versión en cada proyecto para asegurarte de que siempre estás creando la versión más reciente.
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936eed0076dd3e4e5261e_5%20Essential%20Tools_optimized.webp)
{{note-customize-styleguide="/resources/assets/rtc"}}
Aplicación Relume Site Builder Import Webflow
La aplicación Relume Site Builder Import Webflow es tu conexión entre Relume Site Builder y Webflow. Es la forma más rápida de llevar tu mapa del sitio y tus esquemas a Webflow. Sincroniza automáticamente tus clases y convierte las «secciones globales» en componentes de Webflow.
Instala la aplicación Relume Webflow
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936f61c4135faf05fd262_6%20Essential%20Tools_optimized.webp)
{{note-webflow-app="/resources/assets/rtc"}}