How to organize your design file on Figma

No video

How to organize your design file on Figma

Рет қаралды 225,675

Күн бұрын

How I organize my design files on Figma. Download the file organization template here: www.chunbuns.com/design-file-...
In my previous video I showed you how I handoff designs using Zeplin ( • Handing off designs to... ) and in today’s video, I share how to organize and prep designs for handoff using Figma.
I’ve included a tutorial at the end on how I use device mockups for my presentations and case study thumbnails as well. There's plenty of free mockups out there, but I've found these to be more visually appealing: www.chunbuns.com/store/device...
👀 Looking for a UX design bootcamp or course? Get $100 discount on DesignLab's UX Academy (designlab.pxf.io/c/1370620/18...)
✌︎ Connect with me
➭ Instagram: / chunbuns
➭ TikTok: / chunbuns
➭ Twitter: / imchunbuns
✌︎ Design Bootcamps I recommend
➭ DesignLab $100 discount link: designlab.pxf.io/c/1370620/18...
➭ Get $1000 off Springboard UX Design course with code CHUNBUNSSB1000: www.springboard.com/
➭ Free visual UI course UXcel: uxcel.com/?ref=christinechun
✌︎ Tools and Desk Setup: www.chunbuns.com/tools
✌︎ Timestamps
0:00 Purpose of organizing
0:38 Cover Slide
1:06 Final Designs
2:00 Project Summary
2:26 User Flows and Cards
2:40 Annotations
2:56 Design Drafts
3:30 UX Research and Prototypes
3:50 Sprints
4:08 Device Mockups
6:24 Exporting devices for slides
8:08 Creating case study thumbnails
✌︎ Business Inquiries
➭ hello@chunbuns.com
#designfile #uxdesigner #fileorganization #productdesign #figmafile

Пікірлер: 193

@chunbuns 2 жыл бұрын

In order to make a copy of the Figma template, go to the top > click on arrow > Duplicate to your drafts. You won't be given edit access but copying the template will basically give you edit functionality :) Let me know what else you'd like to learn!

@jpstrokes 2 жыл бұрын

Thanks for sharing It :)

@flawlessentry Жыл бұрын

Thank You, its very helpfull

@sinxenon3181 10 ай бұрын

@chunbuns unfortunately your site has a label "Website Expired" and I wasn't able to download the files you mentioned in the video. The video itself is so cool. Could you please share your file if it's possible? Thank you!

@amandaavia 4 ай бұрын

The template link seems to be broken and a lot of us would still love to access this amazing resource! Do you mind re-uploading or re-enabling the link please? 🙏🥲

@Rafael-dj-c 2 жыл бұрын

Thanks for the device mockups, I'm always looking for those. I'd like to see more videos on designing if possible, both wireframing and UI mockups would be good to see. In particular it would be ideal the videos explain the details of designing such as spacing or font sizes,etc

@astrotaco_bps 2 жыл бұрын

This was so helpful. These are the kind of tutorials I need to work in Figma more efficiently. Need more of these!

@bandilesikwane4967 2 жыл бұрын

Love this downloaded the template today. I find your content incredibly useful and easy to follow yet so detailed.

@sookim9773 2 жыл бұрын

This video is super helpful! Thank you so much and can't wait to see more design videos from you 🥰

@jaimempark 2 жыл бұрын

Thanks for this walk through. I’ve been wanting to do better with organizing my Figma files! This is super helpful to see how you’ve organized yours.

@erikagomes7520 3 ай бұрын

My name is Érika Dário, I speak here from Brazil. 😃 I thought your video was fantastic, I really follow your tips and content! I just couldn't download the template link to help me with my routine, I thought the way you organized it was incredible.

@LA_Designer 2 жыл бұрын

Love your videos! I'm transitioning from Web Design to UI/UX since I'm more into layouts than coding. Thanks for also offering the device mockups! I've been loving Figma.

@Taskade 2 жыл бұрын

Beautiful tutorial, thanks for making this, so easy to follow!

@femkedesign 2 жыл бұрын

So clean! Love it.

@MrEdukada Жыл бұрын

I'm very much impressed with your workflow, documentation, and organization skills.

