Cómo convertir un diseño de Figma a código en Webflow 🖥

[@ismaelrojas261]

Deseo felicitarte Cris...tengo 58 años y he sido profesor universitario en Venezuela de Periodismo y Comunicación Social por más de 25 años. Tengo ya un mes y tanto, profundizando en el diseño Web, que es una de mis pasiones. En este tiempo comencé con FIGMA por aquello de poder partir de allí y llevar el prototipo a código en HTML, CSS y JS. Con los tutoriales de tres o cuatro youtubers, en mi opinión, que lo hacen muy bien, he avanzado poco a poco. Hoy, 29 de agosto de 2022, encontré tu canal, en el que me había suscrito y he iniciado en tu tutorial de cómo convertir un diseño Figma a código en Webflow. Sin duda alguna, eres excelente, has logrado que alguien como yo, a mi edad, entienda de una manera tan fácil. Felicitaciones y mucho éxito. De viejo y duende profesor a joven profesor...felicitaciones y gracias...recorreré tus tutoriales uno por uno. Por cierto, si me lo permites, haré criticas constructivas cuando sean necesarias...Felicidad y Prosperidad...desde aquí te deseo.

[@pedromiguelpagan-rivera8970]

Yo tengo 57, llevo 30 y pico de años en esta industria y creo lo mismo que el caballero. Me enaltece que las nuevas generaciones de diseñadores web (ahora UI designers) sea tan responsable con su oficio. Felicidades bro.

[@xxxDoku]

¡Gracias a ustedes por seguir aprendiendo y actualizando sus conocimientos!!!

[@gaby_dflores]

No hay edad para seguir preparandose 😍

[@alexandragamer1v277]

y no respondio :,3, on ta la humildad?

[@marinalopezmarilo7628]

Muchas gracias ! Sería genial ver videos de Webflow🎉

[@elfacuparede]

Sos un genio Cris! Hace 1 año y medio o 2 aprendi a usar Figma con tus videos, y ahora me encuentro dando los primeros pasos en Webflow con tus tutoriales. Un abrazo y seguí así!

[@stefanieleon10]

¡Muchas gracias! Sería bueno, tener más tutoriales de Webflow. :)

[@samyzaid8565]

Wooowwwww !!!!! Muchísimas gracias por ésto !!!! SOS UN IDOLO!!! GRACIAS!!!!

[@melinaitatisosa2035]

Ay Cris me encanta todo lo que enseñás, no pares nunca jajaja

[@ibsenseijas]

más tutoriales hermano! Gracias Chris

[@dianaterrazasluna5457]

Necesitaba conocer más de este programa y poder utilizar webflow

[@florlopezpeze_]

Sos gigante Cris! Gracias ♡♡

[@MR.MUXY9]

Súper rifado!!! Que buen video, muchas gracias!!!

[@echecine]

Super detallado... como siempre! MUCHISIMAS GRACIAS!!!!!!!!

[@diegohndz1575]

Necesito más de webflow! Gracias Chris

[@victorparra1936]

Me encanta webflow pero sin código no quiere decir fácil tiene su complejidad pero para eso se vive para aprender muchas gracias

[@karennava1720]

Woow!! muchas gracias!!! increíble contenido!!!!

[@sabrinalang2266]

Sos un genio Cris, gracias por todo tu aporte!

[@energiacreadoraderiqueza6563]

Gracias por el contenido...puedes subir mas acerca de webflow..millon gracias

[@rickso4400]

Gracias Cristopher, muy buen video!!!

[@uxcristopher]

Gracias, saludos 😉

[@jennercruzvalencia7453]

Gracias por tanto contenido, gracias por enseñarnos tus secretos, un gusto amigo

[@uxcristopher]

Muchísimas gracias por ver mi contenido, un abrazo 😄

[@jennercruzvalencia7453]

A mi me gusta y por eso comparto a mis demás colegas para que vean

[@stephanieburns508]

Muchas gracias Cris por tu tiempo y dedicación brindando este tutorial ¡tan bueno!

[@tinonolasco]

Excelente contenido como siempre, Cristopher.

[@tipoidarraga]

Grande Cris, de verdad muy agradecido con tu contenido!

[@paolamf3799]

Gracias por el contenido muy bueno, y lo que dices de aprender Webflow estaría muy genial

[@uxcristopher]

Muchísimas gracias 😊

[@xyuriko6163]

A ver a ver 😌

[@CarlosGarcia-ht7eu]

muy bien explicaod. Lamentablemente todos estamos a la expectativa de que sea automatizado... algo que dificilmente se dará en realidad, dado lo cambiante, complejo y dinamico del mundo del codigo web... pero con algo se empieza, y es esencial comenzar con lo fundamental.

[@tomasmoranchel9556]

sos un genio

[@xxxDoku]

¡Necesito tutorial!!! ¡Profundo!! ¡Gracias!!

[@uxcristopher]

Hecho! Tengo todo un curso gratuito: www.uxcristopher.com/

[@ZzZz-dr7uq]

Genial, para tenerlo maquetado en html y css

[@juanbuffa4082]

el mejor contenido ux

[@cacho5230]

Gracias amigo

[@uxcristopher]

De nada 😊

[@lorentestudio1393]

Estaría genial tener más tutoriales de Webflow :)

[@ismaelrojas261]

Se m olvidó comentarte, que fue la razón de escribirte también, que el workplace de Webflow y sus elementos y herramientas funcionan como los que tiene FILMORA 9, un editor de videos. Lo utilizó desde hace muchísimos años con otros similares, pero su dashboard ofrece la amigabilidad que este de Webflow a sus usuarios. Te lo dejo para que lo revises, sino no lo conoces, te darás cuenta que es un buen ejemplo para quienes escuchamos tus tutoriales la primera vez. A mi me recordó el dash de Filmora 9 y por supuesto que eso ayuda, porque ya me ubica en lo que puedo hacer y cómo.

