{"id":524,"date":"2021-05-17T20:57:19","date_gmt":"2021-05-17T20:57:19","guid":{"rendered":"https:\/\/ux.mynmi.net\/?page_id=524"},"modified":"2021-05-17T20:57:19","modified_gmt":"2021-05-17T20:57:19","slug":"figma","status":"publish","type":"page","link":"https:\/\/nmi.cool\/ux\/figma\/","title":{"rendered":"Figma"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"What&#039;s Figma?\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/Cx2dkpBxst8?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><figcaption>What is Figma?<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">LinkedIn Learning<\/h2>\n\n\n\n<p>LinkedIn Learning, formerly Lynda.com, is a member&#8217;s only database of high-quality video tutorials. Normally, you have to pay a hefty fee to have access to LinkedIn Learning\/Lynda&#8217;s video content. However,&nbsp;<strong>as UGA students,<\/strong>&nbsp;you have full access for FREE. It&#8217;s glorious.&nbsp;<\/p>\n\n\n\n<p>In this class, we&#8217;ll be using this awesome resource to learn all about Figma!<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Figma<\/h2>\n\n\n\n<p>What is Figma? <\/p>\n\n\n\n<pre class=\"wp-block-verse\">A <strong>vector<\/strong> graphics editor and <strong>prototyping<\/strong> tool which is primarily <strong>web-based<\/strong>. <\/pre>\n\n\n\n<p>Let&#8217;s break this down, in case you&#8217;re a new to some of these phrases!<\/p>\n\n\n\n<p><strong>Vector graphics <\/strong>consist of points, lines, and curves that are based upon mathematical equations, rather than solid colored square pixels. This means that no matter how large or small or how close you zoom in on the image, the lines, curves, and points remain smooth. In other words, vectors are great for scaling up, down, and all around! <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.shutterstock.com\/blog\/wp-content\/uploads\/sites\/5\/2018\/02\/Vector-vs-Raster_Featured-Image.jpg\" alt=\"\" \/><figcaption><a href=\"https:\/\/www.shutterstock.com\/blog\/wp-content\/uploads\/sites\/5\/2018\/02\/Vector-vs-Raster_Featured-Image.jpg\" data-type=\"URL\" data-id=\"https:\/\/www.shutterstock.com\/blog\/wp-content\/uploads\/sites\/5\/2018\/02\/Vector-vs-Raster_Featured-Image.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">Raster vs. Vector: What\u2019s the Difference and When to Use Which<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Figma is a <strong>prototyping <\/strong>tool, one of many. Prototypes are an early sample, or representation, of a real product. Some prototypes have very little detail (low-fidelity) and some are super realistic (high-fidelity). For the record, Figma is just one of many prototyping tools. We&#8217;re using it in this class because: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The starter plan is free!<\/li><li>The learning curve is small.<\/li><li>It&#8217;s advantageous in terms of file-sharing and cross-team collaboration. <\/li><li>It&#8217;s becoming the industry standard in UX. <\/li><\/ol>\n\n\n\n<p>Additionally, Figma is <strong>web-based<\/strong>, meaning, it utilizes cloud storage rather than local storage. In other words, you don&#8217;t have to worry about saving files to your desktop, then emailing it to your group members, and so on and so forth. Think Google Drive and OneDrive, for comparison. <\/p>\n\n\n\n<p>Other popular prototype tools include but are certainly not limited to: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Marvel (my introduction to prototyping back in the day!)<\/li><li>Adobe XD (which is what I use\/teach with the most, especially in NMIX 4111\/6111e: New Media Design)<\/li><li>Sketch<\/li><li>InVision<\/li><li>And so many more!<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Sign Up for Figma<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-1024x726.png\" alt=\"\" class=\"wp-image-531\" srcset=\"https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-1024x726.png 1024w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-300x213.png 300w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-768x544.png 768w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-1536x1089.png 1536w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-2048x1452.png 2048w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.30-PM-1568x1111.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:52% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"731\" src=\"https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-1024x731.png\" alt=\"\" class=\"wp-image-532 size-full\" srcset=\"https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-1024x731.png 1024w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-300x214.png 300w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-768x549.png 768w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-1536x1097.png 1536w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-2048x1463.png 2048w, https:\/\/nmi.cool\/ux\/wp-content\/uploads\/sites\/2\/2021\/05\/Screen-Shot-2021-05-17-at-5.01.44-PM-1568x1120.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Open Figma: <a rel=\"noreferrer noopener\" href=\"http:\/\/www.figma.com\/\" target=\"_blank\">figma.com<\/a><\/p>\n\n\n\n<p>Select &#8220;Pricing:&#8221; <a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/pricing\/\" target=\"_blank\">figma.com\/pricing\/<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p>Select <strong>&#8220;Choose Starter<\/strong>,&#8221; the free plan.<\/p>\n\n\n\n<p>Create an account using whatever credentials <strong>YOU<\/strong> can remember. I can&#8217;t remember these for you. I recommend using Google to signup if that&#8217;s the best way for you to remember your login info. <\/p>\n\n\n\n<p>Now, you&#8217;re good to go! <\/p>\n\n\n\n<p>The professional plan is free for students and educators. While you are welcome (and encouraged) to use this plan, I don&#8217;t recommend it until the end of this class. It has more capabilities, and therefore, can be a little more confusing and overwhelming at first!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-bright-blue-background-color has-bright-blue-color\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Learning Figma<\/h2>\n\n\n\n<p>Learning new software is not an easy feat. However, I strongly feel that watching tutorials are the best way to become accustomed to a new interface, new possibilities, and new constraints.<\/p>\n\n\n\n<p>Complete the entire &#8220;Figma for UX Design&#8221; course on LinkedIn Learning! Be sure to watch all the videos, and use the exercise files (located under the video) to follow along. <\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-bright-blue-color has-text-color\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?account=76218298&amp;forceAccount=false&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Ffigma-for-ux-design-2%3Ftrk%3Dshare_ent_url%26shareId%3D5xbR2F5SRFiRKY%252FTz%252F35BQ%253D%253D\" target=\"_blank\" rel=\"noreferrer noopener\">To the tutorials<\/a><\/div>\n<\/div>\n\n\n\n<p>Once you open up the course, you&#8217;ll see it&#8217;s broken down into five parts, plus an introduction and conclusion. I have a few details I want to share on a few of the parts: <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Set Up a Figma Project <\/h4>\n\n\n\n<p>When you sign up for Figma (using the free Starter plan) and take a tour, you may notice a few elements in the navigation have changed slightly since these tutorials were filmed. <\/p>\n\n\n\n<p>For example, note the hamburger button is now a F-shaped button, and many settings have shifted from the top right to the top left. Either way, it&#8217;s pretty easy to find what you&#8217;re thinking for, as these changes are rather minimal. Be curious! Explore! <\/p>\n\n\n\n<p>\u26a0\ufe0f <strong>In this section, you can skip &#8220;Setting Up Local Fonts,&#8221; and &#8220;Import From Sketch.&#8221;<\/strong> <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Adding Content<\/h4>\n\n\n\n<p>Download the Exercise Files on LinkedIn Learning. These files will likely download in a zip folder (.zip). You have to click (double-click on PC) to unzip them. <\/p>\n\n\n\n<p>Drag the file you want to use into the homepage of Figma (the screen that displays all your files).  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. Teams<\/h4>\n\n\n\n<p>You don&#8217;t have to walk through these with the instructor. There is no need to follow along. Just listen and watch. If you would like to upgrade your plan, it is free for educational use. <\/p>\n\n\n\n<p>Lastly, to show proof of completion, select <strong>&#8220;Certificate&#8221;<\/strong> under &#8220;Related to this Course,&#8221; near the exercise files. Download as PDF.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>LinkedIn Learning LinkedIn Learning, formerly Lynda.com, is a member&#8217;s only database of high-quality video tutorials. Normally, you have to pay a hefty fee to have access to LinkedIn Learning\/Lynda&#8217;s video content. However,&nbsp;as UGA students,&nbsp;you have full access for FREE. It&#8217;s glorious.&nbsp; In this class, we&#8217;ll be using this awesome resource to learn all about Figma! &hellip; <a href=\"https:\/\/nmi.cool\/ux\/figma\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Figma<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-524","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/pages\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":0,"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/pages\/524\/revisions"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/ux\/wp-json\/wp\/v2\/media?parent=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}