Published on | Prototyping: From UX to Front End — Medium Eighty9

In this tutorial we are going to use Figma Design tool to create 3 views for our recipe app! Login view , Recipes list view & main article view.

The idea for our recipe app is simple, we need to allow our users to find recipes and view the latest. Once our user clicks to view the full recipe card they will then see feature image of the food, followed by recipe instructions and even the ability to click order to have their local shop deliver all the ingredients required.

So lets jump in and create our first project

Once we have clicked *New file our new project will begin and we can start by adding new frames to mockup our recipe app.

In the top left of our tool bar is a dropdown called Frame tool once this is selected in dropdown we can then select which design frame we will use 🙂 for this i’m using Iphone 8 however you can use any phone template you prefer.

We will need to repeat this step 3 times to create 3 separate frames like so.

Once we have our frames ready the first frame we are going to start designing is our login view.

Firstly we are going to add a background image to our view for this i used Unsplash and found a great image that fitted our needs. once you have found your image if you right-click & copy image we can then go back to our Figma project and select our view & paste in, this will fit the image within our frame then its simply a case of resizing image. On the right side toolbar with the image selected we can reduce the opacity from 100% to anywhere between 20–40%.

Next up is adding our Input fields for this we need to draw out 2 identical rectangles , then draw a third rectangle slightly smaller. Once we have them drawn we can change the fill of the first two rectangles to white, followed by setting the border radius to 50 & lastly adding drop shadow ( click on the sun like icon next to drop shadow and set all fields to 3 )

Our login button will be a different colour #5EE08A to stand out from the input fields so our users can see the green button is a CTA ( call to action ) the drop shadow & border radius should match our input fields.

Our title of the app & input text/button text will be the last thing we will add in, I’m using Pacifico bold 72px font for the app logo text and Poppins for our input text & button text. Feel free to play about with different fonts or even a logo.

Now for our second view the Main view.

For this view we are going to start at the top and work our way down. So with the text tool we are going to add Browse / Trending & Saved along the top all using Arial — Bold — 20px the only difference being is with the last two we have made the font a lighter grey to show they are not being viewed. & finally using the shape tool along the top we will add in two small lines to show as a hidden menu and fill using the same colour we used for our login button.

Now we have our simple menu we need to create the content the user will view.

For our cards we will draw 3 equal shapes using the rectangle shape tool, once have 3 all reasonably sized select all and use the toolbar on the right again to add drop shadow.

Next we add our images again i just took these from Unsplash website and scaled them down to fit within our rectangle. The awesome thing about Figma is you will notice as you reduce the image size our image also scales to fit so it wont look stretched or anything.

Then on the right hand side of our rectangle we will add our title followed by a short summary. Be sure to leave some small space as next we are going to add some icons which our user can interact with.

I have added a heart icon in which our user if they wish can tap and save for later and lastly i have added the date recipe was posted but styled this in the same colour as our LOGIN button.

And finally we will add a new line across the page under our last card then draw a circle colour Green and add a plus symbol in the centre, This will act as button for our users to quickly add their own recipes.

Last but not least our third & final view, the full Recipe view.

This view will be quick to finish because we can re-use what we have already created in the previous two frames,

First we will copy the top navigation and re-paste into last card, Next we will copy our login button shape and re-paste renaming the text to say Order Ingredients and resize width of the shape to span longer across the bottom.

Under our navigation we are going to add the title of the recipe in large font then underneath the title we will add Cooking time: 15 minutes.

for our burger image we will copy and paste from the other view and resize image so it covers the full width and shows our user more of the image. Last but not least our recipe! i simply copied a recipe off Google and pasted in the remaining space resizing until it fits nicely.

THATS YOU! we now have 3 views to showcase our app idea!

Figma is an incredible tool for teams big or small! not only is it free but you can collaborate , leave notes on page and work on the project together!

To add your team or share link with a client click on the blue share button and follow the instructions on the popup and you will be creating awesome designs in no time! for each person you add there profile image will appear along top and you can toggle between users and watch them work.

Hope you found this useful be sure to share or comment any questions feel free to ask me here or via twitter.

Originally published at signl.uk.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Build a recipe app with Figma was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Build a recipe app with Figma

Cool stuff, every week

More Articles