@jenykk 2 жыл бұрын

thank you so much!! I love all your figma tutorials ❤️

@elsiezheng8692 2 жыл бұрын

I really appreciate all the information you have shared with us!

@benlow24 2 жыл бұрын

Thanks for showing your pages structure. I liked how you’ve got the latest designs at the top. Definitely makes it easier for other stakeholders to work through your figma files in their own time.

@chunbuns 2 жыл бұрын

thanks for watching!

@jiaohuadekoma 2 жыл бұрын

This tutorial gave me the biggest inspiration so far this year, thx Christine!

@Naheleniel 2 жыл бұрын

Thank you so much Chunbuns! 🤗❤️🌿

@YoonahBae 2 жыл бұрын

This is a great example! Thanks for sharing Christina!

@downthispath6538 2 жыл бұрын

I love you. That's it. Thanks so much for this. May your pillows always be fluffy and your blankets warm.

@alexandrachainss 2 жыл бұрын

Thank you for this, it helps a lot!

@helloemilymills 2 жыл бұрын

So helpful, and I love the mockups template! Thanks for sharing :)

@genevalam8964 2 жыл бұрын

The video I needed!!! Thank you 💕

@funwithsarah1586 2 жыл бұрын

Thank you so much for your videos that are so informational ! :) Can't wait to see the futur tutorials and workshops !

@chunbuns 2 жыл бұрын

🥰 I'm glad you find them helpful!

@michellezhu1559 2 жыл бұрын

Thanks for sharing how you organized your file!! Love the summary at the top and the clean annotation part! I'm always improving how I organize it and your sharing is super helpful!

@chunbuns 2 жыл бұрын

me too! it really helps when you're presenting your designs at crit or onboarding new people to the project :)

@issabellasantini3974 2 жыл бұрын

Thank you for sharing this! What a great resource!

@abbyhuh1460 2 жыл бұрын

pretty informative. never thought of organizing it that way. thanks for the video! ❤

@joshblf 2 жыл бұрын

It's amazing that someone this talented is willing to give away all their secrets for FREE. Thank you!

@sohye_lee 2 жыл бұрын

This is so helpful! Thank you so much!

@M0gWai_ 2 жыл бұрын

I began with Adobe XD last year but I'm currently changing to Figma! It gives so much more work dynamic! thank you for his video Chunbuns!

@user-nu8mf4hw1b 2 жыл бұрын

I'm in love with these Figma series on how to keep your design work more efficient! So helpful ❤ Thank you so much Christine 🥺

@chunbuns 2 жыл бұрын

I'll make note and make more! Thanks for watching 💕

@iiitk_nani 5 ай бұрын

@user-nu8mf4hw1b do you know how to redesigning the home screen to showcase the products ? plz i need your help

@-grey 2 жыл бұрын

I'm shook. This is the greatest piece of UX design I have seen, and it's so meta. I actually showed it to my gf who's a product owner, because I was so impressed. UX design to make the life of the people interacting with your design files super fluid. It's so simple and clean, I am going to have to emulate what you have here. The annotations and notes about the flow purpose is so good. Thank you for sharing this, it's genius.

@gillzoid Жыл бұрын

this is exactly what I needed, thank you!

@WilChow 2 жыл бұрын

Excellent video. This was super helpful. Thanks!

@soulaimanemonadile3767 2 жыл бұрын

Girl , you are the best ! found this on the right timing . thaaaaanks a lot

@ludmilarodrigues1717 2 жыл бұрын

I loved!!! Thank you so much!

@dianaburm 2 жыл бұрын

Really useful tips! Thank you!

@khatiamaisuradze8450 2 жыл бұрын

The most organized and the best channel in this direction. Thank you ❤

@figmintutorials 2 жыл бұрын

Agree!

@khoirulanas1172 2 жыл бұрын

Thank u christine. your explanation's so clear

@robertkreft5653 Жыл бұрын

I really like the approach you take with your UX design projects!

@merisimamovic965 Жыл бұрын

This is really neat, good job and great video!

@figmintutorials 2 жыл бұрын

So helpful! Thank you😊

@Sunrisestarshine 2 жыл бұрын

