Web Development: How to Create a Medical Website Design in Figma

How to Create a Medical Website Design in Figma

Final product image — What You'll Be Creating

In the following tutorial you will learn how to create a medical website design in Figma.

What You Will Learn in This Figma Tutorial

How to Web Design with Figma
How to Set Up a Frame and a Simple Grid in Figma
How to Save a Color Style in Figma
How to Import Photos in Figma
How to Add Auto Layouts in Figma
How to Create Components in Figma
How to Create Scrolling Elements in Figma
How to Create Fixed Elements in Figma
How to Create Hover States in Figma
How to Add Overlays in Figma
How to Prototype in Figma

For more inspiration on how to adjust or improve your final medical practice website design you can find plenty of resources at GraphicRiver.

What You Will Need

You will need the following resource in order to complete this medical website design:

Ambulance Vector Illustration
Medical physician doctor photo
Doctor photo
Male doctor photo
Doctor posing in uniform photo
40 Phone icons

1. How to Set Up a Frame and a Simple Grid

Step 1

Create your new file and select the Frame tool (F) from the toolbar.

Focus on the right sidebar and select the Desktop template to create your starting frame.

Step 2

Before you start the work on the design, let's set up a simple grid that will make it easier to align elements.

Focus on the Design panel in the right sidebar and click the Layout Grid section to add a grid to your design.

Click the blue icon to access the grid settings. Select Columns from the drop-down menu and then enter the settings shown in the following image.

2. How to Create the Menu Bar of the Medical Website Design

Step 1

Select the Rectangle tool (R) from your toolbar and create a 1360 x 90 px shape. Focus on the right sidebar, set the Corner Radius to 10 and then click the Fill color wheel and change it to #4593FF.

Switch to the Move tool (V) and move your rounded rectangle as shown in the second image. Alternatively, you can enter 40 in the X box and 40 in the Y box to numerically move your shape in the desired location.

As you're about to use this blue color plenty of times throughout this tutorial let's save it as a color style so you can easily access or edit it later.

Focus on the Fill section and click the quadruple dot icon to open the Color Styles flyout panel. Click the Create Style button (+), name this new color style Blue, and then click the Create style button.

Step 2

At times, you might want to disable the grid. You can easily do it from the right sidebar or using the Shift-Control-4 keyboard shortcut.

Pick the Text tool (T) from your toolbar, simply click inside your frame and focus on the Text section from the Design panel.

Select the Montserrat font, set the style to Medium and the size to 13. Change the text color to #F8FBFF, and then type in the "HOME" piece of text.

Save the color used for your text as a new color style and name it LightBlue.

Step 3

Hold down the Alt key and drag a copy of your text to the right, as shown in the following image. Also holding down the Shift key while dragging will constrain the movement of the copy to a single direction. Double click the new text to edit it and replace "HOME" with "ABOUT".

Repeat the same technique to add the "SERVICES", "DOCTORS" and "CONTACT" pieces of text. Make sure that you're always leaving a 70 px gap between each piece of text.

Step 4

Select your five pieces of text, right click on the selection and go to Add Auto Layout or use the Shift-A keyboard shortcut. This will add a frame around your selection and will give you multiple options to rapidly edit the content.

Have a look inside the right sidebar and notice that the Spacing Between Elements is set to 70. Editing this value will immediately adjust the spacing between your text elements. You can easily drag text elements to change their location within the stack or you can remove a text element and thanks to Auto Layout the remaining elements will automatically adjust their location.

Make sure that your text elements are still selected and center them on the blue rounded rectangle, as shown in the second image.

Step 5

Pick the Ellipse Tool (O), and hold down the Shift key to easily create a 13 px circle. Fill this new shape with LightBlue and place it as shown in the first image.

Switch to the Move Tool (V), hold down the Alt key and the Shift key, and drag a copy of your circle to the right as shown in the second image.

Select both circle and add copies on top of them (Control-C > Control-Shift-V). Select the copies and rotate them 90 degrees, as shown in the final image.

Step 6

Pick the Text tool (T) from your toolbar, add "HealthSpecialist" piece of text and set its color to LightBlue. Use the same Montserrat font that we'll use for the entire design, set the style to Bold and the size to 19. Select only the "Specialist" part from your text and change the style to Regular.

Select this piece of text along with the four circle and Group them (Control-G). Move to the left sidebar, in the Layers panel, double click your group and rename it "Logo". It's always a good idea to name and organize the elements of your design to easily access them when you might need them again.

Step 7

Focus on the right side of your blue shape. Pick the Text tool (T), add the "SIGN UP" piece of text and set its color to black, for now. Set the font style to Bold and the size to 15.

Use the Shift-A keyboard shortcut to Add Auto Layout for this new piece of text and move to the Design panel. First, focus on the Fill section to color the frame of this text. Use the + button to add a new fill and set its color to LightBlue. Move to the Auto Layout section and set both Horizontal & Vertical Padding to 10. Finally, set the Corner Radius to 5 and change the text color to Blue.

Step 8

Make sure that your button is still selected and click the Create Component button from the toolbar. Rename your new component "Button".

