{"id":229,"date":"2024-04-18T23:23:27","date_gmt":"2024-04-18T23:23:27","guid":{"rendered":"https:\/\/croakthecode.tcu.edu\/nguyen\/?p=229"},"modified":"2024-05-06T19:13:18","modified_gmt":"2024-05-06T19:13:18","slug":"how-to-use-figma","status":"publish","type":"post","link":"https:\/\/croakthecode.tcu.edu\/nguyen\/2024\/04\/18\/how-to-use-figma\/","title":{"rendered":"how to: use figma"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In the design community, there is no constant debate on the best UX\/UI design. There is zero question between Figma and Adobe XD. <strong>Figma is just the one to go<\/strong> and can be seen in all designer&#8217;s workflow. Even for a not-related project like rebranding for Rhode Island School of Design, Andrea Trabucco-Campos, Creative Director at NY-based Gretel, used it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-rounded is-style-rounded--1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-1024x640.png\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-1024x640.png 1024w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-300x188.png 300w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-768x480.png 768w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-1536x960.png 1536w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.09.01-2048x1280.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/tinywow_tinywow_RPReplay_Final1715019452_55099998_55100071.mp4\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-text-align-center wp-block-paragraph\">Simply, Figma is <strong>real-time collaborative<\/strong> and effictive.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">For this reason, whether you are a product designer or not, intergrating Figma into your workflow is considered to be highly beneficial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we will learn to use Figma. This is not a comprehensive guide, because I don&#8217;t like learning by reading long manual. I find I learn better by making mistakes, so here is some good pointers to start with.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.figma.com\/\" data-type=\"link\" data-id=\"https:\/\/www.figma.com\/\">figma<\/a><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">anh&#8217;s notes from reading <strong><em>Beginners Guide To Figma With Tips And Tricks (<a href=\"https:\/\/medium.com\/@ajay.singh07\/beginners-guide-to-figma-with-tips-and-tricks-part-1-c3d57d0c8190\">Part 1<\/a> &amp; <a href=\"https:\/\/medium.com\/@ajay.singh07\/beginners-guide-to-figma-with-tips-and-tricks-part-2-dc53504add27\">Part 2<\/a>)<\/em><\/strong> by <strong>Ajay Singh<\/strong>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-1024x641.png\" alt=\"\" class=\"wp-image-298\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-1024x641.png 1024w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-300x188.png 300w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-768x481.png 768w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-1536x962.png 1536w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-13.49.06-2048x1282.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">look how cute they make their headline. we must love it already \ud83d\ude00<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Figma is a collaborative interface design tool used for graphic design and user interface design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Strength<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Free to use.<\/li>\n\n\n\n<li>Cross-platform compatibility (works on smartphone, Mac, and PC).<\/li>\n\n\n\n<li>Real-time team collaboration.<\/li>\n\n\n\n<li>Integrated developers hand-off specs for Mac and PC.<\/li>\n\n\n\n<li>High-quality prototyping with a fantastic team library.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Weakness<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Limited offline functionality compared to some competitors.<\/li>\n\n\n\n<li>Steeper learning curve for users accustomed to other design tools.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">step-by-step guide<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Getting Started<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--2\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*w9ereTGcEngJNyYa.png\" alt=\"\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sign up at Figma and follow the instructions.<\/li>\n\n\n\n<li>Create a new file to begin designing.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Creating New Frames<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--3\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*gOsdK6kDnB5aJRry.gif\" alt=\"\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press A or F to access frame options.<\/li>\n\n\n\n<li>Choose frame size or draw custom frames.<\/li>\n\n\n\n<li>Resize frames without quality compromise.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3: Grids and Layouts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--4\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*3ix-816rnupcN43x.gif\" alt=\"\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize trendy 12-column bootstrap grid or custom CSS Grid.<\/li>\n\n\n\n<li>Adjust grid properties for columns, rows, fixed or fluid layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: Vector Shapes<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--5\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*LGwxG9cFgPDqw0GQ.gif\" alt=\"\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Vector Networks to create and customize complex shapes.<\/li>\n\n\n\n<li>Create shapes quickly using shortcuts or pen tool.<\/li>\n\n\n\n<li>Scalable and exportable at any scale.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 5: Groups and Layers<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--6\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*GPBGpb81TxQM8Y_G.gif\" alt=\"\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize layers panel to organize elements.<\/li>\n\n\n\n<li>Drag and drop to reorganize layers.<\/li>\n\n\n\n<li>Group layers for tidiness and easier manipulation.<\/li>\n\n\n\n<li>Use pages to organize distinct sections.<\/li>\n\n\n\n<li>Store components in the components panel.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 6: Advanced Techniques<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create styles<\/strong> for color, typography, grids, and effects: \n<ul class=\"wp-block-list\">\n<li>Make a shape.<\/li>\n\n\n\n<li>Set the fill to the desired color value.<\/li>\n\n\n\n<li>Select the color styles by clicking on the square icon.<\/li>\n\n\n\n<li>To add a category, click \u201c+.\u201d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Create <strong>reusable components<\/strong> for consistent design.\n<ul class=\"wp-block-list\">\n<li>Select the item click or on the top-right create component button.<\/li>\n\n\n\n<li>The purple component icon appears in the layers panel after that.<\/li>\n\n\n\n<li>Nested instances can be swapped using the right-hand instance swapping menu and dragging and dropping them from the components overview or your team library.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--7\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*bjhwEKV9T4QzchOh.gif\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Create a color style<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--8\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*ru2tUOR6qx_0KOpe.gif\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Create components<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize<strong> Auto Layout<\/strong> for dynamic frames.\n<ul class=\"wp-block-list\">\n<li>Add your content.<\/li>\n\n\n\n<li>In the right-hand side auto-layout properties menu, you can change those values.<\/li>\n\n\n\n<li>When you alter the content, the button will resize automatically.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Export assets<\/strong> in desired formats and sizes.<\/li>\n\n\n\n<li>Select an object.<\/li>\n\n\n\n<li>On the properties menu on the right, select export.<\/li>\n\n\n\n<li>Define the export process and you\u2019re done.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-12 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--10\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*x4dOBY9aEJbuKXBY\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Auto Layout<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image is-style-rounded is-style-rounded--11\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*fSpR636tuy7f_Q1_.png\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Export assets<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prototype designs<\/strong> for web and app interfaces.\n<ul class=\"wp-block-list\">\n<li>Select the device you\u2019re developing for under \u201cPrototype Settings.\u201d<\/li>\n\n\n\n<li>To view your design in action, press the play button on the upper right hand.<\/li>\n\n\n\n<li>Use the Figma Mirror app to preview his\/her work in real-time on your phone.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter is-style-rounded is-style-rounded--13\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1400\/0*9hwWjcaJz5R4ZMqP.gif\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Prototyping in Figma<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">takeaways<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use it like your new superpower, adding to your casual design politics and prankster&#8217;s behaviour! Good luck mate!<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-16 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-style-rounded is-style-rounded--14\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"640\" data-id=\"293\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/24a7a3b28dfe154e774ba70497a9d842.jpg\" alt=\"\" class=\"wp-image-293\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/24a7a3b28dfe154e774ba70497a9d842.jpg 539w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/24a7a3b28dfe154e774ba70497a9d842-253x300.jpg 253w\" sizes=\"auto, (max-width: 539px) 100vw, 539px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-rounded is-style-rounded--15\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"556\" data-id=\"294\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/235df781b0277809577a60bb34eb16e1.jpg\" alt=\"\" class=\"wp-image-294\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/235df781b0277809577a60bb34eb16e1.jpg 563w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/235df781b0277809577a60bb34eb16e1-300x296.jpg 300w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">after using Figma<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In the design community, there is no constant debate on the best UX\/UI design. There is zero question between Figma and Adobe XD. Figma is just the one to go and can be seen in all designer&#8217;s workflow. Even for a not-related project like rebranding for Rhode Island School of Design, Andrea Trabucco-Campos, Creative Director [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":292,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":0,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media\/292"}],"wp:attachment":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}