{"id":50,"date":"2023-04-14T15:24:24","date_gmt":"2023-04-14T15:24:24","guid":{"rendered":"https:\/\/onlinedesigntutorials.com\/?p=50"},"modified":"2023-04-15T21:22:15","modified_gmt":"2023-04-15T21:22:15","slug":"creating-a-simple-interface-using-simple-shapes-in-figma","status":"publish","type":"post","link":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/","title":{"rendered":"Creating a simple interface using simple shapes in Figma"},"content":{"rendered":"\n<p>In this exercise, you are going to create an interface that uses simple shapes made in Figma. \u00a0You will create the interface for a subject of your choice the landing page the discover page and the sign up page you will have three buttons. <strong>Home Discover and Join<\/strong><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"448\" height=\"334\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-10.png\" alt=\"\" class=\"wp-image-55 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-10.png 448w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-10-300x224.png 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><\/p>\n\n\n\n<p>You will create a simple icon logo for the top right corner, and an icon for the main in the centre page created using simple shapes such as the rectangle, circle polygon, line tool you also use boolean functions to create the shape.<\/p>\n\n\n\n<p>You should also use columns to help you align text and images.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"351\" height=\"241\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-15-at-22.16.35.png\" alt=\"\" class=\"wp-image-74 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-15-at-22.16.35.png 351w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-15-at-22.16.35-300x206.png 300w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>Desktop Frame<\/strong><\/p>\n\n\n\n<p>1. Select the frame tool go to the properties panel and choose desktop. Choose the colour for your interface using the Swatch is in the properties panel. And the layers palette label this frame as a landing page<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"394\" height=\"286\" src=\"http:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-6.png\" alt=\"\" class=\"wp-image-52 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-6.png 394w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-6-300x218.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>Navigation Bar<\/strong><\/p>\n\n\n\n<p>2. Create the text buttons for this interface using the text tool and using a suitable colour against the dark background to create text for home discover and join. Text should be 16.px bold<\/p>\n<\/div><\/div>\n\n\n\n<p><strong>Heading text<\/strong><\/p>\n\n\n\n<p>3. Create text to accompany the logo design using a larger font size but it should be welcoming to fool the viewer into typing something appropriate for your website, in this case, fill the music was used. The headings should be around 1.96 times larger than your body text to create sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings.<\/p>\n\n\n\n<p>Body text&nbsp; sizes should be around 16px to 18px for legibility<\/p>\n\n\n\n<p><strong>Subheading<\/strong> <\/p>\n\n\n\n<p>4. Create the subheading text to accompany the main text. These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:48% auto\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"378\" height=\"244\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-11.png\" alt=\"\" class=\"wp-image-61 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-11.png 378w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-11-300x194.png 300w\" sizes=\"(max-width: 378px) 100vw, 378px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">Creating the call-to-action button. <\/h4>\n\n\n\n<p>5. The call-to-action button should be direct the statement on it should be telling or instructing the viewer to do something like Join Now or sign up now. Select the rectangle tool to create the block for your button. in the properties panel select a complementary colour pull the button as this should stand out using the text tool type Join Now place the text on top of the rectangle centre the text using the properties panel select the rectangle and change it&#8217;s corners to rounded corners<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"524\" height=\"266\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-12.png\" alt=\"\" class=\"wp-image-66 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-12.png 524w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-12-300x152.png 300w\" sizes=\"(max-width: 524px) 100vw, 524px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>Creating the icon<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>6. Create an icon for your webpage using the techniques we have considered.<\/p>\n<\/div><\/div>\n\n\n\n<p><strong>Tips for copying and pasting from one frame to another<\/strong><\/p>\n\n\n\n<p>tip: make sure you label your layers carefully tip: try to group items and label these items carefully<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"274\" height=\"474\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-13.png\" alt=\"\" class=\"wp-image-71 size-full\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-13.png 274w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-13-173x300.png 173w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>To copy and paste from one page to another is very straightforward. Select the item you want to copy over from one frame press command C and then simply go to the frame you want to copy to by selecting it make sure that this is selected in the layers palette and then press command V to copy over.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"437\" src=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-1024x437.png\" alt=\"\" class=\"wp-image-72\" srcset=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-1024x437.png 1024w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-300x128.png 300w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-768x328.png 768w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-1536x655.png 1536w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-2048x874.png 2048w, https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/image-6-850x363.png 850w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this exercise, you are going to create an interface that uses simple shapes made in Figma. \u00a0You will create the interface for a subject of your choice the landing page the discover page and the sign up page you will have three buttons. Home Discover and Join You will create a simple icon logo&#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>Creating a simple interface using simple 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\/creating-a-simple-interface-using-simple-shapes-in-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a simple interface using simple shapes in Figma - Online Design Tutorials\" \/>\n<meta property=\"og:description\" content=\"In this exercise, you are going to create an interface that uses simple shapes made in Figma. \u00a0You will create the interface for a subject of your choice the landing page the discover page and the sign up page you will have three buttons. Home Discover and Join You will create a simple icon logo...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Design Tutorials\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-14T15:24:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-15T21:22:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-10.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=\"3 minutes\" \/>\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\/creating-a-simple-interface-using-simple-shapes-in-figma\/\",\"url\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/\",\"name\":\"Creating a simple interface using simple shapes in Figma - Online Design Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/#website\"},\"datePublished\":\"2023-04-14T15:24:24+00:00\",\"dateModified\":\"2023-04-15T21:22:15+00:00\",\"author\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908\"},\"breadcrumb\":{\"@id\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/onlinedesigntutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a simple interface using simple 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":"Creating a simple interface using simple 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\/creating-a-simple-interface-using-simple-shapes-in-figma\/","og_locale":"en_US","og_type":"article","og_title":"Creating a simple interface using simple shapes in Figma - Online Design Tutorials","og_description":"In this exercise, you are going to create an interface that uses simple shapes made in Figma. \u00a0You will create the interface for a subject of your choice the landing page the discover page and the sign up page you will have three buttons. Home Discover and Join You will create a simple icon logo...","og_url":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/","og_site_name":"Online Design Tutorials","article_published_time":"2023-04-14T15:24:24+00:00","article_modified_time":"2023-04-15T21:22:15+00:00","og_image":[{"url":"https:\/\/onlinedesigntutorials.com\/wp-content\/uploads\/2023\/04\/Picture-10.png"}],"author":"dhughes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"dhughes","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/","url":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/","name":"Creating a simple interface using simple shapes in Figma - Online Design Tutorials","isPartOf":{"@id":"https:\/\/onlinedesigntutorials.com\/#website"},"datePublished":"2023-04-14T15:24:24+00:00","dateModified":"2023-04-15T21:22:15+00:00","author":{"@id":"https:\/\/onlinedesigntutorials.com\/#\/schema\/person\/69c8e2d5bf644e0d1a37101c26cc5908"},"breadcrumb":{"@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinedesigntutorials.com\/index.php\/2023\/04\/14\/creating-a-simple-interface-using-simple-shapes-in-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinedesigntutorials.com\/"},{"@type":"ListItem","position":2,"name":"Creating a simple interface using simple 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\/50"}],"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=50"}],"version-history":[{"count":10,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/posts\/50\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onlinedesigntutorials.com\/index.php\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}