{"id":11407,"date":"2023-02-27T15:50:53","date_gmt":"2023-02-27T14:50:53","guid":{"rendered":"https:\/\/immune.institute\/?p=11407"},"modified":"2023-02-27T15:50:53","modified_gmt":"2023-02-27T14:50:53","slug":"taller-figma-framer-video-tutorial","status":"publish","type":"post","link":"https:\/\/immune.institute\/en\/blog\/taller-figma-framer-video-tutorial\/","title":{"rendered":"Figma + Framer Workshop, with Ra\u00fal Mar\u00edn"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are looking for <strong>tools for designing responsive projects<\/strong> easily and quickly, <strong>Framer<\/strong> y <strong>Figma <\/strong>are two options not to be missed. That's why, in our <strong>Figma and Framer workshop <\/strong>we held a practical session in which we explored all the possibilities offered by these two tools. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Don't miss this <strong>workshop given by <a href=\"https:\/\/raulmarinalvarez.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ra\u00fal Mar\u00edn<\/a><\/strong>UX Manager and Director of the UX\/UI Design Bootcamp at IMMUNE Technology Institute. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of designing with Figma<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With Figma, we were able to see how easy it is to <strong>design all types of interfaces<\/strong>The use of the web, from mobile applications to complete web pages, all in a very intuitive way. Thanks to features such as auto layout or components, it has become one of the key tools in the design of digital products as it provides many advantages, some of the most important are:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Consistency and efficiency: By using components, consistency in the design of repetitive elements such as buttons, icons and forms is ensured. In addition, the ability to <strong>reuse components<\/strong> in different parts of the design saves time and avoids design errors.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Flexibility and speed: with auto layout, it's possible <strong>create responsive and adaptive designs<\/strong> quickly and easily. Elements automatically adjust as the layout is resized, saving time and effort in creating multiple versions of the same layout.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Scalability: the use of components and auto layout allows the design to be scalable, i.e. to adapt smoothly to changes in the needs of the project. This translates into a greater <strong>efficiency in project management<\/strong> and the ability to react to change quickly and effectively.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Collaboration: the use of components and auto layout in Figma facilitates the <strong>collaboration between designers<\/strong> and development teams. By having a shared component library, different team members can work together without duplicating efforts.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">What can we do with Framer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Framer is an ideal tool for the creation of pr<strong>interactive ototypes<\/strong>complex animations and since a few months ago also for <strong><a href=\"https:\/\/immune.institute\/en\/blog\/diseno-web-responsive-y-su-importancia-en-la-actualidad\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/immune.institute\/blog\/diseno-web-responsive-y-su-importancia-en-la-actualidad\/\" rel=\"noreferrer noopener\">responsive web design<\/a><\/strong>. In addition, Framer has a large number of resources and libraries that facilitate the design and programming process. Its advantages over its competitors are:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Advanced interactions and animations: Framer allows for <strong>creating complex animations<\/strong> and smooth transitions between screens that are not possible in other web design tools.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Rapid Prototyping: With Framer, users can <strong>creating high fidelity prototypes<\/strong> with ease. The tool offers a library of components and user interface elements that can be customised and reused in different projects. And it is possible to design responsive websites very easily and see the final result at all times.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Integration with code: Framer has a seamless integration with programming, allowing designers and developers to work together on a single project. The tool allows the creation of components and animations, and developers can <strong>use the code <\/strong>generated to implement them on the website.<br><\/li><li>Customisation: Framer is highly customisable and offers a wealth of options for fine-tuning design details. Designers can <strong>customising animations<\/strong>You can adjust opacity and shadows, and create custom elements with JavaScript.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\"><li>Usability testing: Framer enables designers to <strong>creating usability tests for your website designs<\/strong>. Usability testing can be carried out and designs adjusted accordingly to improve the user experience.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In our workshop, we saw how these two tools can complement each other perfectly to create responsive projects in a simple and effective way. This opens up a whole new world of possibilities for <strong>UX\/UI designers<\/strong>. The ability to create responsive designs is a key task today, as users interact on all types of devices throughout the day. By using Figma and Framer, designers can create designs that adapt to any screen and provide a seamless and consistent user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Get hands-on with Figma and Framer, and discover what they can offer you in your UX\/UI design projects!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-gestor-del-servicio wp-block-embed-gestor-del-servicio wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"FRAMER &amp; FIGMA Workshop: Take your user interface design to the next level | Ra\u00fal Mar\u00edn\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Vwnrk7E8Q6E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p>Si est\u00e1s buscando herramientas para dise\u00f1ar proyectos responsive de manera f\u00e1cil y r\u00e1pida, Framer y Figma son dos opciones que no te puedes perder. Por eso, en nuestro taller de Figma y Framer realizamos una sesi\u00f3n pr\u00e1ctica en la que exploramos todas las posibilidades que ofrecen estas dos herramientas. No te pierdas este workshop impartido [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":11417,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-11407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/11407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/comments?post=11407"}],"version-history":[{"count":0,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/11407\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media\/11417"}],"wp:attachment":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media?parent=11407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/categories?post=11407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/tags?post=11407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}