How to convert any website into a Figma design
While most people create designs from scratch in Figma, you can get inspiration from real websites and easily create Figma designs directly from an existing HTML page. Here's how to do it.
Why create Figma designs from HTML?
There are many reasons why you might want to copy an existing web design as a Figma design. Doing this through the Figma plugin saves time, allowing you to focus on fine-tuning your design.
Practicing web design by recreating existing websites is a great way to learn from the masters. You can also use the HTML to Figma designer if you've previously designed and published a website that you've lost access to. Instead of redesigning from scratch, you can save time by converting it back to Figma.
Now that you know why this tool can be useful, it's time to learn how it works.
How to convert any website into a Figma design
To start any Figma-based design work, you need to open Figma and log in or register. You can use the browser version, Figma, or download the desktop app; both work the same way for this project.
Open a new design file to start your HTML to Figma design project.
Step 1: Download Plugin html.to.design
To be able to directly convert a live website into a Figma design, you will need a plugin. There are countless plugins on Figma to help with your designs, including plugins for modeling phones and devices. You can add your converted website design to a mockup later if you wish.
To download the plugin, select the Figma menu (Figma logo) > Plugins > Find more plugins . Alternatively, you can choose Resources > Plugins . From either option, type in the search bar html.to.design.
Find the option provided by divRIOTS and select Run. This will open the plugin as a dialog on your Figma canvas.
Step 2: Paste the website URL
The html.to.design plugin is free but offers a Pro version. You can complete your entire design workflow with the free version.
Find the website you want to create a Figma design for. You should use a public website - not a website that can only be accessed by logging in.
Copy the full URL and paste it into the input box on Figma, replacing the site placeholder.
Step 3: Load your design
After pasting the website's URL, open Settings below the input box to choose the size of the design. You can import designs for a variety of devices, but you'll have more success choosing a desktop device using the desktop URL and mobile URL for mobile.
There are also customization options for devices or sizes that are not available as default options. The example will choose MacBook Pro 14' with Light theme.
Once you've specified your device and viewport settings, select Import to bring your HTML design into Figma. Wait until the loading bar is complete for the Figma design to appear.
Depending on the website you used, you may see a pop-up box explaining some typefaces that need to be replaced. This will be because copyright is granted to the typefaces. Figma will replace them with the typeface you have access to.
Exit any pop-ups, then exit the plugin dialog to see your new design in full form.
Step 4: Edit Figma . Design
From here, you can start editing your Figma website any way you want. As mentioned, this HTML to Figma functionality allows you to learn how existing web pages are designed to inspire you to create your own website from scratch. You can use a basic design from a website and create a presentation using transitions in Figma, or just learn how other designers set up websites.
On the left menu you will find layers. Since this has been converted directly from the HTML, layers can be more detailed or even confusing than what you're used to when designing yourself. Select a part of the design to find the highlighted layers on the left menu.
You can replace images, retype titles and text, or move things around in the layout by double-clicking on the design. The html.to.figma plugin does not duplicate animation or transition settings when clicking links or changing pages. You can add them yourself.
You should read it
- 16 Useful Figma Plugins Free Downloadable
- 9 best free Figma courses
- How to create an engaging presentation using Figma
- The most useful free Figma plugins
- 11 useful tips for a productive Figma workflow
- How to create a master template for presentations in Figma
- How to create a frosted glass effect in Figma
- 6 leading website design companies in Vietnam
May be interested
- Instructions for creating a website for beginnerswhat do websites need to do? is website design all right? if you want to make your own website from scratch, then read this tutorial to create a website for beginners.
- How to use Weebly to create a website on your phoneweebly is a service to create personal website quickly, with simple and completely free operation.
- How to design a website in Photoshop (Part 2): Create a Landing page for travel websitesin this tutorial, we will use photoshop cs6 to design a simple, clean landing page for a travel website. in this process, you will be taught how to create custom grids with links, create fonts, use a lot of white space and compose web content in a professional way.
- 10 tips to complement website designcurrently, website design is becoming easier and more convenient. the following article will introduce you to read 10 small advantages in website design to increase the usefulness of websites
- How to create a master template for presentations in Figmaif you're creating a stylized presentation, but don't want to use the familiar templates from powerpoint, google slides, or canva, you can create your own master template for future presentation designs.
- How to design profile photos on Profile Pic Maker for freewebsite profile pic maker will design profiles for the website, create online logos for social networks, help you get more choice of website logos, profile photos more personal.
- Design website with Adobe Dreamweaver CS5 software - Part 3part 3 will show you how to create a template, which is an indispensable page for website design with dreaweaver, because it helps create a consistent structure for both the website system and change this structure easily. easy, faster ...
- Structure of a standard SEO Google websiteseo standard website design is one of the important things that contribute significantly to the ranking of the website in the process of making seo. a website that is considered an seo standard must ensure the following factors
- How to create a frosted glass effect in Figmacreating a frosted glass effect is easy in figma and can add unique flair to your designs. the following article will show you how to do it.
- Instructions for creating a website using Dreamweaver CC - Part 8: Publishing a websitein the eighth and final part of this series, we will learn how to set up a remote site to publish web pages.