Diseña, crea y publica tu portafolio con Figma y Framer

1. 1: Si eres diseñador, o si trabajas en el campo creativo, necesitas un portafolio. No hay excusas, sí, puedes publicar en redes sociales, pero tener tu trabajo en tu propio dominio, en un sitio web que hayas diseñado y construido, siempre será más profesional Pero, ¿cómo se crea un sitio web que es mucho trabajo y tiempo No puedo leer un código. Es súper caro. ¿Y qué plataforma debo usar? No te preocupes, estamos haciendo esto juntos en esta clase. Vas a crear tu propio portafolio que puedas compartirlo con cualquier persona, incluyendo empresas, clientes o familiares y amigos si quieres. Y no tendrás que escribir una sola línea de código. Hola, mi nombre es No Keto. Soy una diseñadora brillante con experiencia radicada en Barcelona. Para encontrar clientes y proyectar, tengo que repasar mi cartera tantas veces. Sé que puede ser una experiencia desalentadora, pero no tiene por qué serlo, especialmente si estás usando las herramientas adecuadas Y esto es lo que vamos a hacer aquí. Vamos a utilizar Figma y Framer para construir nuestro propio Repasaremos nuestro diseño en Figma. Y no te preocupes si no tienes un diseño. He preparado uno especialmente para esta clase que puedes usar para seguir, y luego llevaremos nuestros diseños a Framer Framer es una herramienta que nos permite crear sitio web completamente funcional sin escribir una sola línea de código Lo más importante para esta clase, Framer es completamente gratuito Una vez que tengamos nuestros diseños en Framer, vamos a construir las interacciones para que podamos vincular nuestras páginas, crear sistemas de gestión de contenido para que podamos administrar nuestro contenido dinámicamente, agregar animaciones y transiciones, asegurarnos de que nuestro sitio se vea bien en todos los dispositivos Y por último, publicar nuestro sitio web en nuestro propio dominio. El resultado final, un sitio web que puedes compartir con cualquiera y empezar a buscar ese trabajo soñado. Pero no solo eso, al seguir esta clase, obtendrás las habilidades necesarias para construir no solo este sino cualquier sitio web. Empecemos. 2. Proyecto de clase: El proyecto para esta clase es bastante autoexplicativo. Construirás tu propio portafolio usando Framer. Tienes la flexibilidad de seguir esta clase usando tus propios diseños que construyes en Figma o para usar los que estoy proporcionando en la pestaña de recursos. La elección es suya. Puedes seguir esta clase independientemente de lo que elijas hacer, y estos son los pasos que seguiremos. En primer lugar, prepararemos nuestros archivos Figma. Si eliges usar tu propio diseño, te proporcionaré valiosos consejos sobre cómo nombrar capas y organizar tu diseño para una transición sin problemas El segundo paso será explorar Framer para familiarizarse con la plataforma para que conozcas todo el potencial que ofrece El tercer paso será instalar el enchufe entre Figma y Framer Aprenderemos a instalarlo y usarlo. El primer paso será llevar tus diseños de Figma al framer Este es el momento mágico en el que con solo copiar y pegar, traes todos tus diseños al framer Ajustaremos y cambiaremos todo para que se viera exactamente como querías antes de que tuviéramos animaciones y transiciones o cualquier otra capa de delicadeza El resultado final de esta clase será una URL La que podrás compartir con cualquiera. Y lo más importante, podrás compartirlo con el resto de la clase. Además, si quieres, no dudes en compartir tu diseño Figma para que podamos ver todo tu proceso de diseño Comencemos esta clase buscando en framer. 3. Introducción a Framer: Hemos estado hablando mucho de Framer. Pero, ¿qué es framer? Framer es un creador de sitios web sin código de uso gratuito. Y lo que esto significa es que puedes crear sitios web reales con diseños que hayas construido en cuestión de horas o incluso minutos. No necesitas codificar, solo necesitas tomar tus diseños, meterlos ahí, publicarlo, y tendrás un sitio web en vivo que podrás empezar a construir, obviamente sin un diseño previo. Y haz el trabajo en Framer directamente ya que tiene toneladas de componentes y plantillas con las que puedes comenzar Incluso con un diseño muy simple, puedes agregar animaciones, transiciones, y si sientes que quieres incluso un poco más de código para hacerlo más complejo. Ahora, nada de esto es necesario para construir un sitio web sencillo. Como ya he dicho, también tienes un montón de plantillas con las que puedes empezar. Hay algunos que son gratuitos, otros que se pagan, pero todos son excelentes puntos de partida para tus proyectos. También tiene mucha documentación, videos, tutoriales, e incluso como un curso completamente desarrollado para que comiences en la plataforma No vamos a tener tiempo para cubrir ninguno de estos en esta clase, pero si te interesa, te voy a dejar algunos recursos a continuación para que puedas comprobarlo. Y también siéntete libre de hacer cualquier duda al respecto. Pero echemos un vistazo al editor real. Si es la primera vez que abres framer, tendrás que registrarte antes de poder usarlo Realmente te sugiero que lo uses con Google para que no tengas que recordar tu registro, tu contraseña, etcétera Pero siéntete libre de continuar con tu correo electrónico si quieres mantenerlo separado de tu cuenta de Google. Ahora, cuando llegamos al lanzamiento, se nos presenta nuestra página de proyectos o nuestro panel de control. Si es la primera vez que aterrizas aquí, esto podría estar vacío o tendrá como un proyecto demo. Pero aquí en la cima, hay cuatro formas de comenzar. Puedes comenzar con un tutorial interactivo. Puedes comenzar con una plantilla. Puedes comenzar pegando desde Figma, o puedes ver un tutorial para subir de nivel tus habilidades A la izquierda, tendrás a tu equipo. Entonces en mi caso, tengo un patio de recreo, que es mi espacio para probar diseños. Tengo mi equipo de cartera donde tengo diferentes opciones para mi cartera. Y luego tengo dos proyectos en los que estoy trabajando con otras personas. Pero vamos a crear un nuevo proyecto para poder mostrarte el editor real. Ahora bien, si estás familiarizado con Figma u otros editores, esto se sentirá muy parecido. En la parte superior, tenemos diferentes opciones para comenzar. Podemos comenzar insertando una página completamente completa, solo una sección, algunas opciones de navegación o algunos menús, así como algunas colecciones CMS y otros elementos que podrían ser interesantes para nuestra página, como enlaces de redes sociales o componentes interactivos También podemos comenzar con un diseño como un marco, diferentes filas, columnas o cuadrículas que se ajusten a nuestro diseño Podemos agregar texto simple. La opción de comenzar con CMS, pero no te preocupes, tendremos una lección simplemente enfocada en agregar una colección en framer Y luego tenemos diferentes acciones, lo cual es como un menú rápido para hacer algunas acciones específicas. Cada proyecto obviamente tendrá páginas diferentes. Por ejemplo, tenemos una página de inicio, pero podemos agregar una página acerca de, o podemos agregar tantas páginas como queramos, luego vincularlas como un sitio web real. Cuando agregamos algo a nuestra página, esto obtiene espectáculos bajo el menú Capas. Como funciona en Figma u otras herramientas, podemos seleccionar cada elemento diferente Para cada una de ellas, tendremos diferentes propiedades como la posición, los efectos de tamaño, que son la animación y las transiciones que podemos agregar a ese elemento. Pero nuevamente, no te preocupes, nos centraremos en esto en otra lección. Debido a que se trata de un elemento de texto, tenemos tantos textiles que podemos modificar. Aquí en la parte superior, tenemos los diferentes ajustes del sitio. Tenemos nuestro perfil, tenemos la configuración de localización, para que puedas establecer las opciones de idioma predeterminadas para cambiarlo a otro idioma. También tenemos la configuración de la página y la configuración del sitio. Tenemos algunas propiedades SEO que podemos definir aquí. Tenemos los diferentes dominios. Tenemos redirección, así podemos redirigir desde otra página. Tenemos puesta en escena y versión, lo cual es muy útil si quieres volver a una versión anterior que se guarda en framer Tenemos algunas analíticas que son súper útiles cuando publicamos nuestro sitio web y tenemos los diferentes planes para actualizar. También tenemos la configuración de SEO para cada página específica de nuestro lado. Ahora vamos a pasar por esto mucho más detalle cuando estemos listos para publicar nuestro sitio. No te preocupes si no consigues lo que está haciendo todo esto. Por último, tenemos aquí la opción de previsualizar nuestro lado para asegurarnos de que estamos contentos con él y finalmente publicarlo. Obviamente, esta es una descripción súper rápida de Framer. No te preocupes. A medida que avanzamos en esta clase, voy a entrar con mucho más detalle en algunas de estas áreas como el CMS, cómo agregar animaciones, o cómo crear una versión responsive para móviles. No te preocupes si esto se siente fresco, nos tomaremos nuestro tiempo. Pero por ahora, sigamos adelante e instalemos el taponamiento que nos permitirá llevar nuestro diseño de Figma a 4. Instalación del complemento de Figma to Framer: Hay tantas formas de iniciar el proyecto Framer. Hemos visto en la lección anterior que puedes arrastrar y soltar secciones ya construidas. Puede comenzar desde un diseño y agregarle sus componentes. Puedes comenzar desde una plantilla o puedes comenzar desde un diseño Figma Esto es lo que vamos a hacer Para eso, necesitamos un plug in. Volvamos a nuestro panel de control o página de proyectos. En la parte superior, debemos seleccionar Pegar de Figma. Si por alguna razón no lo ves, ve a Framer.com slash Ahí vamos. Al hacer clic en este enlace debería llevarte a la misma página. Realmente no importa qué opción elijas. Haga clic en Obtener el Enchufe de Figma, y esto abrirá la página de Figma para ese enchufe Ahora, en mi caso, no estoy encerrado. Voy a hacerlo rápidamente. Si no te has encerrado en Figma en el navegador, te sugiero que lo hagas también Una vez que estés encerrado en Figma, da click en Pruébalo Esto debería abrir un nuevo archivo Figma con la pantalla del plugin. Abierto. Esta pantalla nos da cierta información sobre cómo usarlo, cómo nombrar nuestras capas, cómo asegurarnos de que nuestros grupos estén completamente conservados. Y también tienes un enlace a un tutorial. Ahora este es un archivo vacío. Si pegamos a Run, nada va a pasar realmente. Como si no hubiera nada que copiar aquí. Vamos a crear rápidamente un diseño para que podamos probarlo. Ahora voy a crear un fotograma que sea de 120 o 50 pixeles. Voy a darle algunas esquinas redondeadas y le voy a dar algo de color. Voy a añadir el texto. Funcionó. Voy a seleccionar el marco y debería diseñarlo solo para asegurarme de que el espaciado sea correcto. Ahora que esto está hecho, voy a seleccionar el marco de aquí. También puede seleccionarlo de la capa spanel. Ve a nuestro menú Figma, presiona Plugins y presiona Figma a HTML con Y esto debería decirnos que se está copiando algo. Ahora, tal vez te presenten este pop up aquí. Solo necesitas seleccionar copiar al portapapeles. Dice copia a capas basadas en framer. Hagámoslo. Vamos a abrir Framer. Voy a abrir el sitio que iniciamos anteriormente. Voy a ir a la página Acerca de y solo presionar comando V. Aquí está nuestro botón. Voy a centrarlo un poco más. Esto es lo mismo que hemos diseñado en Figma. Si abres aquí la capa spanel, verás que tenemos un marco y tenemos algo de texto Y el texto, en realidad es editable. Para que podamos eliminarlo y reemplazarlo por otra cosa si queremos. No solo es muy fácil copiar nuestros diseños de Figma en framer, sino que todo es editable y todo conservará lo que diseñaste Ahora bien, si esto no ha funcionado, si no has podido instalar el enchufe y copiar el diseño de Figma en framer, te sugiero que vuelvas a pasar por el proceso Pasas a Framer.com slash Figma. Consigue el enchufe Figma, asegúrate de estar encerrado en Figma cuando golpees pruébalo Y también asegúrate al abrir Figma que si vas al menú de plug-ins Figma a Tema con framer aparece en Si esto aún no te funciona y no has podido instalar el enchufe, avísame a continuación y haré todo lo posible para ayudarte a configurarlo para que puedas continuar esta clase correctamente. Sin embargo, si esto te ha funcionado, y ahora ese patrón se copia en framer, estás listo para la siguiente lección, que es traer nuestros diseños de Figma a la plataforma 5. Comprobando los diseños de Figma: Antes de copiar completamente todo, echemos un vistazo al diseño que he preparado para ti. Ahora recuerda, puedes usar tus propios diseños o puedes usar los que estoy viviendo bajo su pestaña de recursos. Esta técnica funcionará en ambos sentidos. Aquí tengo un sitio portafolios muy sencillo. Tenemos una página de inicio, tiene un menú de navegación en la parte superior con tres pestañas. Tenemos trabajo, tenemos sobre, y tenemos una página de contacto. Tenemos un poco de encabezado aquí en la parte superior con mi propio nombre, mi título, mi ubicación y mi disponibilidad actual. Entonces tenemos algunos proyectos aquí. No he añadido ningún título, pero fíjate como cada uno de ellos tendrá el mismo diseño. Tenemos algunos CTA, nos ponemos en contacto, y luego un pie de página con enlaces a redes sociales También he diseñado la versión móvil, y aunque no vamos a copiar esta versión en framer, es buena porque me da una idea de cómo quiero que se vea mi diseño en un dispositivo móvil Tenemos entonces lo mismo para la página del proyecto. Tenemos el proyecto aquí en la parte superior, tenemos una imagen principal, poco de descripción, el rol cliente, algunos datos sobre ese proyecto. Entonces tenemos algunas imágenes, párrafos, y lo mismo con un diseño diferente. Entonces el mismo CTA aquí en la parte inferior. Por último, tenemos un sobre pit con un encabezado con alguna información un poco sobre mi experiencia, cómo ponerme en contacto y ese mismo CTA Este es un diseño muy básico, pero tiene algunos elementos que a medida que trabajamos en él en framer, nos hará la vida más fácil Cosas que podemos reutilizar. Cosas que podemos diseñar una vez y simplemente duplicar tanto como queramos. Vamos a tratar de construir esto de manera eficiente. Algo a tener en cuenta también es que he intentado nombrar cada capa y cada grupo que una vez que copiemos en framer, sea mucho más fácil entender qué se está copiando y qué bit estamos editando Te sugiero que si estás usando tus propios diseños, hagas lo mismo. Asegúrese de que cada sección esté agrupada correctamente y que cada capa tenga el nombre apropiado. Si quieres usar este diseño en lugar del tuyo, ve a los recursos, apuñala y descárgalo de ahí nuevamente Si tienes algún problema con ello, avísame y haré todo lo posible para ayudarte con ello. 6. Copia de los diseños en Framer: Deberías estar todo listo. Si has visto hasta ahora, deberías tener una cuenta con framer. Ha instalado el enchufe para llevar nuestros diseños Figma en el marco, y ya está listo para comenzar Recuerda, puedes usar tus propios diseños, pero voy a usar el proyecto que he presentado en la lección anterior para toda esta clase. Vamos, para simplificar las cosas, sólo vamos a copiar la versión de escritorio. Y vamos a comenzar con la página de inicio. Voy a volver a Framer y volver a mi dashboard para poder crear un nuevo proyecto Voy a golpear nuevo, y se me debe presentar una página en blanco. Voy a volver a Figma. Voy a ser un poco brutal. Voy a seleccionar todo en mi página de inicio. Todo está bajo un marco, pero voy a seleccionar las diferentes secciones de mi página de inicio. Voy a ir al menú Figma plug ins, y golpeo Figma a HTML con Observe aquí en la parte inferior cómo está diciendo que está copiando mis capas. Voy a decir copiar al portapapeles, y me está diciendo que está copiado 51 capas que puedo pegar en Framer Voy a volver a Framer, seleccionando el escritorio y sólo voy a decir comando Quizá estés pensando, bien, aquí todo está copiado, pero no puedo ver nada. Bueno, el color de fondo es ligeramente diferente. Voy a asegurarme que el color de fondo que tengo en Figma, es el mismo que tengo en Framer. Ahí vamos. Todo está copiado ahora. Pero no puedo ver más allá de este punto. Esto se debe a que este escritorio no tiene la altura adecuada. En lugar de decir 1,000 higos, solo voy a decir contenido apto. Y ahí vamos, eso es perfecto. Pero de nuevo, me estoy topando con otro problema. Ahora bien, el ancho que tengo en framer es ligeramente menor que el ancho que tengo en Figma Hay dos formas de resolver esto. O cambiamos el escritorio con framer para que coincida con el de Figma, o cambiamos los diferentes elementos que están más allá de este punto para encajar en este nuevo ancho Puedes hacer lo que quieras. En este caso, definitivamente depende de ti. Pero porque puedo ver es solo este elemento aquí, mientras que el resto está funcionando correctamente. Yo sólo voy a arreglar esto. En vez de decir que el ancho es fijo, voy a decir que el ancho está en el relleno, el ancho está llenando el contenedor con el que está este elemento. Podemos hacer lo mismo con estos otros elementos. Este es nuestro mismo diseño que tenemos en Figma, y ahora está en Framer Lo bueno aquí es que en Figma hemos construido todo usando el diseño automático, lo que significa que está preservando las diferentes distancias entre los elementos Se trata de preservar los diferentes diseños. Y algo tan rápido como fijar el ancho. Y la altura de un elemento es muy simple porque está construido como una pila como diseño automático en Figma. Ahora bien, si no estás familiarizado con el diseño automático en Figma, te sugiero que veas tutoriales y te familiarices con él porque es una de las herramientas más útiles que ofrece la plataforma Porque es algo muy común. Ahora, Framer, aunque tiene un nombre diferente, y lo llama Stack, ofrece las mismas propiedades que tenemos en Figma, por lo que podemos igualar nuestro diseño exactamente Ahora vamos a hacer rápidamente nuestra página acerca de también. Vamos a páginas y creamos una nueva página, que vamos a llamar. Hagamos lo mismo. Vamos a nuestro archivo Figma Voy a la página acerca de. Selecciono las diferentes capas que tengo aquí. Entra en el menú de Figma. Conecte Figma a HTML, asegúrese de que lo esté copiando. Copia al portapapeles, ve al framer, y pulsa el comando V. Ahora estamos corriendo con el mismo problema. Sabemos cómo arreglarlo. Ahora vamos a establecer el alto para que se ajuste al contenido. Este pedacito aquí, vamos a decir Feel. Lo único aquí es que debido a que esta versión de escritorio es un poco más estrecha que la que tenemos en Figma, no hay tanto espacio entre estos dos elementos en la versión framer Ahora, podemos dejarlo como está, o podemos cambiarlo si queremos. Voy a decir inicio, y voy a hacer esta imagen un poco más pequeña. Tiene aproximadamente la misma altura que el elemento de texto. Ahí vamos. Tenemos nuestra página acerca de todo copiado. Ahora dije antes que podemos ser eficientes con la forma en que diseñamos las cosas que se ven igual y funcionan igual en diferentes páginas se pueden convertir en componentes reutilizables. Si volvemos a nuestra página de inicio, tenemos aquí este enlace del proyecto y se repite varias veces. Ahora cada proyecto es el mismo elemento con la misma información. Tendrá diferentes títulos, pero son los mismos datos. Tenemos un título, tenemos un tipo, y tenemos un año. Eso luego enlazará a otra página. Podemos convertir este elemento en un componente. Ahora bien, ¿qué es un componente? Es exactamente lo mismo que lo que hay en Figma. Básicamente, los componentes son elementos que puedes reutilizar en todo tu proyecto o en todo tu diseño, y te ayudaremos a administrar diseños consistentes en diferentes páginas. Podemos seguir adelante seleccionar el enlace completo. Así que asegúrate de que estás seleccionando el enlace del proyecto. Vamos a hacer clic derecho y decir Crear componente. Voy a llamarlo Project Link. Esto creará una página separada donde podremos editar ese componente maestro. Voy a quitar todo esto si lo queremos, podemos duplicar éste, tener exactamente lo mismo. Pero ahora si queremos editarlos todos a la vez, solo podemos ir aquí. Voy a cambiar el lado del teléfono, va a decir 64, voy a decir 24. Cuando vamos a nuestra página de inicio, está cambiando todas sus instancias. Es una muy buena manera de trabajar de manera eficiente y de asegurarse de que todos los elementos que se ven igual a tu lado se actualicen correctamente. Por ahora, lo vamos a dejar así. Hemos copiado los diseños para nuestra página de inicio y para nuestra página Acerca de Figma en framer Podrías estar pensando, bien, ¿ qué pasa con la página del proyecto? Tenemos una página de proyecto aquí que deberíamos estar copiando también, ¿verdad? Bien. No lo vamos a copiar ahora mismo porque requiere que conozcas las colecciones y CMS, que casualmente es la siguiente lección 7. Comprensión del CMS: Ahora tenemos el esqueleto principal de nuestro sitio. Tenemos nuestra página de inicio, y tenemos una página acerca de. Y ahora necesitamos pensar en nuestros proyectos, pero antes de eso, necesitamos hablar del CMS o de las colecciones. Imaginemos lo siguiente. Cada proyecto es un bloque. Cada bloque tiene información diferente, porque dos proyectos no tendrán el mismo título. A lo mejor tienen el mismo año , a lo mejor tienen el mismo cliente, pero los campos serán los mismos. Tienes un título, tienes un tipo de proyecto, tienes un año, tienes un cliente, y tal vez tienes algunos párrafos y algunas imágenes. Cada página básicamente tendrá contenido diferente, pero tendremos la misma estructura. Podemos pensarlo dinámicamente. Creamos la página o ese componente uno, y lo usamos para cada proyecto con diferentes datos en ella. Para eso, necesitamos colecciones. Ahora bien, si no lo estás siguiendo, vamos a verlo de una manera práctica. Iremos a la Puñalada CMS y vamos a golpear aquí en la parte superior, el botón más Esto es crear una colección para nosotros, y vamos a llamarla Proyectos Perfectos. Ahora bien, esto no tiene un ítem aquí, solo tiene dos campos aquí. Tenemos título y tenemos Slug, que son los datos básicos que necesitamos Aquí vamos a decir editar campos. Puedes agregar lo que quieras. Ya mencionamos algunos. Agreguemos texto plano y digamos año porque será texto plano. Vamos a agregar cliente. También vamos a agregar tipo de proyecto y vamos a agregar rol por ahora. Eso es. Mira que puedes agregar diferentes tipos de campo por ahora. Sólo vamos a mantenerlo como texto plano para que podamos editarlo rápidamente. Pero siéntete libre de explorar todo esto. Ahora tenemos todos estos campos, pero no tenemos ningún contenido. Vamos a crear un nuevo elemento de prueba aquí, podemos llenar los diferentes campos que hemos creado para el título. Voy a decir sitio web de la tienda Nike, que es un proyecto imaginario que nunca he hecho, pero sería un año realmente bueno. Voy a decir cliente 2019, obviamente. Tipo de proyecto Nick. Voy a decir diseño de sitios web, inscríbase. Voy a decir diseñador UX. No voy a añadir ningún contenido por ahora. Y yo sólo voy a decir seguro, genial. Eso agregó una línea a nuestro CMS. Voy a poblar esto con algunos proyectos falsos, para que podamos explorar las opciones de CMS Bien, vamos a trabajar con estos cinco ahora tenemos esta información aquí. Si volvemos a nuestra página, verás que tenemos el CMS aquí y tenemos nuestros proyectos. Pero ahora necesitamos sacar esta información del CMS a nuestro diseño real. Porque aunque he agregado cinco proyectos a mi CMS, estos no se muestran en ninguna parte. ¿Cómo debo hacer eso? Ahora hay dos formas en las que podemos usar esta información. Podemos usarlos como lista de colecciones o podemos usarlos como páginas específicas. Ahora, las listas de colección son todos los artículos de nuestra colección en un solo lugar. Imagínese como una lista de todos los artículos que tenemos en nuestro CMS. Sólo hay que poner en una página, que es exactamente lo que necesitamos para nuestra página de inicio. Las páginas son páginas para cada elemento en nuestro CMS, una página para cada uno de nuestros proyectos. Ahora bien, la forma de insertar esto es pasando por debajo de Insertar. Y bajo la sección CMS aquí tenemos la lista de recolección. Y podemos arrastrar y soltar aquí todos los proyectos, o podemos arrastrar y soltar campos de contenido en nuestra página específica. Ahora tenemos nuestro CMS agregado con cinco proyectos y los diferentes campos que necesitamos. Sabemos que necesitamos todos estos proyectos como una lista en nuestra página de inicio. Y sabemos que necesitamos una página específica para cada proyecto donde saquemos toda esta información. Porque esto requiere un poco más de trabajo y necesitamos terminar nuestro diseño. Centrémonos en esto en nuestro próximo video, donde tendremos una lista de proyectos en la página principal y una página de proyecto para cada uno de nuestros proyectos. 8. Creación de una colección de CMS: Genial, así que centrémonos primero en la página de inicio. Lo primero que necesitamos es una lista de nuestros proyectos. Voy a quitar todo esto y solo dejar una instancia de nuestro componente de proyecto. Recuerda que creamos un componente para este título de proyecto, y lo voy a dejar así. Verás por qué. Vamos a ir a insertar debajo de la sección CMS, vamos a decir lista de colecciones. Voy a arrastrar esto aquí. Esta es la forma en que nuestros proyectos se presentan como una lista. Es correcto porque está tirando de toda la información, pero no se parece en nada a nuestros diseños. Pero por suerte para nosotros, hay una manera rápida de arreglarlo bajo capas. Se puede ver, en primer lugar, que lo hemos agregado en el lado equivocado. No debería estar bajo CTA. Esta lista de recolección debe estar bajo la sección de proyectos. Antes que nada, cambiemos eso. Ahora. Voy a eliminar los contenidos dentro de esta lista de colecciones donde dice Post, voy a eliminarlo. Esta lista de colecciones está básicamente conectada a nuestro CMS, y lo que hace es extraer la información de nuestro CMS a cualquier contenido que tenga debajo. Así podemos tomar nuestro componente y podemos arrastrarlo dentro de la lista de colecciones. Ahora, va a crear cinco instancias de lo mismo, porque tenemos cinco proyectos. Pero ahora tenemos dos problemas. En primer lugar, nuestro diseño ha cambiado. Eso se debe a que la lista de colecciones no tiene el ancho correcto. Entonces en vez de decir fijo, voy a decir, siéntete genial. Lo primero arreglado. Lo segundo es que no se trata de extraer los datos de cada proyecto, de nuestro CMS. ¿Por qué es eso? Bueno, eso tiene una respuesta muy sencilla. Este es un componente. La idea básica de un componente es que sea lo que diga aquí, lo dirá aquí a menos que lo cambiemos. Pero aquí solo tenemos un elemento y no podemos editar este aquí. ¿Cómo editamos éste? Muestra la información de cada uno de nuestros proyectos. Lo que tenemos que hacer ahora es crear variables. Oso conmigo, Esto no es tan complejo como suena. Lo único que tenemos que hacer es asegurarnos de que estos tres campos cambien con cualquier información que estemos sacando del CMS. Hay una manera muy fácil de hacerlo. Nuestro título de proyecto aquí debajo de la sección de texto, dice contenido sobre contenido, dice título del proyecto. Si cambiamos esto, cambiará el texto aquí. Si volvemos a nuestra página de inicio, cambiará el texto aquí para todas nuestras instancias. Bien, genial. Lo que tenemos que hacer es asegurarnos de que esto sea variable. En vez de escribir aquí lo que queremos, vamos a crear una variable. Lo hacemos golpeando este plus junto al contenido y decimos crear variable y decir texto plano. Vamos a llamarlo lo mismo que lo teníamos. Y vamos a decir que el valor por defecto es título del proyecto y de esta manera vuelve a cambiar a lo que tenemos. Genial, voy a seguir adelante y hacer lo mismo por los dos. Vamos por debajo del texto, vamos a decir contenido crear variable, texto plano, tipo de proyecto, y luego vamos a decir año. Y lo mismo. Contenido crear variable, texto plano, año. Ahí vamos. Ahora está conectado. Este texto debería ser ahora dinámico porque no podemos cambiarlo aquí, vamos a volver a nuestra página de inicio. Esto no ha cambiado, pero ahora podemos extraer información porque hemos creado estas tres variables. Aquí en el panel lateral derecho, diremos algo dice Project Link, que es el nombre de nuestro componente y las tres variables que hemos definido. Lo que podríamos hacer aquí es cambiarlo manualmente. Pero nuevamente, va a cambiar para cada proyecto, y eso no es lo que queremos. Observe este botón más aquí. Ahora podemos conectarlo a variables que tenemos de nuestro CMS. Podemos decir que el título del proyecto será nuestro título. El tipo de proyecto será, el tipo de proyecto será el año. Así es como lo cambias dinámicamente. Ahora tenemos toda la información que se está sacando de nuestro CMS a esta lista de proyectos, y eso es perfecto. Pero ahora necesitamos una página para cada uno de estos proyectos. Vamos a ir a la pestaña Página bajo CMS. Vamos a golpear los proyectos P y decir página de detalles. Esto creará un toque aquí que dice las páginas del proyecto. 55 es el número de proyectos que tenemos en nuestro CMS. Aquí en la parte superior, podemos ver todos los diferentes proyectos que tenemos. Lo bueno de aquí es que solo necesitas diseñarlo una vez. Si seguimos adelante y diseñamos esta campaña de Apple, se adaptará para cada una de nuestras páginas de proyecto. En primer lugar, borre todo esto. Entonces vamos a volver a nuestro diseño Figma y hacer lo mismo que hicimos para nuestra página de inicio y para la página acerca de, que es copiar todo con nuestro plug in Recuerda que vamos al menú Figma, Plug in Figma a HTM con Ya sabes cómo funciona. Debería ser muy rápido. Y vamos a seleccionar esto y calentar la pasta. Perfecto. Ya tenemos nuestra página. Se ve bien. Aquí tenemos algunos problemas con una imagen, pero sabemos cómo modificarla que vamos Recuerda que ahora estamos editando la manzana, los proyectos de Apple, lo mismo que hemos hecho antes. Podemos asignar diferentes datos de nuestro CMS en diferentes campos, en nuestro sitio. Selecciono el tipo de proyecto, que en realidad debería establecer título del proyecto, perdón por eso. Pero seleccionamos título del proyecto, vamos al texto Conjunto de contenido variable y decimos título bajo año. Podemos hacer exactamente lo mismo. Voy a cambiar esto también, solo para que veas cómo cambia para todas las diferentes páginas. No estoy seguro si he creado uno para el rol. Sí, lo hice. Perfecto. Voy a hacer eso por tipo de proyecto. Tenemos el tipo de proyecto. Bien. Ahora estamos en la página de campaña de Apple, pero si voy al Lego One, debería actualizarse con toda la información que tenemos en nuestro CMS. Eso es perfecto. Eso es exactamente lo que queremos. Lo hemos creado una vez, hemos sido eficientes con él, y no necesitamos crear una página para cada uno de nuestros proyectos. Lo más importante es que si ahora queremos editar esto, porque realmente no nos gusta nuestro diseño en Figma, queremos cambiar algo, lo que queramos Cualquier cosa que cambiemos aquí en cuanto a maquetación, en cuanto a fondos, en cuanto cualquier cosa se adaptará para cada página. Todos se verán exactamente iguales. Ya has visto lo fácil que es trabajar con el CMS. Agrega todos los datos aquí. Y lo que es más es que podrías agregar más artículos aquí y editar los campos como quieras, y puedes extraer esa información en los diseños. Pero lo que es bueno ahora es que ahora tenemos todas las páginas de nuestro sitio. Tenemos nuestra página de inicio con todos los proyectos aquí como lista. Tenemos la página acerca de. Tenemos las páginas del proyecto para cada uno de nuestros proyectos. Ahora hemos configurado el diseño, hemos añadido la colección. Así que estamos listos para el siguiente paso, que es conectar todas estas páginas juntas para que puedas navegar a cada una de ellas. 9. Vincular las páginas: Hay múltiples cosas que necesitamos para conectar de nuestro lado. Necesitamos conectar la navegación a cada página individual de nuestro lado, necesitamos conectar cada enlace del proyecto a cada página del proyecto. Por último, necesitamos conectar esto ponerse en contacto a tal vez una dirección de correo electrónico. Y estos tres enlaces de redes sociales a las plataformas o perfiles de redes sociales que queremos. En primer lugar, comencemos con los del proyecto porque creo que es el más importante. Ahora lo que tenemos que hacer es volver a nuestro componente. Porque recuerda que lo que queramos editar en esta lista de proyectos, necesitamos ir al componente solo para asegurarnos de que se aplique a cada uno de ellos. Haga doble clic para entrar en él. Ahora vamos a agregar un enlace a todo el asunto. Lo que podemos hacer es simplemente agregar enlace aquí. En lugar de etiquetar una página o URL específica aquí, vamos a crear una variable Podemos editarlo en nuestra página de inicio, crear la variable, eso está bien. Ahora vamos a volver a la página principal. Recuerda que accedemos a las variables desde la sección aquí bajo link de proyecto componente, porque no tenemos nada en el CMS que sea un enlace ni nada por el estilo. Aquí no tenemos ese patrón plus. Pero si haces clic aquí en A, veremos proyecto de holgura de colon. Lo que significa sluck es la página real del proyecto, el enlace específico para cada proyecto como se define en el CMS Ahora si le pego a Slc, ahí vamos. Se enlazará a la página del proyecto correspondiente. Hay una manera de probarlo, y para eso necesitamos previsualizar nuestro lado, que está aquí en la cima. Podemos hacer click aquí. Podemos desplazarnos hacia abajo hasta nuestra lista de proyectos y acertar a uno de los proyectos perfectos. Y tal vez diga la pierna de uno que sea perfecto. Increíble. Ahora los proyectos en nuestra lista de proyectos están vinculados a cada página de proyecto específica. Lo segundo que vamos a hacer es la navegación. Ahora podemos ser eficientes con la navegación porque es un elemento que se repetirá para todas las páginas de nuestro lado. ¿Por qué deberíamos editarlo en cada una de las páginas? De hecho, deberíamos tener un componente para esto. Esto es lo que vamos a hacer. Vamos a escribir, hacer clic y decir, crear un componente de navegación que sea perfecto, que creará un componente para nuestra navegación que solo podremos copiar y pegar en todas las páginas de nuestro lado y solo editarlo una vez. Antes de hacer eso, voy a enlazar cada uno de estos enlaces. Esto debería llevarte a la página principal, también debería llevarte a la página principal porque no tenemos una página específica para el trabajo, About debería llevarte a la página acerca de contacto. Por ahora, vamos a vincularlo a una dirección de correo electrónico solo porque no tenemos una página de contacto específica. Vamos aquí. Voy a seleccionar el icono. Voy a ir aquí donde dice enlace. Voy a enlazar a la página principal. Ahí vamos. Ahora está vinculado. Ahora vamos a seleccionar obra. Haz lo mismo. Enlace a la página de inicio, el enlace de la página acerca de. Y vamos a enlazar a la página acerca de. Observe aquí donde dice enlace. Es porque está tirando de un estilo predeterminado que podemos cambiar si quieres, podemos cambiar cómo se ve. Por defecto, cualquier enlace es con este color. Y realmente no me gusta, sólo me gusta mi color blanco. Pero en Hover, tal vez vamos a cambiarlo de azul más oscuro. Vamos a probarlo. Recuerda, puedes previsualizar cualquier cosa. Puedes obtener una vista previa de este componente aquí. Sí, es un poco duro de ver, pero sí, vamos a dejarlo así. Después la página de contacto, vamos a agregar un correo a, voy a decir mi correo electrónico. Y eso abrirá tu aplicación de correo predeterminada para escribir un correo electrónico. Entonces vamos a dejarlo así y no preocuparnos demasiado. Ahora tenemos nuestro enlace de navegación a la página acerca de. La página de trabajo. Volvamos a la página principal. Lo que haremos es simplemente copiar esta navegación para que puedas mandar o simplemente decir copy. Vamos a ir a la página acerca de. Presiona escritorio, di comando V, arrástralo hacia arriba, Perfecto, y quita la navegación que no es un componente. Ten cuidado con cuál eliminas. Este es un componente con este símbolo de diamante aquí. Este no lo es. Entonces lo vamos a quitar. Vamos a ir a nuestras páginas de proyectos. Recuerda que solo necesitas hacerlo una vez. Y aquí voy a seleccionar Escritorio, decir comando V, arrastrarlo hasta arriba, y quitar la navegación que no es un componente. Aquí, tenemos un poco de espacio en la parte superior, y me voy a asegurar de que esté en la parte superior. Ahí vamos. Ahora solo tenemos que verificar que esté funcionando para todas nuestras páginas. Eso es perfecto. Eso es exactamente lo que queríamos. Ahora hagamos lo mismo con nuestro pie de página, que debería ser mucho más fácil porque ya sabemos cómo hacerlo. Recuerda click derecho, crea un componente, vas a decir pie de página y vincularlo a cada una de tus redes sociales preferidas. Genial, ahí vamos. Ahora volvamos a nuestra página de inicio. Voy a mandar a C que me copie el pie. Volver a la página acerca de. Copia el pie de página y asegúrate de que esté en la posición correcta. Y quítate esta. Asegúrate de que el ancho esté lleno solo queremos tomar el espacio completo. Después vamos a ir a las páginas del proyecto, Seleccionar Escritorio y eliminar el pie de página. Eso no es un componente. Eso es. Tenemos nuestro pie de página conectado, nuestra navegación conectó los enlaces del proyecto conectados a cada página específica del proyecto. Pero porque la navegación, porque el pie de página, porque todo tiene que estar conectado no sólo en el escritorio, sino también en el móvil y otros puntos de interrupción, necesitamos hablar de capacidad de respuesta Y este será un gran tema. Prepárate para la siguiente lección. 10. Diseño para móviles: página de inicio: Creo que es bastante obvio que en esta época, todos los sitios web tienen que verse bien en todos los dispositivos. Y podemos suponer que todos estarán mirando nuestro sitio web desde nuestro dispositivo deseado, en este caso, una computadora portátil. La mayoría de las personas acceden a los sitios web desde su teléfono, y necesitamos atenderlo. En realidad, ya lo hemos hecho. En nuestros diseños, puedes ver que hemos diseñado para escritorio y también hemos pensado en el layout que queremos para móviles. Eso está bien, pero ¿cómo aplicamos realmente estos diseños en Framer Ahora, Framer, por defecto, cuando abres este sitio en el móvil, escalará todo Todo se verá muy pequeño. Y eso no es lo que queremos, solo queremos asegurarnos de que se vea bien y accesible. Ahora lo bueno es que hemos diseñado usando auto layout o stack, Adaptarlo al móvil no debería tomar tanto tiempo, aunque requiere un poco de afinación. Vamos a agregar un punto de interrupción para el móvil y se puede ver que todo se ve mal. Eso está bien. Eso vamos a retocar Lo primero es que vamos a adaptar nuestra navegación. No vamos a hacer ningún menú elegante por ahora. Voy a dejar eso para una lección extra que podrás ver más tarde. Pero solo vamos a asegurarnos de que puedas acceder a cada uno de esos enlaces. Aquí vamos a crear una variante y le voy a dar una talla. Voy a decir que esta variante es 390 porque ese es el tamaño que nuestro dispositivo tiene aquí. Yo sólo voy a copiar eso. En lugar de tener estos tres eslabones uno al lado del otro, los voy a poner como una pila vertical. Y voy a dejar un poco más de espacio. Voy a decir 35. Y sólo voy a asegurarme de que todo esté alineado al centro. Vamos a ir con eso aquí. En lugar de tener esta variante uno, voy a decir variante dos y asegurarme de que quede bien. Perfecto. Lo segundo es el encabezado. Ahora, lo primero que noto aquí es que mi nombre es enorme, y no lo quiero tan enorme. Redujamos el tamaño del teléfono. Fresco. Verás que todo se ha duplicado. Entonces ahora tenemos capas para escritorio y capas para teléfono. Puedes acceder rápidamente a cada elemento en nuestro dispositivo telefónico. Voy a decir 42. Aquí también tenemos esta pila que está sentada una al lado de la otra. En lugar de horizontal, voy a decir vertical. Voy a decir que dejó una línea. Eso ya está funcionando. Pero, ¿puedes ver? Hay mucho relleno a su alrededor. No necesitamos tanto. Voy a seleccionar toda la pila en vez de tenerla aquí. Podemos dejar los 200 para arriba y abajo, pero vamos a decir 20 aquí, 20 aquí. Eso ya es mucho mejor. Sólo le voy a dar un poco más de espacio en lugar de espacio entre, voy a decir empezar, no necesito tanto. Sólo voy a sumar 15. Eso ya se ve mucho mejor. Eso es perfecto. Sigamos adelante con estas secciones. Aquí vamos a necesitar ser inteligentes. En primer lugar, para toda esta sección, voy a cambiar el mismo padding que teníamos para el de arriba en vez de 80 derecha e izquierda, voy a decir izquierda, y eso ya es un poco mejor. Voy a cambiar el fondo aquí. Voy a decir 24. Pero ahora necesito entrar en cada componente, lo mismo que hemos hecho para nuestra navegación, y cambiarlo aquí para que pueda adaptarse a cada uno de nuestros proyectos. Vamos dentro de nuestro componente de proyecto. Nuevamente, lo mismo que hemos hecho con la navegación. Vamos a crear una variante que sea 390 de ancho. Lo primero que me estoy notando es que este título de proyecto es enorme Cambiemos ese tamaño de fuente también. Va a ser 42. El tipo de proyecto será 24, lo cual ya es bueno. 24 para el año, que es perfecto. Ahora en el diseño de nuestro teléfono, vamos a seleccionar el componente y asegurarnos de que dice la variante dos. Se ve bien en términos de dimensionamiento, pero está haciendo cosas raras porque se extiende más allá de lo que necesitábamos ser. Vamos a volver al componente y este título del proyecto. Vamos a asegurarnos de que diga llenar. Vamos a dejarlo como espacio entre y debajo de los detalles del proyecto. Vamos a decir con relleno, solo para asegurarnos de que este título de proyecto ocupe el mayor espacio posible sin pasar el primer año. Cuando volvamos a nuestra página de inicio, esto debería ser arreglado. Ahora fíjate que no hay mucho espacio entre el título y el año en que el título es largo. Y podemos arreglar esto diciendo, en lugar de espacio entre, podemos decir inicio y sumando esa brecha de 50, que debería arreglar esto. Sí, eso es perfecto. Así es exactamente como queremos que se vea. Ahora sigamos adelante y ajustemos tamaños de fuente que parecen un poco demasiado grandes para mi gusto para decir 38 Y vamos a arreglar este pie de página de la misma manera que lo hemos hecho con nuestra navegación. Vamos a crear otra variante. Le vamos a dar un 319. Nos estamos asegurando de que se trata de una pila vertical. No le vamos a dar tanto pudín. Y vamos a centrarlo. Ahora seleccionamos el pie de página, y decimos variante a eso es perfecto. Así es exactamente como queremos que se vea nuestra versión móvil. Todo estará conectado igual. Es solo el diseño que hemos cambiado solo para que coincida con nuestros diseños. Lo cual es perfecto. Genial, sigamos adelante y ajustemos las páginas del proyecto y también la página acerca de 11. Diseño para móviles: páginas de información y proyectos: Entonces ya sabemos cómo crear un punto de interrupción receptivo móvil como lo hemos hecho para la página de inicio Hagamos lo mismo para la página acerca y esto debería ser bastante más rápido. Vamos a crear un punto de interrupción para el teléfono, en primer lugar, vamos a seleccionar la variante correcta para la navegación y para el pie Voy a cambiar los teléfonos porque ya sé el tamaño del teléfono que tienen. Para este también, tenemos que abordar aquí las secciones medias. Y debería ser bastante sencillo porque de nuevo, estamos usando stack y ya todo está configurado para ser responsive de alguna manera. Lo primero que vamos a hacer es abordar el cabezazo. tenemos una pila horizontal Aquí tenemos una pila horizontal que cambiará a una vertical, y eso ya está resolviendo esto. Vamos a cambiar el relleno así como lo hemos hecho para la página de inicio que ya está mejor sentada. Vamos a cambiar el tamaño del teléfono para decir 64. A decir, Phil, voy a cambiar este texto aquí para llenar el espacio. Genial, creo que eso ya está resolviendo mucho para esta imagen de aquí. Está sentado un tat más pequeño para que pueda llenar el espacio. Vamos a decir, Phil, perfecto, ya resolviendo mucho. Tenemos el encabezado. Ahora abordemos esta experiencia aquí. Nuevamente, debería ser bastante simple. En primer lugar, vamos a, de nuevo, cambiar el relleno, que ya sabemos hacer. Las pilas horizontales aquí, vamos a cambiar a verticales. Entonces tenemos algunas pilas aquí para cada uno de los roles. Se trata, de nuevo, de pila horizontal que podemos cambiar como verticales, Tienen mucho hueco en el medio Cambiemos eso rápidamente para cada uno, voy a decir diez. En lugar de tener el espacio entre, voy a decir inicio y le voy a dar un espacio de 50. Perfecto, podemos hacer lo mismo con esto. Ponte en contacto, tenemos aquí esta descripción que está sentada como una pila horizontal que cambiará como vertical. El espacio entre, vamos a cambiar el inicio y darle 50 como el anterior. Tenemos los marcos aquí y los datos de contacto que son apilados horizontales que cambiarán la vertical. Este marco vamos a decir relleno en lugar de fijo. Solo para asegurarnos de que se ajuste a nuestro espacio, asegurémonos de que todos tengan un buen espaciado entre ellos. Perfecto, eso es todo. Esa es nuestra página sobre, lista para funcionar. Y lo último que tenemos que cambiar son las páginas del proyecto. Nuevamente, recuerda, solo necesitas hacerlo para una de las páginas. Se adaptará a los demás. Hagámoslo rápidamente. Deberías ser bastante rápido con esto. Ahora lo hemos hecho dos veces. Pero nuevamente, si no estás entendiendo el proceso o si voy demasiado rápido para tu gusto, avísame y podemos hacer un tutorial más bajo sobre cómo abordar las diferentes opciones de ancho y alto, qué significa cada una de ellas, cómo trabajar con layouts o stack o grid o auto layouts. Si estás perdido con esos términos, solo avísame y me aseguraré de explicarlo mucho más bajo. Sabemos cómo va. Un poco de un cambio aquí con esta imagen aquí porque quería ser un poco más alto. Voy a darle un fijo de. Voy a desbloquear esto y asegurarme de que esto esté configurado como relleno. Tomará un poco más de espacio, no es tan pequeño entonces para esta sección de aquí, es lo mismo. Te has dado cuenta de que no es tan difícil una vez que lo has hecho. Una vez que sepas lo que buscas. Básicamente se puede cambiar la dirección del stock de horizontal a vertical. Se cambia el texto. En lugar de fijo, lo cambias a Sentir. Y lo mismo con los títulos. Asegúrate de que se vea bien. Cambia el relleno para que tome un poco más de espacio para las imágenes. Puede que tengas que ser un poco travieso y darle una altura fija o un ancho fijo, y eso está totalmente bien. Es tu sitio web, tienes que estar cómodo con él. Solo asegúrate de que todo esté llenando el contenedor en el que se sienta. Una vez que lo has hecho una vez, sabes exactamente cómo cambiarlo, porque conozco esta cosa receptiva. No es fácil para todos. Voy a dejar algunas pautas que puedes usar. Lo primero es asegurarse de que el texto esté configurado como relleno. Entonces es llenar el recipiente en el que se asienta. Entonces por cada contenedor, o por cada pila que tengas, asegúrate de que el relleno esté configurado correctamente. No está tomando mucho espacio de izquierda y derecha, de arriba y abajo. Además, asegúrate de que la pila que tienes esté configurado como vertical en lugar de horizontal. De esta manera, en lugar de tomar el ancho de la página, se está tomando más escondite y tenemos más espacio para leer todo correctamente. Ahí vamos. Ahora tenemos todas nuestras páginas diseñadas para escritorio y para móviles. Antes de seguir adelante, hagamos un resumen rápido de lo que hemos hecho En primer lugar, hemos comprobado nuestro diseño Figma. Hemos visto cómo se organiza todo y cómo se nombra a todo. Hemos instalado el enchufe para llevar nuestros diseños de Figma al framer Y en realidad lo hemos ejecutado. Hemos copiado básicamente la versión de escritorio a framer, de nuestra página de inicio y la página acerca de También hemos creado la navegación y el pie de página como componentes para que podamos reutilizarlos para todas nuestras páginas. Hemos creado una lista de recolección con todos nuestros proyectos, trayendo datos de nuestro CMS. También hemos creado páginas de proyectos individuales para cada uno de nuestros proyectos. Hemos conectado todo enlazando cada proyecto a cada página del proyecto. La navegación a cada página específica, y el pie de página a las diferentes plataformas de redes sociales. Y finalmente, hemos creado una versión responsive. Así que nuestros diseños se ven bien en el móvil. Antes de continuar, asegúrate de que todo te quede bien en el escritorio. En el móvil, todo está conectado. El CMS está funcionando. Si en alguno de este punto te quedaste atascado, avísame a continuación para que te pueda ayudar y asistirte. Porque lo siguiente que estamos haciendo es agregar animaciones y transiciones. Así que quieres asegurarte de que tus diseños se vean bien antes de pasar a eso. 12. Adición de movimiento: transiciones animadas: Lo único que queda por hacer en este momento es agregar esa capa extra de finura a nuestro lado Para ello, vamos a agregar algo de movimiento hoy en día. Tener un sitio web estático es muy raro y todos incluyen algún nivel de movimiento o animación. Y esto es lo que vamos a hacer ahora. Ahora hacer animación en framer es extremadamente fácil porque hay muchos presets que puedes usar como quieras Todos están bajo la sección de efectos aquí en el panel lateral derecho. Y podemos agregar animación en un peer on hover en diferentes interacciones que hacemos Podemos definir la velocidad. Podemos definir transiciones. Podemos definir qué elemento queremos modificar, como tamaño, opacidad, color, cualquier cosa que queramos En esta lección, vamos a abordar tres tipos diferentes de animaciones sobre interacción que puedes replicar muy fácilmente A pesar de que ahora solo estamos haciendo esto, te sugiero que experimentes con él y te vuelvas loco. Porque es genial ver qué puede hacer framer en esta área Los tres tipos de animación que vamos a hacer es aparecer como un elemento, aparece en la página, en scroll, a medida que nos desplazamos por esta página y en cuando pasamos el cursor sobre ese elemento específico Empecemos con el encabezado, la animación. Cuando tenemos primera línea en la página, cuando ese elemento aparece en la página, esto es lo que vamos a crear. Cuando se cargue la página, tenemos este elemento que aparece. Con una transición de desvanecimiento, lo único que tenemos que hacer es seleccionar los elementos, asegurarnos de que esté seleccionado todo el encabezado Vamos a ir a efectos, seleccionar un par, vamos a usar uno de estos presets Por defecto es usar el preset de desvanecimiento, que ya me gusta porque es muy sutil y no es como un movimiento enorme También podemos definir cómo entra esa animación. Por defecto, tiene como una transición de primavera. Va 0-100 esa sería la animación. No es escalar, la escala se establece como una sola. No está rotando, por lo que se establece como cero. Y no hay ningún desplazamiento. Podemos golpear en la transición primaveral también en vez de primavera, voy a decir porque es mucho sutil, y la primavera podría ser demasiado también porque ya he jugado con esto, y sé que eso es lo que me gusta. Pero de nuevo, juega con él y experimenta a tiempo. Voy a decir que no, 0.5 voy a agregar un poco de retraso, no mucho, solo para que nos dé tiempo para ver la animación. Bien, creo que estoy contento con ello. Voy a probarlo y voy a golpear Preview. Y ahí vamos. Esa es nuestra animación. Es muy sutil. No hace falta que sea tan fuerte. Sí, estoy contento con eso. Perfecto. La segunda animación será una animación de desplazamiento A medida que nos desplazamos, estos elementos aparecen uno por uno. Debido a que estamos usando una lista de colección y un componente, solo necesitamos crearlo. Una vez más, vamos a asegurarnos de que estamos seleccionando el enlace del proyecto. Vamos a efectuar, vamos a decir animación de desplazamiento. Ahora queremos que el disparador sea cuando esa capa esté a vista a medida que nos desplazamos y esa capa empiece a aparecer, esa animación no entra en acción antes, lo contrario la echaríamos Vamos a iniciarlo en el centro de esa capa. No vamos a agregar una repetición. Eso significa que cuando nos desplazamos, aparece ese elemento, ese elemento permanece ahí en lugar de encenderse y apagarse a medida que nos desplazamos por la página. Pero de nuevo, te sugiero que pruebes estas animaciones y luego juegues con ellas y veas cómo se siente y veas qué se siente bien para ti. Porque a lo mejor eres fanático de un efecto de repetición, voy a decir que no En lugar de usar fade in, voy a decir slide in bottom. Se puede definir de nuevo el enter. Voy a cambiar de nuevo para facilitar el desplazamiento significa cuánto se mueve. Se mueve sobre el eje y, 150 píxeles. Y tal vez eso sea un poco demasiado, pero bien, veamos cómo funciona eso. Tenemos esa animación inicial, tenemos esta deslizándose adentro. Creo que se ve bien. Y a ver a medida que nos desplazamos hacia arriba, no se vuelve a reproducir. Voy a retocar esto un poco más. Voy a cambiarlo a 25. Yo soy. Sí, déjalo así. ¿Ves cómo se siente? Genial. Creo que se ve muy bien. Perfecto. Ahora, para el tercer tipo de animación, vamos a hacer algo que se ve muy elegante, pero es muy fácil de replicar Vamos a hacer este efecto hover. Cuando pasas el cursor sobre este elemento, muestra un tipo diferente de información Ahora para crear esto, necesitamos ir dentro del componente de fugas del proyecto. Tenemos que crear un componente a partir de éste. De lo contrario, porque está sentado en una pila, podemos moverlo libremente. Sólo tengan que aguantar conmigo. Vamos a crear un componente a partir de esto. Voy a decir que el tipo de proyecto está bien. Vamos a duplicar este y moverlo hacia abajo fuera del marco. Necesita sentarse justo afuera. Si este es el marco, necesita colocarse justo afuera para que no lo veamos. Voy a decir cliente y vamos a configurar como variable cliente. Fresco. Ahora vamos a establecer un estado de hover Lo que significa que cuando flotamos sobre este elemento, esto sucede Vamos a crearlo. Podría ser que tal vez en vez de moverse o hacer algo, esto cambie de color. Si este fuera el caso, voy a cambiar el color en el estado hover Vamos a previsualizar en hover. Cambia de color. ¿Bien? Eso no es lo que queremos. Pero podemos ver que podemos definir un estado hover. Volvamos al color original. Lo que queremos es que éste se mueva a donde está éste. Voy a asegurarme de que esto esté centrado y éste se sienta justo arriba. Vamos a previsualizar. Perfecto. Ambos se están moviendo, pero bien, no quiero ver al cliente en el primer estado, y no quiero ver el tipo de proyecto en el segundo estado. Tenemos que definir el desbordamiento como oculto. Y vamos a previsualizar Ahora eso es todo, ese es nuestro efecto. Ni siquiera estoy tocando la transición porque está usando primavera. Y creo que eso funciona. A mí me gusta, voy a dejarlo como está. Pero sepa que también puede cambiar el preajuste de transición o el efecto aquí también. Volvamos a nuestro componente principal y lo previsualicemos. A mí me encanta. Me gusta mucho cómo se ve. Asegurémonos de que nos estamos conectando a la variable correcta. Vamos a crear variables aquí como lo hemos hecho varias veces. Volvamos a nuestra página de inicio. Aquí bajo cliente, vamos a establecer esta variable. Ya lo podemos ver. Pero cuando tenemos una vista previa de esto, tenemos nuestras bonitas transiciones. Y nos movemos. Tenemos a nuestro cliente aquí. Creo que se ve perfecto. Eso es exactamente lo que queríamos. Estos son solo tres tipos de animación o transiciones que puedes agregar al framer. Ya lo acabamos de hacer en la página principal. Siéntase libre de agregar animación en la página del proyecto, en la página acerca de. Enloquece con él. Experimenta con divertidas transiciones y animaciones. Pero yo te daría una palabra de consejo. Una cosa que he notado cada vez que he diseñado algo es que menos es más. Y si nos excedemos, las animaciones toman espacio y la gente no nota el contenido o incluso se siente abrumada Entonces sí, un poco de movimiento recorre un largo camino. Creo que estamos en ese punto ahora donde estamos listos para publicar nuestro sitio web. Tenemos todo nuestro contenido, tenemos algunas transiciones agradables. Tenemos el punto de interrupción del teléfono listo para funcionar. Entonces sí, creo que es el momento. Y eso es exactamente lo que haremos en la siguiente lección. 13. Publicar nuestro sitio web: Así que publiquemos nuestro sitio web. Y por razones obvias, este será el video más corto. Porque publicar un sitio web en framer es muy fácil. Literalmente, solo tenemos que ir aquí y presionar Publicar. Sí, eso es, tu sitio web ya está en vivo. Fresco. Bien, adiós ahora. Esperemos un segundo. Yo solo estoy consiguiendo, estoy seguro que no quieres presentar tu trabajo profesional y enviar tu cartera a clientes como casita 9036 a un framer, Como puedes hacer eso, pero esa no es la forma más profesional. En primer lugar porque no es tan reconocible y nadie sabrá que esa es tu cartera. Segundo, porque a lo mejor no los necesitas para saber que has construido esto con framer y no quieres demostrar que esa es una app de Framer, tú sí Pero te sugiero que agregues un dominio personalizado. Ahora, para conectar un dominio personalizado que poseas y ocultar ese lado del framer, necesitas actualizar, lo que significa pagar una tarifa mensual al framer y agregar un servicio de hosting Pero si no quieres hacer eso ahora cuando aún no estás listo para pagar, puedes obtener un subdominio Framer gratis Entonces para mí sería mi nombre, Framer dot website por ejemplo O podemos agregar Framer. Voy a dejarlo así y guardar ese será tu nuevo dominio personalizado. Una vez que esté listo para agregar el suyo propio sin ese sitio framer, puede eliminar el dominio y agregar el suyo propio. Es así de simple. Es muy rápido de cambiar. Lo voy a dejar así solo para mostrarte cómo funciona. Pero como estamos aquí, repasemos algunas de las configuraciones para mejorar tu sitio. Ahora bien, si recuerdas el primer video de esta clase, pasé muy rápido por todos estos ajustes, pero ahora que nuestro sitio está hecho, podemos ir un poco más despacio y agregar todas las cosas para mejorar nuestro SEO y sitio en general. Lo primero es que voy a agregar el título del sitio. El idioma es el inglés y sabe que puedes agregar varios idiomas. Ahora eso es muy útil. Voy a añadir mi descripción si quieres. También puedes agregar un fabcon, que es el pequeño logo que se muestra aquí en el navegador Puedes agregar una imagen social Cada vez que compartes tu enlace, tu sitio web, en una plataforma de redes sociales, esa imagen aparecerá. No me molesta tanto ahora, y esto es algo que puedo hacer después Voy a dejarlo así. Pero siéntete libre de agregar todo lo que quieras a esta imagen. Solo asegúrate de que sea algo relevante para tu sitio y que sea rápidamente reconocible como algo que has hecho Algunos otros ajustes que puedes agregar si actualizas. También puedes tener una protección con contraseña solo para agregar ese nivel de seguridad a tu sitio incluso sin necesidad de subir Puedes agregar tu ID de Google Analytics aquí para conectarte al sitio Google Analytic, lo cual es muy útil, lo cual es muy útil, aunque Framer tiene su propia puñalada analítica Una vez que publiques tu sitio web y comiences a compartirlo, podrás ver algunos datos sobre los visitantes en la vista paga y cuáles son las principales fuentes de las que provienen las personas y las páginas principales visitadas en tu sitio. Por último, algo que he mencionado es que puedes seleccionar qué versión está en vivo. En este punto la puesta en escena está deshabilitada, lo que significa que la última versión que hayas creado será la que vaya a todos los dominios. Si habilitas la puesta en escena, podrás seleccionar cuál de las versiones que has creado va en la versión en vivo. Debido a que lo hemos hecho justo hoy, solo hay una versión, pero si agregas cambios y si agregas contenido, puedes seleccionar qué versión está en vivo y cuál es la que estás trabajando. Por último, y ya has visto que no es necesario, puedes actualizar a una versión de pago de Framer Puedes agregar más cosas. Puedes tener páginas ilimitadas. Muchas otras características más. Sin embargo, hemos creado este sitio completamente gratis y podrás publicarlo en una URL en vivo completamente gratis. Como consejo, puedes crear tu sitio en una versión gratuita. Y una vez que esté listo para publicar en un dominio personalizado y agregarle más funciones, puede comenzar a pagar. Pero nuevamente, esto es solo un consejo, haces lo que sea con lo que te sientas más cómodo. Ya lo estás, ¿ tienes cartera ahora? Y es momento de compartirlo. Ya sea que haya conectado su dominio personalizado o simplemente esté usando el framer, lo cual está completamente bien O si has usado tu propio diseño o el que te he proporcionado. Asegúrate de enviar tu portafolio compartiendo el enlace en la puñalada del proyecto para que todos puedan verla Si tiene alguna duda alguna sobre alguna de las lecciones que hemos hecho hasta ahora, házmelo saber en la parada de discusión y voy a responder. También recuerdas que habrá algunas lecciones extra. El primero sobre cómo crear una barra de navegación receptiva con un bonito menú de hamburguesas Pero esto es totalmente opcional y no lo necesitas para publicar tu sitio. No te estreses por ahora, asegúrate de enviar tu cartera porque no puedo esperar a ver lo que has creado con Framer 14. CONCLUSIÓN: Enhorabuena por haber terminado esta clase. Asegúrate antes de irte, compartes tu sitio web de vida agregando la URL en el stap del proyecto Y recuerda que este no es el final del camino. Un mundo lleno de posibilidades se ha abierto ahora que sabes cómo usar Framer. Y solo para empezar, aquí hay algunas cosas que puedes mejorar en el sitio que acabas de hacer. En primer lugar, puedes agregar otro punto de interrupción para una tableta u otro dispositivo, como hemos hecho con el teléfono A continuación, puede agregar más campos al CMS para administrar párrafos de texto, imágenes, videos o enlaces. Y luego puedes volverte loco agregando animaciones y transiciones en la página acerca y el proyecto como lo hemos hecho en la página de inicio. Ahora bien, estas son solo subsugerencias, pero siéntase libre de explorar el resto de funciones que Famer ofrece Si quieres algo un poco más desafiante, recuerda que habrá algunas lecciones extra agregadas a esta clase. El primero sobre cómo crear una navegación receptiva con el menú de hamburguesas Estén atentos. Pero por ahora, todo lo que tengo que decir es felicitaciones nuevo y muchas gracias por ver esta clase.