{"id":29,"date":"2023-04-14T14:58:48","date_gmt":"2023-04-14T14:58:48","guid":{"rendered":"https:\/\/onlinedesigntutorials.com\/?p=29"},"modified":"2023-04-14T14:58:48","modified_gmt":"2023-04-14T14:58:48","slug":"shapes-in-figma","status":"publish","type":"post","link":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/","title":{"rendered":"Shapes in Figma"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"852\" height=\"110\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image.png\" alt=\"\" class=\"wp-image-30\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image.png 852w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-300x39.png 300w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-768x99.png 768w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-850x110.png 850w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\n<p>Shapes make up the majority of your layers in any given design. Figma has some basic shapes you can use as your building blocks. Rectangle Line Arrow Ellipse<a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040450133#polygons\"> <\/a>Polygon Star &nbsp;<\/p>\n\n\n\n<p>&nbsp;You can apply different strokes and fills to any shape including the rectangle shape. You can change the colour by clicking on the swatch, and choosing the colour of both the stroke and the film you can also choose to apply a stroke to selected sides of your shape. &nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"458\" height=\"418\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-1.png\" alt=\"\" class=\"wp-image-32\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-1.png 458w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-1-300x274.png 300w\" sizes=\"(max-width: 458px) 100vw, 458px\" \/><\/figure>\n\n\n\n<p><strong>Radius<\/strong> You can choose to apply radius is to your rectangle shape you can either apply to one corner or you can apply to all corners. The properties box will allow you to selectively put in the value for your radius. Alternatively, you can use your mouse and hover over the shape and points will come up which will allow you to adjust the radius.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"532\" height=\"192\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-2.png\" alt=\"\" class=\"wp-image-33\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-2.png 532w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-2-300x108.png 300w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n\n\n\n<p><strong>Lines Arrows<\/strong><\/p>\n\n\n\n<p>The line and arrow tool is very straightforward. You can select the colour using this watch in the properties panel and you can change the width of the stroke. You can change the direction of the arrow, all of the line by using the rotate tool. &nbsp; &nbsp; <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"406\" height=\"390\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-3.png\" alt=\"\" class=\"wp-image-34\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-3.png 406w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-3-300x288.png 300w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><\/figure>\n\n\n\n<p>You can also apply a drop shadow to the arrow line to the fact you can do this to all the other shapes just simply select the shape and then the properties panel go to drop shadow and you should be able to select a colour for your shadow and putting blur properties and spread properties, using numerical values.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"478\" height=\"232\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-4.png\" alt=\"\" class=\"wp-image-35\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-4.png 478w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-4-300x146.png 300w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Shapes make up the majority of your layers in any given design. Figma has some basic shapes you can use as your building blocks. Rectangle Line Arrow Ellipse Polygon Star &nbsp; &nbsp;You can apply different strokes and fills to any shape including the rectangle shape. You can change the colour by clicking on the swatch,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Shapes in Figma - Online Design Tutorials<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shapes in Figma - Online Design Tutorials\" \/>\n<meta property=\"og:description\" content=\"Shapes make up the majority of your layers in any given design. Figma has some basic shapes you can use as your building blocks. Rectangle Line Arrow Ellipse Polygon Star &nbsp; &nbsp;You can apply different strokes and fills to any shape including the rectangle shape. You can change the colour by clicking on the swatch,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Design Tutorials\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-14T14:58:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image.png\" \/>\n<meta name=\"author\" content=\"dhughes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"dhughes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/\",\"url\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/\",\"name\":\"Shapes in Figma - Online Design Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/#website\"},\"datePublished\":\"2023-04-14T14:58:48+00:00\",\"dateModified\":\"2023-04-14T14:58:48+00:00\",\"author\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908\"},\"breadcrumb\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/onlinedesigntutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shapes in Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/#website\",\"url\":\"https:\/\/onlinedesigntutorials.com\/\",\"name\":\"Online Design Tutorials\",\"description\":\"The Number One Place to Find Design Tutorials Online\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/onlinedesigntutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908\",\"name\":\"dhughes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d87df668ae0f1b7ff55ebe73237c002?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d87df668ae0f1b7ff55ebe73237c002?s=96&d=mm&r=g\",\"caption\":\"dhughes\"},\"sameAs\":[\"http:\/\/onlinedesigntutorials.com\"],\"url\":\"https:\/\/onlinedesigntutorials.com\/index.php\/author\/dhughes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shapes in Figma - Online Design Tutorials","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/","og_locale":"en_US","og_type":"article","og_title":"Shapes in Figma - Online Design Tutorials","og_description":"Shapes make up the majority of your layers in any given design. Figma has some basic shapes you can use as your building blocks. Rectangle Line Arrow Ellipse Polygon Star &nbsp; &nbsp;You can apply different strokes and fills to any shape including the rectangle shape. You can change the colour by clicking on the swatch,...","og_url":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/","og_site_name":"Online Design Tutorials","article_published_time":"2023-04-14T14:58:48+00:00","og_image":[{"url":"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image.png"}],"author":"dhughes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"dhughes","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/","url":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/","name":"Shapes in Figma - Online Design Tutorials","isPartOf":{"@id":"https:\/\/onlinedesigntutorials.com\/#website"},"datePublished":"2023-04-14T14:58:48+00:00","dateModified":"2023-04-14T14:58:48+00:00","author":{"@id":"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908"},"breadcrumb":{"@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/shapes-in-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinedesigntutorials.com\/"},{"@type":"ListItem","position":2,"name":"Shapes in Figma"}]},{"@type":"WebSite","@id":"https:\/\/onlinedesigntutorials.com\/#website","url":"https:\/\/onlinedesigntutorials.com\/","name":"Online Design Tutorials","description":"The Number One Place to Find Design Tutorials Online","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinedesigntutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908","name":"dhughes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d87df668ae0f1b7ff55ebe73237c002?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d87df668ae0f1b7ff55ebe73237c002?s=96&d=mm&r=g","caption":"dhughes"},"sameAs":["http:\/\/onlinedesigntutorials.com"],"url":"https:\/\/onlinedesigntutorials.com\/index.php\/author\/dhughes\/"}]}},"_links":{"self":[{"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts\/29"}],"collection":[{"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":3,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts\/29\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}