Figma Tutorial: Medical Landing Page Design From Figma to HTML (Theme Composer Plugin)
Tags: figma, tutorial, plugin, landingpage
Published: 2021-10-25 18:13:50



![](https://cdn-images-1.medium.com/max/1024/1*uPzZPiFWYYa97YdjYI8lmw.jpeg)<figcaption>Medical Landing Page Design From Figma to HTML (Theme Composer Plugin)</figcaption>

To design a Landing Page with Figma, you don’t have to be an expert in Figma. In fact, you can create a Landing page design in no time at all using the Theme Composer Figma plugin.

In this quick tutorial, we’ll use the Theme Composer Figma plugin to show you how to create a landing page, customize it, and covert it to HTML/CSS code.

So, in this tutorial, we’ll create a medical landing page and here’s a sneak peek at what the finished design will look like.

![](https://cdn-images-1.medium.com/max/907/1*XUe3xwIO8WyVTSTHL6QhUA.png)<figcaption>Landing Page Preview</figcaption>

To be able to design this landing page, we’ll see how to :

- **Generate a landing page design with the Theme Composer plugin.**
- **How to add our text and images content to the landing page.**
- **We’ll also see how to edit the color palette of the landing page.**
- **And lastly, we will convert our landing page to a responsive HTML code.**

### Video Tutorial Here!

[![IMAGE ALT TEXT HERE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4v4xk2ak07awr2gow81.jpg)](https://youtu.be/TPeyYGTOP3M)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Before we begin, let’s install the Theme Composer plugin to our Figma editor.

To install the plugin:

- First, head to [**figma.com/community**](http://figma.com/community)
- In the community search bar, you can type : **theme composer**

![](https://cdn-images-1.medium.com/max/1024/1*Gar8MWI6glc0FKkmZJ5ZrQ.png)

- Now, select the **plugin** tab below the navbar.

![](https://cdn-images-1.medium.com/max/1024/1*UZRJqHhk-a5Nq6kxh1S38Q.png)

- and hit the **Install** button in the right corner of the plugin’s preview.

![](https://cdn-images-1.medium.com/max/1024/1*w_i4U7jELk2X41s2i5eNGg.png)

- You can also install the plugin using the following link : [https://www.figma.com/community/plugin/1031231406409957685/Theme-Composer---Figma-Website-Builder](https://www.figma.com/community/plugin/1031231406409957685/Theme-Composer---Figma-Website-Builder)

You can get the plugin’s link down-below in the description.

- Hit the **Install** button in the top-right corner of the plugin’s home page to install.

![](https://cdn-images-1.medium.com/max/1024/1*8POP-uhUHu3Aga_U-kaj1Q.png)

To see the plugin in action, let’s go to our Figma editor and create a new Figma file.

- Then, **right MouseClick** on your canvas and go to **plugin > Theme Composer.**

Theme Composer is split into two sections: a **User Interface Library** and an **HTML Generator**.

Let’s open the **UI Library** section first

- Go to **plugin > Theme Composer > UI Library**

![](https://cdn-images-1.medium.com/max/700/1*wCt8XT_hMCpPp1OQ5aysaA.png)

![](https://cdn-images-1.medium.com/max/424/1*E0UjfRXcpWDe6hH3iVg3Sw.png)

You can scroll down in the plugin to see a wide range of ready to use **landing pages, headers, features, call to actions, footers** and many other building blocks at your disposal that you can use to build your website without the need to any design skills.

You can use the plugin’s drop-down menus to navigate through the available UI Library categories.

- Hit the **Categories** dropdown menu to see all the design categories available.

![](https://cdn-images-1.medium.com/max/424/1*iPVTJNam-64Hx0sc9NQyfg.png)

Every design element has two distinct styles: light and dark.

You can also filter by **Niches** , like **course, medical, school, legal, services** and so on.

- Hit the **Styles** drop-down menu to choose between Light or Dark style.

![](https://cdn-images-1.medium.com/max/424/1*PMM2liGLoOjE8o-VuYTKIQ.png)

- If you want to filter UI Elements by niches, click on the **Niches** drop-down to get access to all the design niches available.

![](https://cdn-images-1.medium.com/max/432/1*IJHzT3EmAV5F_bNBYg9sVw.png)

The second section of the plugin is the **Html Previewer**. This section allows you to convert every User Interface available in the Theme Composer **UI Library** to **HTML ** easily.

![](https://cdn-images-1.medium.com/max/683/1*SVOQkIAY8nl7d8kzhrlm6A.png)

- In the **Html Previewer** section, you can generate and access your design’s code source.

![](https://cdn-images-1.medium.com/max/423/1*bB7gFp5XvRV5axbwWd8WHA.png)

After this brief tour of the Plugin, let’s begin our tutorial.

### 1 — Generate the landing page design

To start, we’re gonna generate our landing page design First.

Let’s open the Theme Composer plugin.

- Go to **plugin > Theme Composer > UI Library**
- In the **Categories** dropdown menu select **landing page**.

![](https://cdn-images-1.medium.com/max/428/1*zKshc8Z2DKW7ll2izOYBhw.png)

We’re gonna pick the first landing page design in the UI Library.

![](https://cdn-images-1.medium.com/max/426/1*W0IgobGxi9zLpSDudYvTjQ.png)

To generate the landing page click on the **Generate** button bellow the landing page thumbnail.

![](https://cdn-images-1.medium.com/max/848/1*pOXHQQ-0Yl0KIFuMqyIJMA.png)

It will take some times for the plugin to generate all the layers, images and styles of the landing page.

![](https://cdn-images-1.medium.com/max/1024/1*IFd8_prv-2MqOXKC96OVSg.png)

Now that we’ve generated our landing page, we need to add our text and images content and edit our color styles.

### 2 — Edit the Design’s Content

#### 1 — Replace The Default Text Content

Let’s jump to the top of our landing page.

I would like to start by changing our logo placeholder. It is super easy to do it.

- First, hold the **CTRL** or **Command** key in mac and click on the logo layer with the **left MouseKey**.
- Now, **double click** to select the logo’s content.

We’re going to replace the text **Medical Hardy** with **Figmaland.** That’s about it, you can now change any text layer following these simple steps.

![](https://cdn-images-1.medium.com/max/1024/1*Jbi1TWRtb6CO0g7r4n-PZg.png)

We’ll also change our **headline**.

- Hold the **CTRL** or **Command** key in mac and select the **headline** layer with the **left MouseKey**.

![](https://cdn-images-1.medium.com/max/768/1*JxbuWw7EYjgRBJZ0wcQMZQ.png)

- Then, **double click** to select the headline’s content and replace the placeholder content our headline content.

![](https://cdn-images-1.medium.com/max/720/1*n3gB8qFOMEjZvzkSdz46MA.png)

We’ll do the same for the **sub-headline**.

- Hold the **CTRL** or **Command** key in mac and select the **sub-headline** layer with the **left MouseKey**.

![](https://cdn-images-1.medium.com/max/750/1*qYfY3HNci-FX0-jDMVDE3Q.png)

- Then, **double click** to select the **sub-headline** ’s content and replace the placeholder content with our content.

![](https://cdn-images-1.medium.com/max/666/1*7-pj59nR1vm_Po8dlbtSRw.png)

We can Also change the text on our buttons using the same steps as before.

![](https://cdn-images-1.medium.com/max/1024/1*PNoVkj-3wD_d1REZ_6KyMg.png)

Let’s move faster with the other text layers.

After being done with our text content, we’ll move to edit our landing page images.

#### 2 — Replace The Default Images

Let’s change our Header’s hero image.

![](https://cdn-images-1.medium.com/max/1024/1*QxwBb0BebloPuiO8266XaQ.png)

First, we’ll hold the **CTRL** or **Command** key in mac, and click on the image layer of our header with the **left MouseKey** to select it.

Now, we’ll go to the layer section in the left hand sidebar and make sur the layer **technology 2** is selected.

![](https://cdn-images-1.medium.com/max/235/1*DcKGbpki5NonAHOzEpKwaQ.png)

After selecting our image layer, let’s head to the Fill section in the right-hand sidebar. Hit the **image layer** inside the **Fill** section to trigger the **image modal**.

![](https://cdn-images-1.medium.com/max/494/1*HCpn-56w6q1ZFspj2rZXCw.png)

Now, we can hover on top of the image box in the modal to see the **Choose Image button** appears in the center of the image box.

![](https://cdn-images-1.medium.com/max/490/1*9qSsLwaBkYZFLFpNTrZbSQ.png)

Let’s click on **Choose image** , and pick our desired image from the folder window.

![](https://cdn-images-1.medium.com/max/709/1*AWhz_XWiC2uRy3IVVQNjqg.png)

![](https://cdn-images-1.medium.com/max/1024/1*V2XGkpsTJqqhsl7NyMHW_A.png)

Again to move fast in this tutorial, I will speed-up a little the process of editing the images content.

After editing our design’s content, we’ll see how we can customize more our design by editing its color styles.

#### **3 — Edit the Color Styles**

The Figma color styles allow us to easily access and change the color palette of our landing page. Let’s say we want to change the color of our buttons.

- First, we’ll **Select** the layer of our “BUY NOW” button

![](https://cdn-images-1.medium.com/max/295/1*5e94XvCklb7WfgJ86GL5mg.png)

- Then, head to the **Fill section** in the right-hand sidebar. Select the layer’s **color style** which is “ **primary-color”** to trigger the color **styles list**.

![](https://cdn-images-1.medium.com/max/235/1*489Ldzt1EWMxaqYuZnyV3w.png)

- Now, to change the color style applied to our button, click on the **edit style** icon beside **primary-color.**

![](https://cdn-images-1.medium.com/max/241/1*weVBPUTqJq_0t81l1lJTGA.png)

![](https://cdn-images-1.medium.com/max/240/1*zXqWktrpmM9Q_y57iC4jKA.png)

A **modal box** will appear besides **primary-color.**

![](https://cdn-images-1.medium.com/max/480/1*iGwl3hEeFaV1yAecc4_QUg.png)

- Select the **color square** on the bottom section of the modal to trigger the **color picker**.

![](https://cdn-images-1.medium.com/max/966/1*JxKJVGWCDWRl1IUPuq4ohw.png)

Now, let’s pick a light blue color on the color picker or add this code to the **Hex** input field:  **5CC8F6**.

![](https://cdn-images-1.medium.com/max/245/1*6X853g3vKQEh10sQh0fMDg.png)

Our new color will be applied to every component with the **primary-color** style attached to it.

![](https://cdn-images-1.medium.com/max/1024/1*gVxN7wcfzbF2EXRqcnH5vQ.png)

To see a list of all the color styles used on our landing page, simply click on the gray backdrop area. A list of color styles will be displayed in the right-hand sidebar.

You can edit any landing page color style as you see fit.

![](https://cdn-images-1.medium.com/max/1024/1*1X8KZGQNiuD4mDJNFTCgMA.png)

Now that we’ve inserted our content, we’ll move on to the exciting portion of this tutorial: converting our Figma landing page design to HTML.

### 3 — Convert the Landing Page Design to HTML & CSS

Let me to show you how to transform our design to a W3C valid Html code, and off course it is fully responsive. All that is done inside Figma, without the need to open a code editor or write a single line of code.

- First, select the landing page frame and go to **plugin > Theme Composer > Html Previewer**

![](https://cdn-images-1.medium.com/max/902/1*ika-BwwQpCO3WTZNTI78Jg.png)

- Hold the **Generate Html** button to generate the code source of the landing page.

![](https://cdn-images-1.medium.com/max/397/1*EnSfd7RyNqNYFCZvlo8rcg.png)

- In the **Html Previewer** section, we can access our landing page code source.

![](https://cdn-images-1.medium.com/max/423/1*bB7gFp5XvRV5axbwWd8WHA.png)

Besides the code source item in the **Html previewer** , we have the ability to generate a **preview link** , **download a Zip file** of our landing page code.

- To generate a **preview link** or **download a Zip file,** hit the **Link**  icon.

![](https://cdn-images-1.medium.com/max/419/1*hXUUxKIn3NqoubrLQZntTQ.png)

- Select the **Preview URL** button to copy a preview URL of our landing page.

![](https://cdn-images-1.medium.com/max/698/1*1o-tZiwOY2TdESF4zXoi1Q.png)

- Now let’s paste the URL generated to our favorite browser to see our landing page in action.

{% youtube jf-YwTDmlGs %}

- To download the code source of the landing page, hit the **Download ** button.

![](https://cdn-images-1.medium.com/max/698/1*iAVsAopQtQMiUMtSTFv3Hw.png)

Theme Composer will create a ZIP file that contains all files of the code source for our landing page design.

![](https://cdn-images-1.medium.com/max/697/1*h9FgXnXjW-47AGDS4Dkfeg.png)

We can also **delete** the generated HTML item with the **bin ** icon.

![](https://cdn-images-1.medium.com/max/353/1*nIDReUTUY0_rDig1560GGg.png)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

And that brings us to the end of our medical landing page Figma tutorial. I hope you find this tutorial useful for your future project.

In this tutorial, we learnt how to use the Figma Theme Composer Plugin to create a medical landing page, edit it, and export its HTML code.

### Before you go

Fell free to visit our website [**captain-design.com**](https://captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://captain-design.com/uikit/) **.**

![](https://cdn-images-1.medium.com/max/700/0*x89t6LX8tK6krfS6.png)