Naming Things in Figma: My Best Tips & Tricks
Вставка
- Опубліковано 29 чер 2024
- Hi, I'm Joey! I'm a product designer at Twitter, working on design systems, who used to work at Figma as a Designer Advocate. Today I wanted to share a tutorial for how to make the most with naming conventions in Figma, to help you work quickly and efficiently.
Links:
Me on Figma: www.figma.com/@joey
iOS & iPadOS 14 Kit for Figma: www.figma.com/community/file/...
File Thumbnail Kit for Figma: www.figma.com/community/file/...
Social:
/ @joeyabanks - Ігри
I have never seen anybody explaining things this much understandable. Looking forward for new tutorials.
Thank you so much for creating this video, Joey! Your explanation made these concepts much more approachable.
i hope you will continue with the series, i absolutely love the way you present and the content itself!
i'd like to hear your thoughts on the overall hierarchy of the components in the design system and if there is a way to keep the number of variants and components low without troubles for designers and developers.
Thank you for this series ! You make Figma much clearer and easy to learn 👌👌👌
This was a really thorough run through, thank you. Super helpful :)
Thank you for this! Your approach towards explaining and your ability to speak with great clarity is much appreciated. Looking forward to future videos :)
Finally a clear explanation about this and so many more tips!! Thanks!!
Thanks for sharing such great content. I have learned a lot and hope you can continue with the series. You explain things very clearly and concisely.
I'm here 2 years after and this is one of the most valuable content on this topic. We definitely need more of your videos and tutors like you.
I'm new to design and your work flow, organization methodologies, and teaching are absolutely incredible. Drool worthy organization & concise explanations. I will most definitely mimic your practices. Keep the content coming! Thanks!
Loving the way you teach and explain things. Please make more content!
Great tutorial, thanks! You're really good at this. Super clear and helpful.
Joey, you are an impressive instructor and an inspiration to Figma beginners! I caught myself thinking, he's so fast, so good, I can't follow this but it's so interesting. Then, I realized that I was following just fine. I think you have a secret power of demonstrating a very good attitude and that is the trick. It makes a person wish for life to be very good to you and for you to continue offering your fluency! Thanks!
Thanks for sharing your expertise! Appreciate your detailed commentary!
This is such a good explanation video. Always interesting when you hear from someone who knows exactly how to transfer their knowledge to you...
Elegant perfection. Thank you for all the detail.
I'm the 50th subscriber! Thanks for the tips Joey. I've just recently switched from Sketch to Figma and it's kinda like starting over. This video helped and I'm looking forward to more videos.
Wow, this was so incredibly helpful. You explained everything so well and clearly
Awesome breakdown. Thanks Joey!
This video deserves more attention! Thank you Joey!
Keep on creating these videos. This is helping me a lot. Thanks 😊
Just discovered this, so excited to watch!
Thanks for sharing this content! This organizational system is so useful.
Thx a lot Joey. It really helps things become well organized.
By far, the best organization tips in Figma! TQVM
underrated channel Thank you for the insight, Joey!
Amazing video... really helped me understand a sane approach to nomenclature in Figma. Thank you.
Holly smokes this video is so good!! You almost nailed all my questions. Thank you so much!! 🙌🏼
Very helpful and thorough. Thanks!
Loved the video! I think we can all agree that we could use a video detailing constraints and responsive designs.
This is such a good explanation video, thank you so much !!!
Love this! Thank you!
I am new to Figma, and this video really helped me understand, why naming is important and helpful. Thank you!
Maybe a general video on best practices would be also helpful.
Thank you, Joey for the great tutorial.
Comments / UA-cam / Positive -> Thanks for making this video. I especially liked learning about the thumbnails, frames, and proper naming.
Great video, I had no idea the bulk rename feature existed!
In regards to instance swapping, you could just use the variants feature. That way, you can change individual properties related to that specific feature, as opposed to going through an entire variants list. For example you could create properties that control the number of buttons, light or dark theme, and which button is selected. This way, you can tidy up your components panel and only have one instead of 10.
this is really helpful, thank you!
Great job explaining this!
Really helpful, and also about the cover image :)
So glad someone has articulated my thought processes around efficiency. The "UX" of design files if you will 😎 Cheers!
Very helpful video, thanks you 👍🏼
Super helpful! Thanks a lot
Thank you! It was very helpful👍
Hi all! I'm beginning to do Figma 1:1 trainings. If you're at all interested in jamming & learning together, reach out! twitter.com/joeyabanks
Thank you for sharing!!! 🦄
PERFECT! thanks :)
I come from THAILAND. --- I love your tutorial. I'm the 75th subscriber! Thanks for the tips Joey.
This is very helpful. Please come back to UA-cam!!!
.naming is very good tip, thanks Joey!
The OG champion is here!
This can go one step further in simplification by combining the comps as Variants. That will reduce the comps here by 3x.
Hi Joey, thanks for the vidéo! great tips. I'm curious to know if you have any advice / conventions on how to name nested frames inside a design. I'm trying to match my front-end developers' naming conventions, but with auto-layout, I have a LOT of frames. This quickly gets very messy. Any tips on that? Thanks!
Great video.
really helpful! Maybe you can also share your knowledge about typography (font sizes, leading, tracking), especially for mobile apps, on how the font sizes should match the screen resolution. thank you so much :D
wonderfoul ♥
Please explain auto layout and variations. Your content is sooo good!
need this so bad. plz make one
great video , can you do a video on naming conventions when designing an app , I mean basic elements for beginners starting out .. my layers panel is very messy as I dont know what names to give them .. basically . thanks ..
TIL renaming a text layer is the way to preserve overrides
Bulk rename! Didn't know this was a feature, thank you! What are your thoughts on using variants to accomplish a similar organization?
Just made a new video on it! It’s a great method to use.
Very helpful! Thanks! i Subscribe!
Hi Joey, nice explanation! Thanks tons! Would you kindly post a video about how much of a Figma community duplicate file we should change in order to make it look original i.e. ours rather than a copy paste (definitely considering the license and say it says you can change it completely and publish freely). You may mention "start with typography, colors, etc." What would be your tips and tricks in working with Figma community files. Thanks in advance.
I didn't know THE Joey Banks had a YT channel OMG
you obviously know what you're talking about, great job
Who's here before 100k subscribers? Great video Joey, keep it up!
this is the best
LOL finally i can see your face, by the way thanks for update iOS design systems.
Nice explained!!! One question - is it possible to create a "_component" from any existing component / variants to get mor controll over all? Thanks a lot!
Newbie to Figma, I was looking for tips to name my CTAs... found something even better
figma tips / best teacher / joey banks (❤ from CBUS)
I really respect and appreciate your lesson here but I would like to know why not approach this with a component set where we can have one default component and then we can configure it to our need using a control panel for the component set?
so *newComponent_new_final_done* is not ideal?
Imagine Figma developes a multidimensional Numpy series feature for managing the components...
Hey Joey, are there are any FIGMA UI Design kits out there today that you just love? I need one for a few web design projects and i feel lost in the sea of choices!? Please let me know! (and thanks for the excellent video. . .this was SO clear! keep it up)
Hi, I want to know how to change the icons to a different icons in layers before the names of the page like cover page, demo page
Why did you not chose to make variants instead of the / name convention??
I have a question: for example we have a frame lets say frame 3, inside frame 3 is a shape ellipse 2. When we duplicate frame 3, we get frame 4 with the same ellipse 2. Should we change name of ellipse 2 inside frame 4 to ellipse 3(or any other name) or keep the name same as in frame 3 ie ellipse 2. Won't it create any problem in future for dev handoff or any other problem?
How do you bring in icon packs? Do you paste them in or use a plug in?
Wowoowoowoowoowow, Joey doing UA-cam ❤️. Where's the next video?
does anyone know how to put icon in pages ?
Dude did you do voice-over for some of Figma's tutorials??
Yes!
For how long have you being using Figma?... You need to update your self on those library components.
you look like Spiderman, the original one
You are handsome,
Good video, but tooo much explaining... i guess it's for the total newbies. I genuinely thought that you will explain layer naming hierarchy or best practices and not basics.
But video is good, there's still something useful for "not newbies".
Well said, @joeyabanks.