How to design a web page with Figma?
If you don’t know Figma, it’s time to tell you a little more about this program. It is a software with which you can develop a web project with all the tools you can imagine, ideal for collaborative work. Today, we explain the basic steps to create a web design with Figma from scratch.
Design a website with Figma step by step
1. Create a new project
The first thing you have to do is create a new file through the Drafts button and give it a name for your project. You will be able to modify some parameters, which will allow you to adapt the work table according to the needs you will have later on.
2. Prepare a frame to work on
In the upper buttons you will find a frame (with a shape similar to the # pad) and here you can create a frame. You will be able to choose between different formats adapted to the screens and ways of viewing a web page, from mobile phones to the computer itself.
In the same way, you can create a frame to your measure by choosing the dimensions you prefer, without the need to be tied to these predetermined models. Before you start working, we recommend that you mark with guides that delimit the safety zone of your project, the space in which you know that what you include will be perfectly visible regardless of the device that reproduces it.
3. Introduce different functional elements
One of the great advantages of Figma is that it is very intuitive and visual to work with, so it will be easy for you to design a web page in just a few steps. You will see how, little by little, you manage to create a site that comes to life as you work on it.
Of course, organization must be a must in your project. Keep all the elements you use under control, and properly organize the layers and objects that appear in the interface so that they are displayed correctly when the time comes.
4. Take advantage of Figma’s community resources
Finally, don’t forget that Figma is a collaborative platform, and you can find countless packs and kits with elements and designs that other users have made. Fill your library with your favourite style, and you’ll always have it on hand to add to your project.
6 little tricks to make web design more effective with Figma
1. Quickly switch to Outline Mode
Let’s start with a trick that will help you better visualize the entire work table, making web design or any other project.
With the keyboard shortcut CTRL (or CMD) + I or CTRL (or CMD) + SHIFT + 3 you can switch to Outline Mode, so you can work more precisely.
2. Reveal all objects in the project
Sometimes it is difficult for us to find everything we have “on the table”, or to perform a specific action on all the elements.
Figma facilitates this through the command CTRL + / or CMD + /, which will present us a text box in which we can write the command we would like to apply to all objects.
3. Design and space columns easily
Using snapping and distributing elements will help you create a more organized and visual design very attractive.
Select all the objects you want to include in this function and go to Main menu (Main Menu) > Arrange (Arrange) > Distribute Horizontal Spacing (Distribute horizontal space); there you have it!
4. Delete layer groups that are empty
One of the little features of Figma that make life easier is the removal of layers and layer groups when there are no more elements inside them. Whenever you delete all sublayers or child layers within a project, the group layer will also be deleted. This, without a doubt, helps to make everything cleaner and more traceable.
5. Remove the space between elements
If before we talked about the spacing between objects to create well-aligned columns, now it’s our turn to put all the elements back together. Again, select everything you want to group and go to Main menu (Main Menu) > Arrange > Horizontal Pack or Arrange em> (Arrange) > Vertical Pack (Vertical grouping).
6. View all available shortcuts
In case you still need to know some more Figma tricks, it’s best to learn the keyboard shortcuts that can help you be faster and more efficient in your work. With the question mark in the lower right corner of the screen, you can expand all the shortcuts, but also using one of them!: CTRL + SHIFT + / or CMD + SHIFT + /
As you can see, it is not difficult to make a web design with Figma. You just have to start little by little and keep evolving your project, until you get what you’re looking for. And, if you feel lost at any point, remember that you can use the Doowebs community to solve any doubts. Get in touch with Doowebs, web design company in Valencia, to take advantage of the full potential of web design with Figma.