Eleftheria Batsou - elef_in_tech - Figma

► Objective - Build a simple interface for a post in a social media app. From wireframe to prototype

► Technologies - Figma

► Duration - 1 Day

► Disclaimer - This project is being explained in a form of a tutorial.

 

Solution

1/3 Wireframe

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.

 

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.

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, you can find design files and plugins.

I will use the 1st option.

 

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). 
 

 

The hotkeys I used so far:

- 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

 

2/3 Design

Step 5: Creating Pages

This is our basic wireframe.

At the top left menu, you'll find the button "Pages      +", click on "+" to add a **Page**, name this page "Designs". 
Let's build the **home ** page.

I need to have a frame, so I'll hit F and then Google Pixel 2 XL from the right menu.
I'll then hit R to create a rectangular, I'll place it in the center and I'll make the corner curvy. Then I'll hit O (for circles) and I'll add a 40x40px circle above the rectangular.

Hint: these will soon hold images! 
To make sure you placed it in the center you can use the "Layout Grid" from the right menu. If you want to remove it use ctrl+shift+4.

Step 6: Adding the images

Use ctrl+shift+K to add images from a local folder and then place them to the rectangular and the circle.

 

Next to the avatar (circle) hit T to add some text. Do the same above the rectangular. Feel free to style the text as you like.

If you want to make cohesive and multiple changes to the text, colors, etc I'd suggest you using styles. To do so, click on a text field and then on the right menu click the 4 dots on the Text. Click the "+" icon and give your style a name.
I named mine "Body text".

 

Step 7: Auto-layout

We will briefly discuss the auto-layout and soon you'll understand the importance of it. Auto-layout can work either horizontally or vertically (not both). 
Select the name and the avatar, hit Shift+A and from the right menu you'll find the auto-layout. Adjust it in the center.

Do the same with all the elements of your page.

Step 8: Create components

Components help you to create and manage things easier and faster! It can be a great asset for the whole team.
To create a component select everything on your layout and click the component icon (it is placed in the top center of your page) or click ctrl+alt+K.

Create a new Page and name it "Components". Go back to the "Designs" page and right-click on the component, select "Move to Page" -> "Components".

You can now have access to it from the "Assets" panel on the left menu. You can drag this asset to the Frame. Hit ctrl+D to duplicate it twice. That's it :)

I also made a Frame, with an auto-layout that includes the 3 posts. To be able to see the whole length of the blogs uncheck from the right menu "Clip Content".

And I added some new images to make the app feel a bit more real.

 

Step 9: Navigation Bar and Icons

I will create my own icons and then I'll use them for the navigation bar. 

Menu Icon
To do so I'll make a new Frame, 16x16, and since we want precision I'll use shift+2 to zoom in. Next, I'll use the Pen tool to create a line and I'll duplicate it twice (this is vector based). The width will be 14px and the corners will be round. My shape is ready, I'll turn it into a component and move it to the components.

Navigation Bar

Create another Frame (411x80), this will be the navigation bar, and from the assets add the menu and search icons.

I also added a logo (photo) and 3 more icons. Finally, I turned it into a component.

Now, go back to the Designs layer and add the NavBar at the top of your design.

 

Step 10: Add an action button

This action button will be used to add a post.

I'm not going to into details but I'll make a new Frame and in there I'll make a simple button, I'll turn it into a component and move it to the Components. Then I'll add it from the assets to the Designs. 
I'll make the nav-bar and the action buttons "sticky" so they can't be moved or scrolled and the rest of the frame is going to have a vertical scroll.

The hotkeys I used so far:

- F -> creates a Frame
- R -> creates a Rectangular
- shift+O -> creates a Circle
- ctrl+shift+4 -> removes the Grid
- ctrl+shift+K -> open images from a folder
- shift+A -> creates auto-layout
- ctrl+alt+K -> creates a component
- shift+2 -> zooms in a Frame
- shift+x -> stroke (removes the fill)

 

3/3 Prototype

Step 11: Creating Pages

This is our basic design

Duplicate the Designs and rename it to Prototyping. Let's connect the pages!
 

 

Double click on the menu icon from Home, use the "+" symbol and connect it with the menu. From the menu click on the "Home" and connect it to the Home page. The default animation is Instant, you can either change it or leave it as it is (I personally used the "Move In" animation, and I set the direction to the right).
Hit the play button to check your animation. 

Add the rest of the connections according to your design.
Click play to check your prototype!

 

Thank you.