{"id":20820,"date":"2024-08-03T09:26:03","date_gmt":"2024-08-03T09:26:03","guid":{"rendered":"https:\/\/www.oflox.com\/blog\/?p=20820"},"modified":"2024-08-30T00:43:02","modified_gmt":"2024-08-30T00:43:02","slug":"how-to-design-a-website-in-figma","status":"publish","type":"post","link":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/","title":{"rendered":"How to Design a Website in Figma: A-to-Z Guide for Beginners!"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this article, I will explain <strong>How to Design a Website in Figma<\/strong>. If you are interested in learning more about it, continue reading as I provide you with comprehensive information on the topic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Designing a website is a crucial step in establishing an online presence, and Figma has emerged as a go-to tool for designers due to its robust features and collaborative capabilities. Whether you&#8217;re a seasoned designer or just starting out, Figma&#8217;s intuitive interface and powerful design tools can help you create visually stunning and user-friendly websites. In this article, we will guide you through the process of designing a website in Figma, from setting up your project to finalizing your design for development.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2240\" height=\"1260\" src=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg\" alt=\"How to Design a Website in Figma\" class=\"wp-image-20821\" srcset=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg 2240w, https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma-768x432.jpg 768w, https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma-1536x864.jpg 1536w, https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 2240px) 100vw, 2240px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Today\u2019s article delves into the topic of \u201c<strong>How to Design a Website in Figma<\/strong>\u201d It covers all the essential information you need to know.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s begin!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a306a468e84b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a306a468e84b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#What_is_Figma\" >What is Figma?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#How_to_Design_a_Website_in_Figma\" >How to Design a Website in Figma?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#1_Set_Up_Your_Figma_Project\" >1. Set Up Your Figma Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#2_Plan_Your_Layout\" >2. Plan Your Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#3_Design_the_Main_Components\" >3. Design the Main Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#4_Use_Styles_and_Components\" >4. Use Styles and Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#5_Design_for_Responsiveness\" >5. Design for Responsiveness<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#6_Add_Interactions_and_Prototyping\" >6. Add Interactions and Prototyping<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#7_Collaborate_and_Get_Feedback\" >7. Collaborate and Get Feedback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#8_Export_Assets\" >8. Export Assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#9_Test_Your_Design\" >9. Test Your Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#10_Final_Review_and_Handoff\" >10. Final Review and Handoff<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#Pros_and_Cons_of_Using_Figma\" >Pros and Cons of Using Figma<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#Pros\" >Pros<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#Cons\" >Cons<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Figma\"><\/span>What is Figma?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Figma is a cloud-based design tool that allows users to create and collaborate on website and app designs. It supports real-time teamwork, letting multiple people work on the same project at once. Figma is known for its ease of use, powerful features, and accessibility from any device with an internet connection. This makes it a preferred choice for designers and teams looking to streamline their design process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Design_a_Website_in_Figma\"><\/span>How to Design a Website in Figma?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/unicornplatform.com\/blog\/the-benefits-of-ai-in-website-development-how-artificial-intelligence-is-revolutionizing-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Designing a website<\/a> is a crucial step in establishing an online presence. Figma, a powerful design tool, makes this process efficient and collaborative. Here\u2019s a step-by-step guide to designing a website in Figma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Set_Up_Your_Figma_Project\"><\/span>1. <strong>Set Up Your Figma Project<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create a New File<\/strong>: Open Figma and click on the \u201c+\u201d icon to create a new file.<\/li>\n\n\n\n<li><strong>Define Your Canvas Size<\/strong>: Set the frame size to match the dimensions of your website. Standard desktop sizes are 1440&#215;1024 or 1920&#215;1080 pixels.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Plan_Your_Layout\"><\/span>2. <strong>Plan Your Layout<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wireframing<\/strong>: Start with a wireframe to outline the basic structure of your website. Use simple shapes to represent different sections like the header, footer, sidebar, and main content areas.<\/li>\n\n\n\n<li><strong>Sitemap and User Flow<\/strong>: Plan out the different pages and how users will navigate through your site. This helps in creating a cohesive design.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Design_the_Main_Components\"><\/span>3. <strong>Design the Main Components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Header<\/strong>: Design the header, including the logo, navigation menu, and any call-to-action buttons.<\/li>\n\n\n\n<li><strong>Footer<\/strong>: Create a footer that includes links to important pages, social media icons, and contact information.<\/li>\n\n\n\n<li><strong>Main Content Area<\/strong>: Design the body of your website, focusing on the layout of text, images, and other multimedia.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Use_Styles_and_Components\"><\/span>4. <strong>Use Styles and Components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create Styles<\/strong>: Define text styles (e.g., headings, paragraphs), color palettes, and button styles to maintain consistency across your design.<\/li>\n\n\n\n<li><strong>Components and Instances<\/strong>: Use Figma\u2019s components feature to create reusable elements like buttons, forms, and icons. This ensures consistency and makes updates easier.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Design_for_Responsiveness\"><\/span>5. <strong>Design for Responsiveness<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create Variants<\/strong>: Design multiple versions of your layout for different screen sizes (desktop, tablet, mobile).<\/li>\n\n\n\n<li><strong>Auto Layout<\/strong>: Use Figma\u2019s auto layout feature to make your designs responsive. This ensures that elements resize and reposition correctly on different devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Add_Interactions_and_Prototyping\"><\/span>6. <strong>Add Interactions and Prototyping<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Link Pages<\/strong>: Use Figma\u2019s prototyping tools to link different pages and create a navigable prototype.<\/li>\n\n\n\n<li><strong>Add Interactions<\/strong>: Define hover states, click actions, and animations to make your prototype interactive.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Collaborate_and_Get_Feedback\"><\/span>7. <strong>Collaborate and Get Feedback<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Share Your Design<\/strong>: Invite team members or clients to view your design by sharing the Figma link.<\/li>\n\n\n\n<li><strong>Commenting<\/strong>: Use Figma\u2019s commenting feature to receive feedback directly on your design.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"8_Export_Assets\"><\/span>8. <strong>Export Assets<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prepare for Development<\/strong>: Export design assets like images, icons, and style guides for your development team. Figma supports various formats like PNG, SVG, and PDF.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"9_Test_Your_Design\"><\/span>9. <strong>Test Your Design<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prototype Testing<\/strong>: Test your interactive prototype to ensure usability and functionality.<\/li>\n\n\n\n<li><strong>User Testing<\/strong>: Conduct user testing sessions to gather real-world feedback and make necessary adjustments.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"10_Final_Review_and_Handoff\"><\/span>10. <strong>Final Review and Handoff<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Final Review<\/strong>: Conduct a final review of your design to ensure everything is polished and ready for development.<\/li>\n\n\n\n<li><strong>Developer Handoff<\/strong>: Use Figma\u2019s developer handoff features to provide developers with all the necessary information, including CSS properties and design specs.<\/li>\n<\/ul>\n\n\n\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=\"Figma tutorial for Beginners: Complete Website from Start to Finish\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/HZuk6Wkx_Eg?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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pros_and_Cons_of_Using_Figma\"><\/span>Pros and Cons of Using Figma<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pros\"><\/span><strong>Pros<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Collaborative Design<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Real-Time Collaboration<\/strong>: Multiple designers can work on the same project simultaneously, making teamwork seamless.<\/li>\n\n\n\n<li><strong>Commenting and Feedback<\/strong>: Stakeholders can leave comments directly on the design, facilitating clear communication and faster iterations.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cloud-Based Platform<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Accessibility<\/strong>: Access your projects from any device with an internet connection, eliminating the need for local installations.<\/li>\n\n\n\n<li><strong>Automatic Updates<\/strong>: Always have the latest features and improvements without needing manual updates.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Design Consistency<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Styles and Components<\/strong>: Create reusable styles and components to maintain consistency across your designs.<\/li>\n\n\n\n<li><strong>Design Systems<\/strong>: Easily manage and update design systems that can be shared across teams and projects.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Prototyping and Interactivity<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Interactive Prototypes<\/strong>: Create clickable prototypes with interactions and animations to simulate the user experience.<\/li>\n\n\n\n<li><strong>User Testing<\/strong>: Share prototypes with users for feedback and testing, allowing for iterative design improvements.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Developer Handoff<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Inspect Mode<\/strong>: Developers can easily inspect elements, view CSS properties, and export assets, streamlining the handoff process.<\/li>\n\n\n\n<li><strong>Code Generation<\/strong>: Figma provides CSS snippets, making it easier for developers to translate designs into code.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Versatility<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Responsive Design<\/strong>: Design for multiple screen sizes using Figma\u2019s auto layout and constraints features.<\/li>\n\n\n\n<li><strong>Third-Party Integrations<\/strong>: Integrate with other tools like Slack, Zeplin, and JIRA to enhance your workflow.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Ease of Use<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Intuitive Interface<\/strong>: Figma\u2019s user-friendly interface makes it accessible for both beginners and experienced designers.<\/li>\n\n\n\n<li><strong>Rich Feature Set<\/strong>: Includes vector editing, Boolean operations, and other advanced design tools.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cons\"><\/span><strong>Cons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Performance Issues<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Lag on Large Files<\/strong>: Complex projects with many layers and components can slow down the application, impacting performance.<\/li>\n\n\n\n<li><strong>Internet Dependence<\/strong>: Being cloud-based, performance can suffer with slow internet connections.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Limited Offline Access<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>No Full Offline Mode<\/strong>: Figma requires an internet connection for most functionalities, which can be a drawback in areas with poor connectivity.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Learning Curve<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Advanced Features<\/strong>: While the basics are easy to grasp, mastering all of Figma\u2019s advanced features can take time.<\/li>\n\n\n\n<li><strong>Constant Updates<\/strong>: Frequent updates mean constantly learning new features and changes.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cost<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Subscription Fees<\/strong>: While there is a free tier, advanced features and larger team collaboration require a paid subscription, which can be expensive for smaller teams or freelancers.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Resource Management<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Asset Organization<\/strong>: Managing and organizing a large number of assets, components, and styles can become cumbersome without proper practices.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Plugin Dependency<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Limited Native Features<\/strong>: Some functionalities rely heavily on third-party plugins, which may not always be maintained or updated.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Export Limitations<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Export Quality<\/strong>: Sometimes, exported assets may not meet the desired quality or format requirements, requiring additional tweaks.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:23px\"><strong>Conclusion:)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Designing a website in Figma is a structured yet flexible process that allows for creativity and collaboration. By following these steps, you can create a visually appealing and user-friendly website that stands out. Figma\u2019s powerful features make it an ideal choice for both beginners and experienced designers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Read also:)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.oflox.com\/blog\/how-to-sell-website-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Sell Website Templates: A-to-Z Guide for Beginners!<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.oflox.com\/blog\/how-to-sell-a-website-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Sell a Website Online: A Detailed Guide!<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.oflox.com\/blog\/how-to-sell-a-domain-name-on-godaddy\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Sell a Domain Name on GoDaddy: A Detailed Guide!<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><em>I hope you found this article on <strong>How to Design a Website in Figma<\/strong>. If you have any questions or suggestions, please feel free to share them in the comments below. Thank you for taking the time to read this article.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I will explain How to Design a Website in Figma. If you are interested in learning more &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Design a Website in Figma: A-to-Z Guide for Beginners!\" class=\"read-more button\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#more-20820\" aria-label=\"More on How to Design a Website in Figma: A-to-Z Guide for Beginners!\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":20821,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2345],"tags":[33558,33557,33568,33560,33563,33561,33562,12590,33559,33567,33569,33564,33565,33566,33556],"class_list":["post-20820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","tag-design-a-website","tag-design-website-in-figma","tag-designing-a-website-in-figma","tag-figma-for-web-design","tag-figma-for-website-design","tag-figma-web-design","tag-figma-webpage-design","tag-how-to-design-a-website","tag-how-to-design-a-website-in-figma","tag-how-to-use-figma-for-web-design","tag-how-to-use-figma-to-design-a-website","tag-use-figma-to-design-a-website","tag-using-figma-for-web-design","tag-using-figma-to-design-a-website","tag-what-is-figma","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Design a Website in Figma: A-to-Z Guide for Beginners!<\/title>\n<meta name=\"description\" content=\"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a Website in Figma: A-to-Z Guide for Beginners!\" \/>\n<meta property=\"og:description\" content=\"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Oflox\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ofloxindia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ofloxindia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-03T09:26:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-30T00:43:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@oflox3\" \/>\n<meta name=\"twitter:site\" content=\"@oflox3\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/\"},\"author\":{\"name\":\"Editorial Team\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/person\\\/967235da2149ca663a607d1c0acd4f81\"},\"headline\":\"How to Design a Website in Figma: A-to-Z Guide for Beginners!\",\"datePublished\":\"2024-08-03T09:26:03+00:00\",\"dateModified\":\"2024-08-30T00:43:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/\"},\"wordCount\":1217,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/How-to-Design-a-Website-in-Figma.jpg\",\"keywords\":[\"Design a Website\",\"Design Website in Figma\",\"designing a website in figma\",\"figma for web design\",\"figma for website design\",\"figma web design\",\"figma webpage design\",\"how to design a website\",\"How to Design a Website in Figma\",\"how to use figma for web design\",\"how to use figma to design a website\",\"use figma to design a website\",\"using figma for web design\",\"using figma to design a website\",\"What is Figma\"],\"articleSection\":[\"Internet\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/\",\"name\":\"How to Design a Website in Figma: A-to-Z Guide for Beginners!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/How-to-Design-a-Website-in-Figma.jpg\",\"datePublished\":\"2024-08-03T09:26:03+00:00\",\"dateModified\":\"2024-08-30T00:43:02+00:00\",\"description\":\"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/How-to-Design-a-Website-in-Figma.jpg\",\"contentUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/How-to-Design-a-Website-in-Figma.jpg\",\"width\":2240,\"height\":1260,\"caption\":\"How to Design a Website in Figma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-design-a-website-in-figma\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Design a Website in Figma: A-to-Z Guide for Beginners!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\",\"name\":\"Oflox\",\"description\":\"India&rsquo;s #1 Trusted Digital Marketing Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\",\"name\":\"Oflox\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg\",\"contentUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg\",\"width\":355,\"height\":355,\"caption\":\"Oflox\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ofloxindia\",\"https:\\\/\\\/x.com\\\/oflox3\",\"https:\\\/\\\/www.instagram.com\\\/ofloxindia\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/person\\\/967235da2149ca663a607d1c0acd4f81\",\"name\":\"Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"caption\":\"Editorial Team\"},\"sameAs\":[\"https:\\\/\\\/www.oflox.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/ofloxindia\\\/\",\"https:\\\/\\\/www.instagram.com\\\/ofloxindia\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ofloxindia\\\/\",\"https:\\\/\\\/x.com\\\/oflox3\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design a Website in Figma: A-to-Z Guide for Beginners!","description":"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I","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:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/","og_locale":"en_US","og_type":"article","og_title":"How to Design a Website in Figma: A-to-Z Guide for Beginners!","og_description":"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I","og_url":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/","og_site_name":"Oflox","article_publisher":"https:\/\/www.facebook.com\/ofloxindia","article_author":"https:\/\/www.facebook.com\/ofloxindia\/","article_published_time":"2024-08-03T09:26:03+00:00","article_modified_time":"2024-08-30T00:43:02+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg","type":"image\/jpeg"}],"author":"Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@oflox3","twitter_site":"@oflox3","twitter_misc":{"Written by":"Editorial Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#article","isPartOf":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/"},"author":{"name":"Editorial Team","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/person\/967235da2149ca663a607d1c0acd4f81"},"headline":"How to Design a Website in Figma: A-to-Z Guide for Beginners!","datePublished":"2024-08-03T09:26:03+00:00","dateModified":"2024-08-30T00:43:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/"},"wordCount":1217,"commentCount":0,"publisher":{"@id":"https:\/\/www.oflox.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg","keywords":["Design a Website","Design Website in Figma","designing a website in figma","figma for web design","figma for website design","figma web design","figma webpage design","how to design a website","How to Design a Website in Figma","how to use figma for web design","how to use figma to design a website","use figma to design a website","using figma for web design","using figma to design a website","What is Figma"],"articleSection":["Internet"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/","url":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/","name":"How to Design a Website in Figma: A-to-Z Guide for Beginners!","isPartOf":{"@id":"https:\/\/www.oflox.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#primaryimage"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg","datePublished":"2024-08-03T09:26:03+00:00","dateModified":"2024-08-30T00:43:02+00:00","description":"In this article, I will explain How to Design a Website in Figma. If you are interested in learning more about it, continue reading as I","breadcrumb":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#primaryimage","url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg","contentUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2024\/08\/How-to-Design-a-Website-in-Figma.jpg","width":2240,"height":1260,"caption":"How to Design a Website in Figma"},{"@type":"BreadcrumbList","@id":"https:\/\/www.oflox.com\/blog\/how-to-design-a-website-in-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.oflox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Design a Website in Figma: A-to-Z Guide for Beginners!"}]},{"@type":"WebSite","@id":"https:\/\/www.oflox.com\/blog\/#website","url":"https:\/\/www.oflox.com\/blog\/","name":"Oflox","description":"India&rsquo;s #1 Trusted Digital Marketing Company","publisher":{"@id":"https:\/\/www.oflox.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oflox.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/www.oflox.com\/blog\/#organization","name":"Oflox","url":"https:\/\/www.oflox.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2020\/05\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg","contentUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2020\/05\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg","width":355,"height":355,"caption":"Oflox"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ofloxindia","https:\/\/x.com\/oflox3","https:\/\/www.instagram.com\/ofloxindia"]},{"@type":"Person","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/person\/967235da2149ca663a607d1c0acd4f81","name":"Editorial Team","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","caption":"Editorial Team"},"sameAs":["https:\/\/www.oflox.com\/","https:\/\/www.facebook.com\/ofloxindia\/","https:\/\/www.instagram.com\/ofloxindia\/","https:\/\/www.linkedin.com\/company\/ofloxindia\/","https:\/\/x.com\/oflox3"]}]}},"_links":{"self":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts\/20820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/comments?post=20820"}],"version-history":[{"count":0,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts\/20820\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/media\/20821"}],"wp:attachment":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/media?parent=20820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/categories?post=20820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/tags?post=20820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}