Figma for Flutter : Better design your app

Name: Figma for Flutter : Better design your app
Rating: 3.2 (15 reviews)

Plan Well Before You Code

Created bySimon Chan

Last updated 9/2019

English

English [Auto],

What you'll learn

Figma for designing app
Design App online

Course content

1 section • 14 lectures • 1h 46m total length

101-Introuduction to the course1:18
The instructor introduces figma for app design before coding and guides you through creating a basic dating app, then kicks off coding in android studio using techniques from prior tutorials.
102- Create account, Go through the Figma4:04
Sign up for a Figma account, enter your name and role, create your first project, and share files with teammates using the iPhone 8 frame.
103- Introduce Dribbble for design inspiration3:12
Explore Dribbble for design inspiration to shape a dating app, browse mobile designs, and save favorites into buckets for easy reference while refining your layout.
104-import images, create bottom nav bar7:09
Import five icons for the home page layout, set a base color and background rectangle, then design a fixed bottom navigation bar to support scrolling.
105-create status bar, and top bar4:25
Design the app header and navigation by adding a status bar, top bar, bottom navigation, a menu icon, logo, and bell, with three items aligned in the middle.
106- horizontal scrolling of "friend suggestions" bar5:32
Create a horizontal scrollable friend suggestions bar in Figma by arranging 55×55 avatars with 5px radii, adjusting exposure, contrast, and saturation, and enabling horizontal overflow in a named frame.
107- create main page, vertical scroll items17:07
Learn to design the main page with vertical scrollable cards by configuring images, text, and UI details such as rounded corners, contrast, saturation, shadows, and a fixed bottom navigation bar.
108- small amendment of the feature images2:02
Learn how to replace feature images in a flutter design by selecting the image, clicking the area to change it, and applying edits like renaming and changing color to orange.
109- create another page (user detail)14:11
Design a user detail page in Figma for Flutter apps, adding frames, status bar, back button, background image, icons, and save and cancel buttons.
110-navigation between different pages6:01
Learn how to link pages in a Figma prototype for Flutter, test navigation between screens, apply push transitions, preserve scroll position, and fix header behavior.
111- add notification page, add linkages17:14
Design and link a notification page within a Flutter app using bottom navigation and horizontal scroll. Build explore and notification screens with icons, status bar, and an inbox for messages.
112- create chat detail screen9:21
learn to create a chat detail screen in figma for flutter by duplicating a screen, naming it chat screen, configuring avatars and colors, and prototyping navigation to the notification screen.
113-create exploration page5:44
Learn to build an exploration page by arranging random images in a scrollable feed, tweaking image sizes to resemble Instagram, and linking the home, chats, and profile pages before coding.
114- Final-- Profile page and linkages8:57
Design a profile page layout in Figma for Flutter apps, including profile image, name, location icon, saves/favorites, and linked navigation to main, notifications, chat, and exploration.

Requirements

All students are welcomed

Description

Do you feel hard when you jump right to coding your app? You will face a lot of problems when you do not know how your app should look like.

Coding without planning is Just like building a house without blueprint, it would be very hard and NOT SAFE!

Mental planning of your app is the worst thing because you have no idea of the actual positioning of the components.

No worry!!! I will teach you how to plan your app using the most powerful online tool --- "Figma". In this course, we will work on a new project -- a dating app "2GETHER". In the first part of the course, you will learn about the technique for Figma, and we will adopt some design from Dribbble.

Hopefully, at the end of this course, you will learn a lot of astonishing technique that help you plan an app before coding, and saves a lot of struggling time!!!

Who this course is for:

Intermediate flutter users
Who want to make better looking app