Thank you! This is great, i was looking for how to improve organising in figma.

@artemisfay2042 2 жыл бұрын

You are honestly my favorite person in the world right now. This is insanely helpful! Thank you for sharing this!

@chunbuns 2 жыл бұрын

awww 🥰 my pleasure!!

@caphestudylog4028 2 жыл бұрын

This is super helpful! thank you so so much

@absbi0000 2 жыл бұрын

Another killer vid 🙌

@JoellePhuaLife 2 жыл бұрын

Super helpful!! Also a feature that has saved my life is "paste to replace"! All you have to do is click on the frame you want to replace, and then press Shift+⌘V or Shift+Ctrl+V to paste to replace!! So useful

@chunbuns 2 жыл бұрын

OMG! I had no idea! Thanks for sharing

@sdl444 2 жыл бұрын

This is INCREDIBLY helpful for me as a beginner UX designer. Thank you, Chunbuns!

@chunbuns 2 жыл бұрын

I'm so glad!!

@marcinksiazkiewicz2923 2 жыл бұрын

sorry to say that - but it's not - this is the guide how to make your presentation looks good - that's UI, not UX :p UX is expereince with the app, skill to read stats and analitics, being able to understand what users need , and most important, understand the buisness. btw do your documentation in google docs, its way faster and UX iw way better :p

@OvienSuccess 5 ай бұрын

wahala o@@marcinksiazkiewicz2923

@wen-tingfan4838 2 жыл бұрын

You're so right that in house designers don't really focus too much on file organization hahaha (or we all have our own styles). This is super helpful :) Definitely going to take some of this and start trying it out with my team!

@ameereeo 2 жыл бұрын

it's super helpful 😍 thank you

@designduck 2 жыл бұрын

wow. So organized!

@valeria_wow_dovzh Жыл бұрын

Oh my goodness! I like it so so much! Thanks for the insights!)

@mariaheredia9814 Жыл бұрын

Thank you so much for the video ❤️

@RaaneiPL Жыл бұрын

Very helpful, thanks!

@janghueypark3592 2 жыл бұрын

Thanks for sharing this!! this is super helpful!! :)

@jaysenb 2 жыл бұрын

SWEET VIDEO, super cool!

@elisauiloa2161 2 жыл бұрын

I just love you, haha. This is exactly what I was looking for. Many thanks! :)

@ekopranoto5367 2 жыл бұрын

Super helpfull !! Marvelous

@bubbache 2 жыл бұрын

I would looooove more Figma videos!

@miniann213dd 2 жыл бұрын

very useful. thank you

@DouglasPlayer01 2 жыл бұрын

I would like a video explaining a little about the auto layout and the constrains of figma in screen constructions both mobile and desktop. ps: loved your video :)

@danialkhalil8586 2 жыл бұрын

thanks for the sharing. It really helpful ;)

@MyDigitalHub 2 жыл бұрын

PERFECT!

@IkyyPUBLIC Жыл бұрын

I'm a beginner and after watching this video, I have a lot to learn in system design

@Phoenix-Light Жыл бұрын

Thank you! 😁

@victorportes6876 2 жыл бұрын

You are a Godess!!! Super thnx!

@whateverlisa. 2 жыл бұрын

Thank you!! Really helpful, especially mockups part :з

@k-turner 2 жыл бұрын

Thank you!

@hariwilliams8208 2 жыл бұрын

Great video love your content. i would have liked to have had a bit more of a deep dive into the pages of your design file. felt like the video went off on a tangent about mocking up a design

@jetizon 2 жыл бұрын

Thanks CB

@andreamaritza 2 жыл бұрын

thank you Christine for this video! I find that I’m still learning some best practices for when it comes to organizing my Figma files. Question! Is there a reason why you export your files in 2x instead of 1x?

@cynthiacaxton Жыл бұрын

Thank you for sharing, this is very helpful for organizing your work 😊 Although I am not sure how you were able to section and group your pages on the left hand side panel. Can you please do a quick work through? If anyone knows how to do that please drop a comment

@wangzig9800 2 жыл бұрын

very beautiful

@gj1489 2 жыл бұрын

omg i don't see you with your hair up in videos very often you look so beautiful!!