[@miguelmoyamontero5624]

Que curso de -webflow- me recomiendas ...?? Gracias

[@jo69123]

como puedo copiar las propiedades de los efectos de un SVG, y transferirlos a un "embed element" en webflow? Hay alguna forma optimizada de copiar SVGs complejos, con efectos como "backgorund blur" y cosas así?

[@gustavocastro4841]

SISISI! WEBFLOW!

[@juanigngp]

Tocaría un nuevo tutorial con el plugin de Figma to Webflowww

[@TheDrollmicrochip]

Que crack❤

[@felipe6777]

y después de esto que se hace? mencionaste algo de conectar con el dominio personal para que la web ya este publicada y activa, habrá algún video donde expliques eso? me salvarías la vida, estoy cesante y me gastaría mucho hacer mi primera pagina web pagada, se usar figma (tengo varios proyectos) pero hasta ahí llegue, muchas gracias

[@nadiagalindez1932]

Esperamos más de Webflow maestro! 🙌🏻

[@sin_frontera]

BUEN VIDEO

[@giancarloandreechavezperez1832]

No se puede exportar a un click?

[@mariaarceliazapatagonzales417]

Hola!! Como paso mi web de Figma a Shopify? Ya tengo la web, el diseño pero ahora como lo puedo convertir en mi tema de Shopify?

[@PaulaGareis]

Increíble este tuto. Me gustaria saber si una vez publicado un dominio, la página se puede volver a editar en webflow, o si no se puede editar mas una vez publicado?

[@danielarellanovalenzuela6574]

recomiendas webflow para Ecommerce ?

[@maryoriarguello8002]

un diseño de Figma sirve para actualizar un diseño que está en un WordPress?

[@danicatura3909]

tengo dos preguntas- hay noto que sale marca de agua "mad in webflow ¿eso se quita de algun modo? y segundo si yo quisiera los archivos html y css del sitio ¿se podria del programa webflow?

[@uxcristopher]

Para quitar la marca de agua necesitas adquirir un plan de webflow. Para obtener el html deberás explorar el código, si es posible. university.webflow.com/lesson/code-export Aquí encontrarás todos los detalles de los planes de webflow: webflow.com/pricing

[@andresdiseno1168]

maravillosa intro, conoces algún plugin para manejar plugins?

[@javiart8744]

Cual es la razón concreta por la que no se hace el diseño directamente en webflow? Entenderia yo que es mas "facil" diseñar en figma? Pero veo que se podria directamente en webflow aunque sea un poco mas complejo,valdría la pena para no hacer este doble trabajo

[@uxcristopher]

Excelente pregunta. Imagina que un cliente te contrata, te comparte su idea y comienzas a crear en Webflow donde deberás de crear (clases, componentes, guías de estilo, revisar responsive ajustar tamaños, etc). Creas tu propuesta en Webflow (la cual te llevara mucho tiempo) y después al cliente no le gusto lo que creaste. 🥲 En cambio, en Figma primero validarías ideas con tu cliente y hasta que ya está todo definido solo pasas a recrear en webflow y listo, diseño eficiente y rápido, este es un flujo de trabajo profesional y créeme te salvara de muchas. 😉

[@uxauri]

Podrias decirme como hago para organizar el proyecto en figma como tu lo hiciste en este proyecto?? wao es realmente grandioso trabajar asi

[@uxcristopher]

Muchísimas gracias 😊 Esto lo puedes aprender en mi workshop de auto layout. Aquí te lo comparto para que puedas darle un vistazo. www.uxcristopher.com/p/workshop-de-figma-auto-layout-2022

[@zictorvulaica6041]

8:51 en Framer si es así xd

[@edisonpalacios]

Excelente contenido Cristopher, ojalá pronto haya la oportunidad de colaborar juntos y traer un contenido de gran valor para nuestras comunidades 💪

[@uxcristopher]

Muchísimas gracias 😊 Suena bien, puedes compartirme tus idea a mi correo [e-mail]

[@josemariadiy6400]

Hola, buen video 👍 Pero si bien sabemos que hay diferentes tipos de sistemas o aplicaciones web ( con o sin APIs y base de datos), mi pregunta es: para que Tipos de Proyectos Web es recomendable usar Webflow..?? 🤔🤔 Agradecería tu respuesta. Saludos

[@sofiapalomo2442]

Cómo pasó un wireframe hecho en figma a un archivo

[@uxcristopher]

Depende el archivo, pero Figma permite exportar en multiples formatos.

[@zictorvulaica6041]

7:41

[@dobaladri]

Tú crees que mis trabajos de UX/UI los pueda vender ya pasados a Webflow?

[@uxcristopher]

Claro que sí, webflow te permite crear una cuenta para que vendas plantillas de tus proyectos. 😉

[@justavzz7163]

ey brooo pero no mostraste si tmb se hace responsive o se distorciona el sitio web !!!!!!!!!!

[@uxcristopher]

También se puede, sólo debes de ajustar el diseño a cada resolución;) Estaré sacando videos específicos de webflow muy pronto 😁

[@justavzz7163]

@@uxcristopher siii por favoorr saca una explicacion completa porfaa un sitio web totalmente responsive y optimo

[@irenemontoro5087]

Dices que arriba dejas los vídeos anteriores con el desarrollo del proyecto. Dónde están los vídeos??? Porque arriba no los dejas 😂😂😂😂