Designing an App in 30min Using Figma (Challenge)

Master Figma for web design with our new, in-depth Figma course: t.ly/qUilZ
Get higher paying clients by designing better websites: bit.ly/3K2Z9tV
Take advantage of our FREE resources to enhance your skills: bit.ly/3C8gBeL
Maddy Beard takes on the challenge of designing a concept app in 30 minutes! Watch as she establishes a wireframe, chooses a color palette + fonts, and prototypes the final result within a limited timeframe. Can she do it?! 😬
Check out Maddy’s channel: / maddybeard
📽️ CHAPTERS
00:00 - Introducing the Design Challenge
00:49 - Wire framing in Figma
07:05 - Choosing Colors & Fonts
12:30 - Designing the App
30:25 - Prototyping Interactions
33:19 - The Reveal!
🔥Become a successful web designer with our in-depth course: bit.ly/3D2IaWJ
👉 See all our top-rated courses: bit.ly/3CZFtpn
📱 Follow us on instagram:
Flux Academy's Instagram 👉 / flux.academy
How do you think she did? Let us know in the comments 💬
#uidesign #productdesign #figma

[@VenrickAzcueta]

Nice fun challenge! Also, when you deselect the frames, you will automatically see the background colour - that you can change, when you are under the 'Design' tab.

[@M4rt1nX]

My mouth was wide open when I was watching this part. I was screaming: It is there, look at it. 🤣😂

[@brianrobles531]

When trying to preview a font, instead of clicking to scroll if you just click on the name and use the arrow keys it’ll preview the word you selected. Thanks for an awesome video!

[@geethairu7596]

This was definitely fun to watch .. we need like a series of these design challenges

[@teenuade]

This is so fun to watch. I’d love to challenge myself like this also, I take so much unnecessary time on a screen.

[@RealSLK]

Thanks. Needed to see the process from start to end and you gave me that without the bloat. Bless.

[@KalvinPatel]

Love Maddy’s tutorials. Definitely do those other ideas!

[@FluxAcademy]

Thanks for letting us know!

[@LucasSilberberg]

I'm desperate that you don't use auto layout 🤣🤣

[@MaddyBeard]

HAHAHA I usually do but time was of the essence!!! 😂

[@dualeali2162]

Loved this! Going to try attempt this myself and yes please do the other challenges!

[@priceandproduct]

This is so fun & I like the way you did it. Will be appreciated for more videos

[@felipehernandez-ub3ze]

That smart animate was awesome! Thanks for this tutorial!

[@nigbinedion]

You did amazing, Maddy! Well done!

[@kiba9739]

This is so cool and fun! Subscribed!

[@zeeq7331]

This was really fun to watch. 😀

[@georgiacarias2160]

Omgosh what a great surprise seeing you on this channel 😮😌

[@arafat.uiandux]

Awesome!!! Congratulations🎉👏🏻 I loved it. It's inspiring for beginners like me seeing what can be done in really a short time with experience. Thanks for sharing. I helped a lot.

[@VivedVRGtag]

WERD!!! Thanks Maddy! Short and simple!

[@suman121069]

Yo Maddy Targaryen 🔥Love the way you work, You Rock 🤟Your voice is awesome which make the tutorial pretty smooth🙂

[@xChikyx]

that icon font blew my mind 🤯🤯

[@djlilcq]

This is so fun and funny. Nice and relaxed to enjoy.

[@smilli6415]

how mnay colour do you pick for an app ? whats the difference between neutral , primary and secondary colours in mobile Ui.. ? thanks

[@HawkeyesAeroMarket]

Thank you so bunch for your video!

[@MRchf-st7bg]

Hi, thank you for these interesting video, i don"t know if my comment is going to be seen but i need help! i've just beggin work with figma and i'am aldready stucking with a problem. when i click on new files, a black page appears and a i can't see or design anything, what can i do to change this? thank's

[@H3Kei]

Thanks, Maddy❤

[@mdhabiburrahaman5848]

you beauty! thank you for sharing your process.

[@pierre-louistharreau2608]

Thank you, it was very helpful :)

[@Dimma_Daniela]

Your voice is soooo soothing. I Slept off twice😂. Nice challenge and video

[@ggamer847]

you did great, I learned a lot from this video

[@jaylondon5226]

