Figma Tutorial: Create a Post Page For a Social Media App | Part 1/3
Tags: figma, tutorial
Published: 2021-04-04 14:43:28

**Your 1st Project in Figma, Beginner's Friendly, Wireframes**

Very recently I started using [Figma](https://www.figma.com). In this article, I'm going to show you my very first steps and the final result of my first project! Figma is free, browser-based and I'd dare to say quite easy to be used. If you are familiar with other sketch and prototyping tools it's going to be even easier. A lot of companies these days seem to use Figma, so I'd suggest you play around it a bit. 

## Step 1 - Single Post
My purpose was to create the design of a single post for a social media app.
I created a new Project for Pixel XL and I added some rectangular, a circle and some text fields. I removed the color and I added a black stroke for the shapes. In most cases, the alignment is on the left.
I created a **group** so I could manage these shapes easier. Groups allow moving a collection of layers around without having to select each individual layer. Groups are used to organize the layers and they are very different from **Frames**. Frames can have their own dimensions and properties (Image 1).

![Step1_1 Creating a group that includes rectangulars and circles.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615554137395/FXpJaIdmh.png)
*Image 1*

## Step 2 - Multiple Posts
From the right-sidebar you can convert a Group to a Frame. So that's what I did! And then I duplicated (ctrl+D) so I could have it one more time (Image 2)

![Step1_2 Creating a frame.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615554609284/qjYpCAcTL.png)
*Image 2*


## Step 3: Status bar and Navigation menu to move between pages in our app
For this step, you can either use the shapes or the components and the libraries to speed up the process. 
Components are the building blocks of our designs, they can be basic UI elements like buttons or icons, or more elaborate compositions like toolbars and menus.
Libraries are collections of components and styles. 
Design systems combine component libraries with standards and guidelines for implementing them in code.
In the  [Figma community](https://www.figma.com/community), you can find design files and plugins.

I will use the 1st option though since the 2nd one is available only for paid accounts (Image 3).

![Step1_3 top bar and favorite button.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615566583647/vylcPLPmI.png)
*Image 3*

## Step 4: Additional Screens
We will add one more screen, it's very simple, don't worry. 
To do so you can hit F (for Frame) or from the top menu click the region button and then select Frame. I selected Google Pixel 2XL.
I added some new text and duplicate it 5 more times.
Then I copied the navigation bar and the favorite button (ctrl+c, ctrl+v). 
That's it (Image 4).

![Step3_DONE.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615567952267/EUd97rSkbu.png)
*Image 4*

## Have you ever used Figma?
Let me know in the comments

Stay tuned for part 2! Hint: it's going to be about Design.

**The hotkeys I used in order are:**
- R -> creates a Rectangular
- ctrl + D -> to Duplicate
- ctrl + G -> creates a Group
- F -> creates a Frame
- T -> Selects the text tool
- ctrl + C -> copy
- ctrl + V -> paste

**************************************


👋Hello, I'm Eleftheria, a front-end developer, master student, freelancer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about buying me a coffee? You can do it here: [www.buymeacoffee.com/elef](https://www.buymeacoffee.com/elef) but If you can't that's ok too!


[![cofGif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616336641314/ycZgZ44G3.gif)](https://www.paypal.com/paypalme/eleftheriabatsou)


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)