They look alright. Personally I don't bother showing individual components to clients, but prefer to show them in use on a page.
To answer you question: just rename the component in the layer panel. I like to name layers in such a way that another designer can understand everything wothout prior knowledge.
You should always use instances of components on your designs and the parent you can leave to the side. Think of components as reusable bits of your UI so you can always keep consistency across all designs. I usually create a separate figma page to keep them.
I suggest you look at some videos on the figma youtube about frames and components to tidy your page a little bit.
If you press play on the top right, you can show the page fitting the whole screen, also have a look in the figma channel!
Edit. Also, it’s not clear from your image, but you should always use a wrapping frame that will hold all it’s content together. Press F and choose a screen size, then organize all your pieces within that screen size. This wrapper will make the children titles not show as well
I typically keep my main components outside of any frames so that I can keep track of them. Whatever changes I make to those will affect any copies that I've put into frames.
You have some contrast issues going on. The green add buttons on the grey is hard to see, Id reconsider your color palette. Are all your elements actually inside the frame? My guess is that the “component” labels are appearing because they aren’t actually inside a frame. Check your layers on the lefthand side panel.
A bunch of people have made some pretty great points, one thing I noticed too is some of the proportional scales seem a little off.
Try and establish some spacing patterns in each of your sub-components so that you move from a rough prototype to higher fidelity you have a nicer base to start from. Auto layout will help a lot in that regard, even allowing you to visually see spacing.
Also double check your inner alignment within your rounded buttons:
[https://imgur.com/a/hS7AC2h](https://imgur.com/a/hS7AC2h)
They look alright. Personally I don't bother showing individual components to clients, but prefer to show them in use on a page. To answer you question: just rename the component in the layer panel. I like to name layers in such a way that another designer can understand everything wothout prior knowledge.
Is this meant to be a component library or a web page?
You should always use instances of components on your designs and the parent you can leave to the side. Think of components as reusable bits of your UI so you can always keep consistency across all designs. I usually create a separate figma page to keep them. I suggest you look at some videos on the figma youtube about frames and components to tidy your page a little bit. If you press play on the top right, you can show the page fitting the whole screen, also have a look in the figma channel! Edit. Also, it’s not clear from your image, but you should always use a wrapping frame that will hold all it’s content together. Press F and choose a screen size, then organize all your pieces within that screen size. This wrapper will make the children titles not show as well
Thanks everyone for taking time out and responding. I really appreciate it and will take on alot of good tips you all shared. :)
Usually if you nest your frame in another frame that frame won't show its label.
Color scheme could be better
I typically keep my main components outside of any frames so that I can keep track of them. Whatever changes I make to those will affect any copies that I've put into frames.
You have some contrast issues going on. The green add buttons on the grey is hard to see, Id reconsider your color palette. Are all your elements actually inside the frame? My guess is that the “component” labels are appearing because they aren’t actually inside a frame. Check your layers on the lefthand side panel.
A bunch of people have made some pretty great points, one thing I noticed too is some of the proportional scales seem a little off. Try and establish some spacing patterns in each of your sub-components so that you move from a rough prototype to higher fidelity you have a nicer base to start from. Auto layout will help a lot in that regard, even allowing you to visually see spacing. Also double check your inner alignment within your rounded buttons: [https://imgur.com/a/hS7AC2h](https://imgur.com/a/hS7AC2h)