Totally loved watching this plus I learned a thing or two🤗

[@aud2ice]

Just awesome. Very fast ideation.

[@davegarcia2525]

you can use auto layout on the buttom componet to make it easier

[@polashhemrom3486]

Really Amazing Tutorial.💛💛🧡❤❤

[@vaibhavsaxena2127]

Hi , thnak you for this video, really loved it. Could you tell me which software are you using to see how much time you take on one task? Is it wworkfolio or similar?

[@MaddyBeard]

I used Tiny Stopwatch! :)

[@Helloworld0072]

Kindly make a complete practical course On ux research Like how to recruite participant's for it And how to manage etc

[@MaddyBeard]

I have a lot of videos over on my channel about this stuff! Feel free to check them out :))

[@Helloworld0072]

@@MaddyBeard i've already subscribed u long time ago But i never found the information i wanted

[@opff4862]

Very good design I love it so much

[@SkillDUDE]

what plugin did she use for the icons?

[@Twilight-dq7bq]

It's amazing, thank you,it's really helpful ❤

[@FluxAcademy]

Glad it was helpful!

[@fatimasbee]

Niceeee.....learnt new things. It's your exclamations for me 😅

[@misbahbahawal-fc4hg]

Can someone explain what she did with icons how did she do that

[@waleedkh9769]

You monitor mounted on the ceiling?

[@p.k5096]

I've learnt so much from following your tutorial! There was one area which confused me (most likely because I haven't done this before!) at 25:11 where you get the heart from Font Awesome, then flatten it, how did you fill the heart? - Thanks!

[@xChikyx]

i assume it's with fill/background color?

[@dushandedigamuwa890]

i loved it ....... your tutorials........

[@HyperNVC]

You’re just so awesome! I wanna try make an app, with you!

[@makemoneyonline6278]

Hi, Thanks for the awesome video and I will like to see you for the other videos in future

[@FluxAcademy]

Thanks for letting us know!

[@minhyepark2292]

21:37How did you get icons by typing?

[@kishorekumar7878]

ma'am can i know how did u convert the text to an icon , by typing the icon names ?

[@sheriffdeenadesokan3962]

The font is font awesome pro

[@kapilbatra5486]

What were the other two ideas??

[@mrfreeandclear970]

How do you do the coding??

[@nicknico4121]

very good!

[@Noble-Technologies]

Great Job

[@js53649]

Genia ❤

[@douge.zambrano4060]

Good Job!!!

[@MrUnstoppableHeart]

Is Figma good for web app ui design too?

[@FluxAcademy]

yes!

[@MarioMaletic]

You are awesome! God job!

[@nanio7636]

Hii can send your fonts app

[@ItsMeSteveyP]

Screams "the icon buttons!" at the 2minute mark. 😂

[@user-qn7qt6lp2p]

Go into your account and change background of figma there

[@bazimtsweni5343]

30min design... days of development😂😂😂😂... Great Video

[@dean37]

How does she duplicate files so quick like that?

[@rohanr.k8044]

Hold Alt and drag whatever you want to duplicate

[@christophergarrett3044]

That's does not look easy. I need a mentor in Arizona who can meet me at Arizona in person.

[@talhasaeed]

so basically 2 screens, cool

[@mrinmix_online]

Without any research phase it doesn't make sense 😅

[@IsaacJrDevelops]

I guess this is the equivalent of an artist drawing something up in 30 mins. Looks nice and it’s a quick draw of an app idea. Would be cool if they did a video on making a whole technical spec from the idea jar. Then a video on mocking up a UI design based on features from the spec. Could be an insightful video series.

[@sergioturizom]

❤❤❤❤❤

[@mikeorlowski_]

Saying it's an app is a click bite. It's sketch of an app. But you did well, just don't click bite...

[@seobookpro]

And why you think 30 min with Figma is a challenge ?

[@umarusman7958]

FIGMA background bruhh

[@ValentijnVanbeem]

je voorhoofd is kaulo groot

[@Raghudesign]

lol, it's truly random colors without any color generator. On actual projects, this approach doesn't work

[@danielcheng769]

Wow hate to say it but your graphic design sense is pretty bad.

[@rupendrajnv1758]

she speak like through is not clear,, really its very irritating I don't think she need to make that type of voice..