@thydevdom 4 ай бұрын

Thank you!!! Our small start up team just put me in charge of Mobile UI/UX on our transition to Mobile and my design file was a hot mess. lol

@kvsibuea 2 жыл бұрын

Thankyouu so much🤍🤍🤍

@figmintutorials 2 жыл бұрын

❤️

@Jordan-zz8qu 2 жыл бұрын

Create content, very helpful! Thank you

@spectredox 2 жыл бұрын

This is great! I also want to know about typography, color and spacing system. :D

@kuniguo3562 2 жыл бұрын

Love it! I always doubt my files organization

@thisislaraa 2 жыл бұрын

That´s so good! I just get confused sometimes when i´m using some methods like double diamond, for example. How do you insert your research, insights and files in that figma file? Do you insert at all?

@nadayounes4180 Жыл бұрын

Great lesson in organization But if I want to make a prototype, where should I do it?

@Entity9009 2 жыл бұрын

Do you use active components in your designs? Like a drop down, working buttons etc. in preview/test?

@pixelperfectux 2 жыл бұрын

Its super helpful. What did you use to record your screeb? When I do screen recording my design in mac, it lower the resoulation a lot.

@marianageorgieva395 2 жыл бұрын

Thank you very much for sharing your knowledge. So helpful ❤ How can I get device mockups?

@pragyagupta7536 8 ай бұрын

Thanks, I really appreciate your video ❤ You put some really good work But can you please put the recent link, the link 🔗in your description box id not working

@zainabalgak6759 2 жыл бұрын

Thanks alot ♥️ can you help us talking about freelance des and how can I find client 😢

@vibewords7088 11 ай бұрын

hi, thats very helpful, can i get the organization file?

@Bernadettecao413 Жыл бұрын

How do you add the blank spaces in the pages section?

@mayonara6295 Жыл бұрын

Question: Does screen flows design varies greatly from designers to designers or are they more less the same?

@Aleci 2 жыл бұрын

Love this! Question. Do you also work with a Content Strategist? If so, can you explain that relationship? :)

@milderaddiction8865 4 ай бұрын

I'm curious how you handle more complicated files. For example, one flow with a myriad of variations based on a users selections. So think products like Notion, how would they organize designs and show a variety of ways to accomplish the same thing aka no clear sequential path.

@carlarocha2835 8 ай бұрын

This is very helpful, thank you very much! Is there a way where I can get the file template? The chunbuns website is not working anymore :(

@abcarvalho 2 жыл бұрын

You don’t have to export to png if all you want is to have it in a presentation. Just to CMD + SHIFT + C and copy as a png to the clipboard. Then paste it! That’s it! (Copy to png is m limited in terms of memory so be sure keep the object small, and it it always follows the export setting of existing - 1x, 2x, 4x etc - so beware of these as well)

@anhtuanuxdesign Жыл бұрын

I love you 💞

@hussainawardhawala7348 8 ай бұрын

Thanks for this video. The design file links seem broken. Can we expect this to be up again? 🙏

@itsgivingkyle 2 жыл бұрын

Do you do design sprints virtually? If so how do you go about it?

@shamaraphillips9630 10 ай бұрын

Your website seems to be down. Would love to be able to get the mockup templates.

@liaqatthedesigner376 2 жыл бұрын

AOA, I am Muhammad Liaqat I am super impressed by your journey and I would love to learn more about your experiences in the ux ui design field. I am trying to learn from the best from you. I am new here in the ux ui design filed. how can i start ? Cheers, Liaqat

@benjaminjmace Жыл бұрын

How do you maintain the state of a design in your "Desings" section if it uses components? For example a dropdown component in round 1 and in the crit they want the spacing or shadow different. You'd have the crit page and start a new page for the new design but, changing the drop down component would change the older and archived pages too right? Do you make new components? Do you break the older ones apart for archive purposes? Thanks!

@londonzhang 11 ай бұрын

I think the template link is broken :(

@sahilarora2253 7 ай бұрын

do you know how to access this?

@misssmiling7937 2 жыл бұрын

I am actually learning ux ui design in course we need to start a project step by step ...what should I create ...how to come up with project ideas ...