{"id":7600,"date":"2022-11-22T14:23:30","date_gmt":"2022-11-22T14:23:30","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7600"},"modified":"2024-01-16T12:26:08","modified_gmt":"2024-01-16T12:26:08","slug":"figma-introduction-for-ui-designers","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/figma-introduction-for-ui-designers\/","title":{"rendered":"Getting started with Figma: An introduction for UI designers"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">From pixel-perfect layouts to responsive websites, <\/span><a href=\"http:\/\/figma.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><span style=\"font-weight: 400;\"> has earned its spot as the new industry standard for design tools. As a result, it\u2019s the software of choice for many design teams\u2014and today, every UI designer needs a basic understanding of how to design in Figma.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re new to UI design, learning your way around any new design tool can feel intimidating. But you\u2019re in luck: As well as being one of the most advanced and versatile design tools on the scene, Figma is also incredibly beginner-friendly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this blog post, we\u2019ll get you up to speed with an introduction to Figma\u2019s basic features. Before you know it, you\u2019ll be a Figma pro\u2014whipping up beautiful, user-friendly interfaces in no time.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what we\u2019ll cover:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#introduction-to-figma\"><span style=\"font-weight: 400;\">Introduction to Figma\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#get-started-with-figma\"><span style=\"font-weight: 400;\">How to get started with Figma\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#round-up\"><span style=\"font-weight: 400;\">Round up: Advancing your skills\u00a0<\/span><\/a><\/li>\n<\/ul>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"introduction-to-figma\"><strong>Introduction to Figma<\/strong><\/h2>\n<p><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><span style=\"font-weight: 400;\"> is a free web-based design tool that allows you to create and collaborate on high-fidelity, interactive prototypes. It&#8217;s also a vector design tool, meaning you can create detailed illustrations without losing quality.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Figma allows you to quickly create mockups of web and mobile apps using a simple drag-and-drop interface. The tool is especially suited for UI designers, because you can go from <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-wireframing\/\"><span style=\"font-weight: 400;\">low-fidelity wireframes <\/span><\/a><span style=\"font-weight: 400;\">to responsive, clickable prototypes without writing any code.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In Figma, you can also create:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Logos\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apps<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Websites<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Presentations<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Figma boasts many of the same features as other popular design tools like <\/span><a href=\"http:\/\/sketch.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Sketch<\/span><\/a><span style=\"font-weight: 400;\">\u2014such as icons, grids, and layout guides. But there are a few unique benefits that make Figma stand out.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Notably, <\/span><b>Figma is the only design tool that works on any platform<\/b><span style=\"font-weight: 400;\">; including Mac, Windows, and Chromebooks. This makes it highly accessible\u2014particularly among larger tech teams with different people using different devices.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Figma is also known for its collaboration features. Designs can seamlessly be shared, reviewed, and collaborated on (even for non-Figma users),\u00a0empowering frictionless workflows among design teams.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To learn more, check out our roundup of <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-interface-ui-design-tools\/\"><span style=\"font-weight: 400;\">the best UI design tools.<\/span><\/a><\/p>\n<h2 id=\"get-started-with-figma\"><strong>How to get started with Figma<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Now we have a sense of what Figma\u2019s all about, and why it\u2019s worth taking the time to learn\u2014it\u2019s time to get set up!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First up, you&#8217;ll need to have a Figma account. You can create a free account on the website and either continue to use the tool on the web or download the Figma desktop app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After signing up, you\u2019ll be asked to choose a preset or template depending on the kind of interface you\u2019re designing. You\u2019ll have the option of a phone screen, desktop, presentation, wireframing kits, or a blank canvas.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For the purposes of this blog post, let\u2019s say you\u2019re designing a website. For this, you\u2019d choose a <\/span><b>desktop frame<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first thing you&#8217;ll notice when you open Figma for the first time is that it&#8217;s not like Photoshop or Illustrator. There are no layers or tools floating around. Instead, everything is contained on one screen. This makes editing easier than ever, because you can see all of your design together at once and make edits from any object in your design (this can be especially helpful if you&#8217;re working on iconography or typefaces).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at the four main areas that make up the Figma interface:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Menu bar: <\/b><span style=\"font-weight: 400;\">At the top of the screen is where all of the basic features live: Main menu, region tools, shape tools, drawing tools, resources, comments, and sharing.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Layers:<\/b><span style=\"font-weight: 400;\"> On the left-hand side of the screen are the layers, where all your elements are listed. You can organize these elements by frame, group them, and rename them.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Canvas: <\/b><span style=\"font-weight: 400;\">The canvas is the main space in the middle where you\u2019ll view, create, and design your interfaces.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inspector: <\/b><span style=\"font-weight: 400;\">The inspector sits on the right-hand side, offering detailed information and settings for whatever object or element is selected.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, it\u2019s time to get designing!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Everything you need to start adding to your frame is in the menu bar on the top left-hand side. Here, you can select things like shapes and text boxes to embellish your blank canvas with elements. You can refine and edit each element using the inspection bar on the right-hand side\u2014like rounding off the corners of a rectangle to create a button, or cloning text.\u00a0<\/span><\/p>\n<p><b>Pro tip: <\/b><span style=\"font-weight: 400;\">Be sure to name your elements as you go along, so you can easily identify each component as you refine your design. You can rename and group elements on the left-hand side by double-clicking the name.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To move around a page&#8217;s design area, select an object by clicking on it; then use your mouse wheel or hold down SHIFT + left-click or drag the object to move around (dragging will align objects perfectly). To duplicate an item or group of items from one place on a canvas to another place, hold down CTRL and drag.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If starting from scratch feels too overwhelming, we recommend checking out one of Figma\u2019s <\/span><a href=\"https:\/\/www.figma.com\/templates\/wireframe-kits\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">free wireframe kits<\/span><\/a><span style=\"font-weight: 400;\">. These contain basic pre-designed elements and templates which you can drag, drop, and customise to create speedy designs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Try and challenge yourself to create a basic wireframe of a website homepage using basic elements like shapes and text. Check out this list of <\/span><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040328653-Use-shortcuts-and-quick-actions\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma shortcuts<\/span><\/a><span style=\"font-weight: 400;\"> to help you get to know the interface better, and voila\u2014you\u2019re officially a Figma user!\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-user-researchp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/user-research?utm_source=blog&amp;utm_medium=%20blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN USER RESEARCH]<\/p>\n                    <span>Take our Professional Certificate in User Research<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"round-up\"><strong>Next steps: Advancing your Figma skills\u00a0<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">As a beginner Figma user, you\u2019ll want to master the basics first before exploring some of the tool\u2019s more advanced functions. However, Figma is a highly user-friendly and accessible tool\u2014and once you\u2019ve gotten the hang of it, you\u2019ll quickly gain the confidence to push the boundaries with your designs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are five handy tips for advancing your Figma skills:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Practice makes perfect:<\/b><span style=\"font-weight: 400;\"> Make Figma part of your daily routine. Once you\u2019ve gotten comfortable using the app, you\u2019ll start stumbling across new features, uses, and shortcuts that make your design workflow even faster. The more confident you get, the speedier you\u2019ll be\u2014and before long, Figma will feel like second nature. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Design collaboratively: <\/b><span style=\"font-weight: 400;\">Figma was created with collaboration in mind, so part of your learning process should involve some group design sessions with your colleagues, friends, or design mentor. Feedback and sharing features are important parts of the tool, so it\u2019s important to get comfortable with using them. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Learn from the experts:<\/b> <a href=\"https:\/\/www.youtube.com\/watch?v=FTFaQWZBqQ8\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">YouTube<\/span><\/a><span style=\"font-weight: 400;\"> is brimming with free Figma tutorials that often come with templates, so there&#8217;s no need to start from scratch each time. Simply plug them into your existing project file while following along with instructions provided by UI designers who&#8217;ve successfully completed similar projects before moving on to something more ambitious. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Get inspired:<\/b><span style=\"font-weight: 400;\"> So many of the world\u2019s most beautiful and creative digital experiences have been designed in Figma. To expand your understanding of how to use the tool\u2014and the kinds of designs you could create\u2014try browsing sites like <\/span><a href=\"https:\/\/dribbble.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Dribbble<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Behance<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Pinterest<\/span><\/a><span style=\"font-weight: 400;\"> (using Figma tags). You can also check out some of the templates and UI kits created by other Figma designers on the <\/span><a href=\"https:\/\/www.figma.com\/community\/category\/inspiration\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u2018inspiration\u2019 page of the community hub<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Make use of the community: <\/b><span style=\"font-weight: 400;\">Figma has an active and supportive <\/span><a href=\"https:\/\/forum.figma.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">community forum<\/span><\/a><span style=\"font-weight: 400;\">, where you can share your designs, learn from more experienced designers, and find solutions for any roadblocks you run into when using the tool. You\u2019ll also feel more comfortable using the tool knowing there are hundreds of other beginner UI designers who are on the same journey!<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Looking for more ways to sharpen your UI design skill set? Check out our guide to <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/become-a-better-ui-designer\/\"><span style=\"font-weight: 400;\">becoming a better UI designer<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From pixel-perfect layouts to responsive websites, Figma has earned its spot as the new industry standard for design tools. As a result, it\u2019s the software of choice for many design teams\u2014and today, every UI designer needs a basic understanding of how to design in Figma.\u00a0<\/p>\n","protected":false},"author":34,"featured_media":7613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[274],"tags":[],"class_list":["post-7600","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-tools"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7600"}],"version-history":[{"count":7,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7600\/revisions"}],"predecessor-version":[{"id":9725,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7600\/revisions\/9725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7613"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}