How To Design Stunning Websites Using Figma
Pin this post to Pinterest! ☝🏻
IN THIS POST:
WHY I SWITCHED TO FIGMA
The day I started creating killer websites was the day I started using Figma.
I first discovered Figma when I took Applet Studio's course, "Squarespace Mastery" (GREAT course, btw...especially for the price). Figma not only opened my eyes to a whole new world, but it made designing websites easier AND better.
OH - before I get too far into this, let me mention that IT'S FREE!! That's right. I don't pay a penny to use Figma. So, go ahead and create an account because you're going to want to use Figma after reading this post.
Before Figma, I used Photoshop for all of my photo editing needs. Photoshop is great - it has a ton of features. But it's a BIG program, which means it can bog your computer down very quickly. I still use Photoshop for some things, but primarily I use Figma.
I admit, at first I had the mindset of, "But isn't designing a website in Figma double the work??" You might think that, but actually it's the opposite.
My designs go a lot faster now because I can quickly try new things and see what I want/don't want my website to look like. The speed allows me to be more creative and try new things that I wouldn't necessarily try if I was starting my design in Squarespace.
This post will explain the things I love most about Figma, and why I use Figma to mock-up all of my websites before I ever start designing in Squarespace. Frankly, I think Figma is the bees knees.
Even if you've never heard of Figma or don't have any experience using it, this post will walk you through each step so that you can dive in today and start using it.
IT’S EASY TO ESTABLISH A COLOR PALETTE
The first thing I do before I start creating a website is to establish the color palette and font. That's my launching pad. If I don't have a particular image to grab colors from, then I go to Pinterest to search for colors that work well together.
For this website, I wanted to use the shades of blue in these photos below to create a color palette.
To start, click the Square icon in the top left and hold down the Shift key while you drag to create a square. You can quickly duplicate that square by holding the Alt key, double clicking the square, then dragging it. Do this until you have four squares.
Now select one of the squares, click the square under "Fill", click the eyedropper, then click on the color of the image that you want to use in your color palette. Now your square is the color of your image. Repeat this process for the other squares.
These will be the hex codes that you will enter into your Squarespace website for the color palette.
This next part is one of the things I love MOST about Figma... Once you've identified your palette, you can save the colors in the Color Styles for your Figma project.
Click anywhere on the board (the gray background area) and you will see Color Styles on the right. Hover over "color styles" and click the “+” sign. Name the first one "Darkest" - this is the darkest color on our color palette. Next, click the square under "Properties", click the eyedropper, then click the darkest square in your color palette. Do this for each color. Here is how mine looks -
This is useful for two reasons -
As you're designing your site, you can select the color style anytime you want to assign a color to buttons, text, backgrounds, etc. instead of filling in the hex code each time you want to use a color.
Let's say you've completed your design, but you want to see how the buttons would look if they were green instead of blue. All you have to do is edit the color in the style for "button" and it will change all of your buttons to the new color (as long as you've assigned all buttons to the "button" color).
IT’S EASY TO ESTABLISH FONTS
Guess what... the same concept that we talked about above also applies to fonts. There are TONS of fonts in Figma, many of which are also in Squarespace. Pick out a good heading font and a paragraph font that compliment each other.
Then add your fonts to the Text Styles... it's in the same place that you added the Color Styles (just above it). Click the "+" sign, then name the style (p, h1, h2, button, etc). Choose your font under "Properties" and make any other adjustments (font size, all uppercase, etc) then click Create Style.
Now every time you type a heading or paragraph, assign it a text style. Then, if you want to see what all headings would look like with a different font, just adjust the font style and it will update all heading fonts in your design.
Now that you have a color palette and fonts, you can create your moodboard. Here is mine for this site -
IT’S EASY TO CREATE A FAVICON
The "favicon" is that little icon that shows up in the browser tab. A lot of people make the mistake of leaving the default Squarespace box - don't do that! Instead, you can create one in Figma.
Your favicon needs to be 16x16px. Start by clicking the frame icon (the hashtag icon in the top left) and create a square that is 16x16. You can hold the Shift key as you drag in order to maintain the square shape. Name your frame "favicon".
Now put your icon inside of this square. In this case, I'm using the person's initials, so I created a text box inside of that square and typed their initials. The frame is going to be extremely small, so you'll need to zoom in quite a bit to work with it.
Once you have the look you want, click the Favicon frame, then be sure it says "png" under Export on the right, and click the "Export favicon" button.
PRO TIP: To upload your favicon, go to Settings -> Website -> Favicon -> and click the plus sign to add your image. Your image is going to look really blurry once it’s uploaded. That's because the image is 16x16px, but the preview is much larger than that, so it's distorting it. Don't worry, it will look normal in the browser tab.
IT’S EASY TO CREATE ICONS
Figma makes it so easy to create icons with the icon plugin. Click the Resources icon at the top (the blue square in the image below), click Plugins, then type "iconify" in the search bar.
Iconify is a free plugin that comes with Figma that has some really great icons in it. Before Figma, I used to search online for icons. It was always such a pain trying to find icons that were .png or that didn't have a watermark on them. This plugin saves me so much time.
You could use this plugin to create icons for different services you offer. You can also use this plugin to create a custom bullet point or add an icon to a button. I also use it to add arrows on the Figma mockup to the sections that will scroll on the live site. You can also use iconify if you want to use an icon for your favicon.
The icons are vector images, so it's easy to change the color of the icon once it's loaded onto your board. You can also resize it to a larger size and it will maintain its shape.
IT’S EASY TO CREATE DIFFERENT DESIGN MOCKUPS
To me, one of the hardest things about web design is just getting started. When there are endless possibilities to choose from, sometimes it's hard just to pick one and get going. Granted, the mood board will at least help to narrow down your font/colors, but still - there are so many choices!
Rarely, if ever, is my final design on a site the one I originally started with. Figma makes it so easy to make changes and tweaks so I can try out different looks before I commit to something. Of course you can do this in Squarespace too, but it takes a lot more time.
For example, here are a few iterations of the hero section of this site that I designed.
As you can see, a lot changed including the header color, button shape, hero background, shapes, etc. I made all of these changes (and more) very quickly in Figma.
Let's say that I was only using Squarespace and I wanted to try out different shapes behind the headshot. I would have to load the headshot into Photoshop and create the shape behind the image, then save the image, and import it into Squarespace every time I wanted to make a change. All of these steps are cumbersome, time consuming, and unnecessary.
IT’S EASY TO MAKE CHANGES FOR CLIENTS
Whenever I send a client a mockup of their home page that I created in Figma, I almost always get feedback with some changes they'd like to see.
I had a client one time that had about 5 different sections on one page. I had created an arrow in the first section that pointed to the second section, indicating to the reader that there was more for them to read.
It was a cool look. So cool, in fact, that the client wanted me to add this arrow to all 5 sections on the page. I knew this would look wayyyy overkill, and I had a feeling he wouldn't like it either once he saw it.
It would have taken me about an hour to replicate this in Squarespace. Instead, I was able to create it in about 2 minutes using Figma to show him how it would look. As I suspected, he didn't like it. Which meant I would have wasted a LOT of time had I created it in Squarespace.
IT’S EASY TO MANIPULATE IMAGES
Figma has a lot of the same options and operates very similarly to Photoshop (except so much faster). If you're familiar with the way layers work in Photoshop, then you will catch on quickly to Figma.
Almost every image I use on a website is manipulated some way in Figma. Once you click on an image, click the tiny square icon of the image on the right (under "Fill") and it will show you lots of options.
You can adjust the exposure, saturation, change the tint, etc. From here you can also crop it, turn it, create a gradient, etc. There are lots of options!
Another thing I often do is layer shapes over images and reduce the opacity so that the image comes through underneath. That's exactly what I did for this "stay in the know" section.
The piano image itself was very vibrant, but by adding a shape/color over the image and reducing it to 80%, I was able to tone down the image so that I could put text over it.
IT’S EASY TO RESIZE AND EXPORT IMAGES
Figma makes it so easy to resize images. You can type in a specific width/height that you want, drag it to the size you want, or use the lock feature to maintain the same ratio. You can also rotate or flip images too. And even curve the edges of an image to a specific degree.
Another one of my favorite features is the ability to export all images at one time. Figma gives you the choice to export images as .png, .jpg, .svg, or .pdf. You can also increase the size (click "1x") before it exports.
To save all images at once, either select the images in the layers (hit Control to select multiple layers) or select the images on the canvas itself (again, by using the Control key), then click the Export button and it will save them all at once.
The name that it saves the files as will be the same as whatever you have named it in Figma (the name of the layer).
If you have layered multiple images to create one image, you'll need to group them together in either a folder or a frame first, then export that group. Otherwise it will export them as separate layers.
These are just a few of the many reasons I love Figma. I've only scratched the surface in this post of all of the things that it’s capable of. If you have other reasons that you love Figma, drop them in the comments below!
*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.
