Thinking of creating a site? When it comes to putting a page online, in addition to having a website fast, you need to have one page layout visually pleasing, objective and organized. But, do you know how to do this?
If your answer was negative, we have good news for you! With the right tools, you can create a good layout without needing much technical experience and that's what we're going to talk about today.
Keep reading this post and find out step by step how to use the Figma to create a simple and objective layout. Come on?
In this post you can see:
- What is Figma?
- What are the advantages of Figma?
- Auto-layout resource:
- It allows several integrations:
- Allows the management of teams;
- Access the global community.
- Step by step to create a Layout in Figma
- Know the platform
- 1 step: choose the type and size of the project
- Step 2: Add a grid
- 3rd step: Insert objects
- Step 4: Add Plugins
- 5 step: Insert texts
- 6 step: it's time to export
Before building a good layout, it is important to understand what it is. Therefore, if you have never used the Figma, do not worry that we are here to introduce you, okay? Next, let's talk more about the program and its advantages.
Good reading!
What is Figma?
Focused on creating interfaces and designs, Figma is an online graphic editor that has won over many content producers due to its practicality, where the user does not need to download anything to access the platform, just open it using their browser.
Launched in 2016 by Dylan Field and Evan Wallace, Figma offers free and paid plans, and even in the free version, professionals have access to several features.
Another great differential of the platform is the possibility of collaboration. Figma allows your team to work together on the same project simultaneously and, therefore, has become a rage among some sectors, such as, for example, in the area of UX Design.
If you do not know what is ux design, we will explain to you. In short, the ux designers aim to develop a website or application focused on user experience.
That is, the professionals responsible for designing a page that is simple to navigate, where the customer will not have difficulty finding a product or service and, in this case, Figma can be an important ally.
And since we are talking about practicality and collaboration, these are not the only differentials of the platform. Figma arrived to facilitate your creations and in the next topic we will talk about some of its advantages.
What are the advantages of Figma?
As you already know, Figma is a free, online and collaborative platform, and these are already great advantages for anyone who works with the creation of designs and layouts. But between us, the editor has much more to offer. Below, we have gathered some of the main advantages of Figma.
Read too:
- Relationship ruler: 5 best practices for relationships with students
- 4 tips for audiovisual production of digital content
- What is a diagnostic evaluation in marketing strategy?.
Auto-layout resource:
If you're used to creating designs for different platforms, you know that adapting measurements can take a lot of time. But, with Figma's auto-layout, that problem can come to an end! The platform itself makes this measurement adjustment, maintaining the current sizes and avoiding misalignments.
It allows several integrations:
With Figma, that huge bureaucracy to integrate your projects has come to an end! The tool enables integration with several other platforms, such as: Confluence, Slack, Axure, Maze, Notion, among others.
Allows team management:
When creating a layout or a beautiful design, it may not be easy to organize your entire team, is it? But with Figma, that could change! In addition to enabling collaborative work, within Fgma, it is possible to create different teams and establish permissions for each user.
Access the global community:
Another big advantage of Figma is its global community. Through it, users can exchange experiences, gain new insights and publish various contents, such as: plugins, templates, among others.
Step by step to create a Layout in Figma
After creating your account on the platform and selecting the best plan for your team, it's time to take the next step: building your layout. Want to know how to do this? Next, we explain how the platform works and step by step how we can create a layout from scratch in Figma, without having to have a lot of technical experience.
Know the platform
To start your creation process, you must click on “New Design File”. Soon after, you will be directed to your file page. In the left corner, you can see a tab titled “layers”. It is in this part where all your graphic elements (images, texts, shapes) will be separated and organized in layers.
When selecting a layer, you'll have access to a menu on the right side of your screen, where you can edit its elements, from positioning, color, effect or even the font.
Meanwhile, in the top menu, you have at your fingertips several functionalities such as: creation of texts and shapes. Knowing these elements, it's time to create your layout. Come on?
1 step: choose the type and size of the project
To start your project, you must create a frame, that is, a frame to assemble your layout. To do so, just press the F key or click on the top menu.
When selecting the frame, Figma will present several predefined formats for your project, such as measurements of a cell phone screen, desktop, tablet and for social networks.
In case you have difficulties in knowing the correct measurements, this tool can make the process a lot easier. Just choose one and start working.
Remembering that, although Figma has predefined sizes, you can still customize it as you prefer.
2 step: add a grid
That's it, now that you've chosen the size of your design, it's time to add a grid to your project. But, after all, what purpose does this element serve? By including the grid in your frame, you'll have a kind of guide to develop your layout, making it easier to align objects, measure and organize your page.
To add a grid, just select your frame, go to the right column and click on the “plus” button, which appears next to the name“Layout Grid".
3 step: insert objects
It's time to bring your layout to life with objects and shapes! To do so, just access the menu at the top of Figma, where you can access all the quick tools.
As the platform is very intuitive, these tools will be represented by elements. Then it won't be difficult to find what you are looking for. For example, if you want to add a rectangle, know that the shapes tab has no name but an illustration of geometric elements, as in the image below.
Knowing this, let's put our hand in the dough? If you are developing a main page, start by creating a rectangular shape for the menu. After creating the bar, insert other shapes that will represent the buttons.
Put as many as necessary according to the contents that will be on your main page. But, remember not to pollute too much, okay?
After inserting an object, you can still modify the color, size, position and even apply effects. Just select it and on the tab on the right side, you will have access to its properties. In the example below, the Layout started to be assembled using only rectangular shapes.
4 step: add plugins
And it's not just formats that build a good layout. To customize and make it more attractive, it's time to add some Plugins. Figma's own platform already offers several contents and we recommend that you download some decorative elements.
To install it, follow the instructions below:
- Click on the right side of the mouse;
- Select Plugins;
- Click on Find more pluginsplug-ins).
Soon after, several Plugins options will appear, such as icons, images and texts to customize your layout.
5 step: insert texts
It's time to add information about your company and add the texts to your Layout. But, calm down, this is no mystery. In fact, this step is similar to adding objects.
You will have to click on the text element in the top menu, select the place where you want to add it and that's it, just write now. To modify size and color, just click on the text and modify it in the bar on the right side of your computer.
Remember that there are text plugins available in Figma, so you can improve your website font.
6 step: it's time to export
The layout has been successfully completed and it's time to take the next step: exporting it. To do this, just click on the layer of your frame and on the right side of the monitor there will be a tab, you will go down the page to the end and you will find a button written"export".
Then, just select the format and quality in which you want to save your layout, and that's it, all yours.final product will be downloaded. Now your design made from Figma is finalized and can be implemented inside your tool.
Did you like the content? For you to put it into practice and start creating your Layout in Figma, we have prepared an infographic with a detailed step by step. Click the link below and download it for free now!
Portugal