Pick the Text tool (T), add "LOG IN" piece of text and set its color to LightBlue. Set the font style to Bold and the size to 15. Place this new piece of text as shown in the second image.

3. How to Create the Drop Down Menu of the Medical Website Design

Step 1

Pick the Text tool (T), add the "Phillis K Vance MD" piece of text and set its color to black, for now. Set the font style to Medium and the size to 10.

Add Auto Layout (Shift-A) for this text and focus on the Auto Layout section from the Design panel. Change the orientation to Vertical, set the Horizontal Padding to 10 and the Vertical Padding to 15. Add a new fill and set its color to Blue, set the Corner Radius to 5, and then change the text color to white (#FFFFFF). Save this color as a new style and name it White.

Finally, use one of those side handles to increase the width of this auto layout frame to 180 px.

Step 2

Switch to the Move Tool (V), hold down the Alt key and the Shift key, and drag a copy of your auto layout frame, as shown in the first image. Replace the existing name with the one shown in the image.

Repeat the same technique to add another two auto layout frames, as shown below.

Step 3

Select all four auto layout frames, right click on one of them and go to Frame Selection (Control-Alt-G) to put them all inside one frame.

Rename this new frame "DropDown.Doctors" and move it somewhere outside your main frame.

4. How to Create the Header of the Medical Website Design

Step 1

Download this Ambulance Vector Illustration and adjust the background colors roughly as shown below.

Use the Place Image tool (Shift-Control-K) from your toolbar to insert this image inside your medical practice website design. Scale it and place it as shown in the following image. Use the Shift-Control-[ keyboard shortcut to send to back, behind the existing elements.

Step 2

Pick the Text tool (T), add the "Dedicated Health Care Specialists" piece of text and place it as shown in the following image. Set the font style to Bold and the size to 40. Change the text color to #3B4053, and then save this color as a style and name it Grey.

Step 3

Pick the Text tool (T) and add some paragraphs, as shown below. Set the font style to Light and the size to 40, increase the Line Height to 24, and then change the color to Grey.

Step 4

Focus on the left sidebar and switch from the Layers panel to the Assets panel. Select your "Button" component, simply drag it inside your frame and place it as shown in the first image.

Now, you can easily adjust the settings of this component instance. Double click the text and replace "SIGN UP" with "LEARN MORE, and then focus on the Selection Colors section from the Design panel. Simply replace the Blue style with the White one and then LightBlue style with the Blue one.

5. How to Create the Text Boxes of the Medical Website Design

Step 1

Using the Rectangle tool (R), create a 400 x 350 px shape. Set the Corner Radius to 10 and change the fill color to LightBlue.

Using the Text tool (T), add a header and a simple paragraph. Set the font style to Bold and the size to 20 for the header. For the paragraph, set the font style to Light, lowers the size to 12 and increase the line heigh to 22. Use Grey to color both text elements.

Return to the Assets panel and drag a new instance of your Button component inside your frame, as shown in the second image.

Step 2

Select that new Button instance, replace the existing text with "MORE INFO" and adjust the colors as shown in the first image.

Select this component along with the two pieces of text and that rounded rectangle and create an auto layout frame (Shift-A). Make sure that the orientation is set to Vertical and then set the Horizontal & Vertical Padding to 50 and the Spacing Between Elements to 30.

Once you're done, move your auto layout frame as shown in the fourth image. You can enable the Layout Grid (Shift-Control-4) to align your selection much easier.

Step 3

Make sure that your auto layout frame is still selected and turn it into a new component.

Step 4

Drag a copy of your new component to the right, as shown in the first image.

Focus on this new component instance and replace the text used for the header and the button. Move to the paragraph, replace the text with the schedule hours and use the font settings shown in the third image.

Step 5

Add another instance of your newest component and place it as shown in the first image. Replace the text used for the header and the button, as shown in the second image.

6. How to Create the Horizontal Scrolling Container of the Medical Website Design

Step 1

Click the name of your main frame to select it. Hover over the bottom edge and click and drag to increase the height of your frame to 1640 px.

Step 2

Pick the Text tool (T), add the "Doctors" piece of text and place it as shown in the following image. Set the font style to Bold and the size to 40, and change the color to Grey.

Step 3

Using the Rectangle tool (R), create a 427 x 190 px shape and place it as shown in the following image. Set the Corner Radius to 10 and change the fill color to LightBlue.

Step 4

Using the Ellipse Tool (O), create a 110 px circle and place it as shown in the first image.

Make sure that your circle stay selected and switch to the Place Image tool (Shift-Control-K). Select the Medical physician doctor photo and click inside your selected shape to place the image inside that shape.

Move to the right sidebar and click the image fill to open the flyout panel. Select Crop from the drop-down menu and focus on the image. Hove over the edge of the image to scale it, hold down the Shift key to constrain the proportions of the image, and click and drag to move the image however you want. Once you're done, press the Esc key.

Step 5

Pick the Text tool (T), add the "Phillis K Vance MD" piece of text and place it as shown in the first image. Set the font style to Medium and the size to 18, and change the color to Grey.

Using the same tool, add the "Family Medicine" piece of text. Lower the font size to 14 and then Add Auto Layout (Shift-A). Make sure that the orientation is set to Horizontal and then set the Padding and the Spacing to 10. Add a new fill and set its color to Grey, select the text and change its color to White, and then place this auto layout frame as shown in the third image.

Step 6

Select your image filled circle along with the text, the auto layout frame and the rounded rectangle that lies in the back, and turn them into a new component.

Step 7

Drag a copy of your new component to the right, as shown in the first image.

Focus on this new component instance and select the image filled circle. Use the Place Image tool (Shift-Control-K) to replace the existing image with this one: medical physician doctor. Click the Crop button from the toolbar to activate the crop settings and adjust the image as you wish.

Once you're done, move to the text and change it as shown in the third image.

Step 8

Add another two instances of your newest component as shown below. Replace the images and change the text as shown in the following images.

Step 9

Select all four components highlighted in the following image, right click on one of these elements and go to Frame Selection (Control-Alt-G). Name this new frame "Doctors".

7. How to Create the Footer of the Medical Website Design

Step 1

Using the Rectangle tool (R), create a 1440 x 214 px shape, fill it with LightBlue and place it as shown in the first image.

Select your "Logo" group and duplicate it (Control-C > Control-V). Place this new group as shown in the second image and change the color of all the elements to Blue.

Step 2

Pick the Text tool (T), add the "SERVICES" piece of text and place it as shown in the first image. Set the font style to Bold and the size to 13, and change the color to Grey.

Add another four pieces of text below this one, as shown in the second image. Change the font style for these new pieces of text to Medium and lower the size to 10.

Step 3

Duplicate the column of text made in the previous step and place the copies as shown in the first image. Replace the existing text with the one shown below.

Pick the Text tool (T), add the "CONTACT" piece of text and place it as shown in the second image. Set the font style to Bold and the size to 13, and change the color to Grey.

Step 4

Using the Text tool (T), add the "(404)123 - 4567" piece of text. Set the font style to Bold and the size to 15, and then Add Auto Layout (Shift-A).

Set the Horizontal Padding to 40 and the Vertical Padding to 20. Add a fill and change its color to Blue, set the Corner Radius to 5 and don't forget to change the text color to White.

Step 5

Copy the phone icon from this pack 40 Phone icons, and paste it inside your Figma file.

Select this object and simply drag it inside your auto layout frame to incorporate it. Select the entire frame and increase the Spacing Between Elements to 20 to easily increase the space between this phone icon and the text. Before you move on, remember to change the color of that phone icon to White.

8. How to Prototype Your Medical Practice Website Design

Step 1

First, let's create the hover states for the drop down menu elements.

Select the Move tool (V) and focus on your "DropDown.Doctors" frame. Select the first auto layout frame, hold down the Alt key and drag a copy to the right as shown in the first image.

Select this copy and focus on the Design panel. Change the fill color to White and the text color to Blue. Use the + button to add a stroke, align it to Inside and set the color to Blue.

Move to the other three auto layout frames from your "DropDown.Doctors" frame and repeat the same technique.

Step 2

Select all the shapes that make up your menu bar and Group them (Control-G). With this new group selected, focus on the right sidebar and check the Fix position when scrolling box. This will lock your group's position and makes sure it stays in the same location in a scrolling prototype.

Step 3

Focus on the right sidebar and switch from the Design panel to the Prototype panel. With the Prototype mode active you can establish connections between frames and elements in your design.

Select the "DOCTORS" text from the menu bar, click the plus button and simply drag the wire to the "DropDown.Doctors" frame. Once the connection is created the Interaction flyout panel will open.

Set On Click as the trigger and Open Overlay as the interaction. Select Manual from the drop down menu to manually place the drop down menu where you want it to show up when users will click the "DOCTORS" button. Check the Close when clicking outside box and keep the Animation set to Instant.

Once you're done, you can click that play button from to upper right corner of the screen to test your animation.

Step 4

Select the first auto layout frame from your "DropDown.Doctors" frame and connect it with "Frame 1".

Set White Hovering as the trigger and Open Overlay as the interaction. Select Manual from the drop down menu to manually place "Frame 1" on top of your selection. Keep the Animation set to Instant.

Move to the other three auto layout frames and use the same techniques to connect them with their corresponding frames.

Step 5

Select your "Doctors" frame, select Horizontal Scrolling from the Overflow Behaviour drop-down menu and you should notice that exclamation mark icon which notices you that the content needs to be bigger that the frame for the scrolling to work. To fix this issue, hove over the right edge of your selected frame and drag it to the right edge of the main frame. This rectangle will be the designated scrolling area.

Step 6

Select your main frame, hove over the bottom edge and drag it up to decrease the height of your selected frame to 1024 px. Set a Vertical Scrolling and then you can click that Play button to test your final design.

Congratulations! Your Medical Website Design is Complete!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects. Don't hesitate to share your final result in the comments section.

Feel free to adjust the medical practice website design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to web design with Figma.