Placeholder Components - Editable components without detaching in Figma

No video

Placeholder Components - Editable components without detaching in Figma

Рет қаралды 35,769

Күн бұрын

💡 Be sure to check out a follow-up bonus episode on Placeholder Component's younger cousin: a Boilerplate Component - • Boilerplate Components...
Figma Community File - www.figma.com/community/file/...
Twitter - / adamprzewoski
Editable components without detaching? This is possible thanks to Placeholder Components. Not a hack, not a workaround, not a single plugin is used. By learning this simple concept we can say "goodbye" to detaching components once and for all!

Пікірлер: 48

@JonDaiello 2 жыл бұрын

This is a fantastic approach! My team has been struggling with this concept for a while. I never considered using local components and swapping them with a swappable part of a library component. Thanks for sharing! 👏🏻

@Ioannnify 3 жыл бұрын

I love your intro and your tutorials! Your channel is amazing, I wish you lots of success!!

@Irakli008 3 жыл бұрын

10 seconds in and I already subscribed. I’m a heavy Sketch user and advanced Figma content like helps and encourages transitioning so so much! 🤩

@brownnutter 2 жыл бұрын

This is amazing! No more detached components moving forward.

@faranakvn3976 10 ай бұрын

This was amazing! well explained! I was having this problem and looking at so many videos and didn't understand what they did or said! Thanks to you and your video my problems is solved!

@nabgilby Жыл бұрын

Wow, finally someone explains clearly this most important concept of all!

@mayankd_YT 3 жыл бұрын

Clear and concise tutorial. Keep them coming 😄

@DustinYoung-dr4df Жыл бұрын

Well conceived video - great information, no wasted time. Thank you.

@XTRMAyronside 3 жыл бұрын

Almost make us feel like actual developers, great example of Figma power and designer abilities. Nice explanation too, please keep up the good work, happy to see quality Figma content on youtube 👌

@velimirtopolovacki8956 2 жыл бұрын

Exactly my thought as well. Only people in Figma fail to realize this.

@LudovicLorant 2 жыл бұрын

A big thanks to you for that one, really helpful!

@chrisbeltran6676 3 жыл бұрын

Underrated video! This is gold!

@mateuszjankowski1782 3 жыл бұрын

Love this video, thanks for sharing 🤘

@jakubkuik10 3 жыл бұрын

Great stuff! Keep it coming :)

@billysweetman7040 3 жыл бұрын

Fantastic videos!

@1000monograms 3 жыл бұрын

That is really really good video. I have been using that technique from some time now (I hope it is not trade-marked :) ) and have one feedback - you need to really PLAN the components you want to use placeholders in. Otherwise it makes hard to determine what inherits from what and why my design got messy - especially with auto layouts. Still - very good video, not only topic is cool but delivery as well. I give a big Like and Sub.

@bl_int 24 күн бұрын

the second key on 7:16 , you can hack for the content can be parent on nested component.

@chazzems 2 жыл бұрын

Thank you so much.

@JamesWilsonBluespark 2 жыл бұрын

Thanks for this! I adapted this solution to add browser frames around webpage designs. Only caveat that I found that wasnt really explained is that the height does not properly adjust when swapping in a Page - what you refer to as a local compoent in your video (ie, the form in your example) - UNLESS the local component also has autolayout enabled.

@TheRiteHand Жыл бұрын

thank you for posting this! I was losing my mind!

@j.k24 Жыл бұрын

ghehe, it feels like i am on an airplane, great tut man, keep it going

@good6894 11 ай бұрын

Was this recorded in a tiny room? lol Crazy reverb sound! But great video none the less! Thank you for it :)

@thiagovilla970 6 ай бұрын

Super handy.

3 жыл бұрын

Wow amazing

@antonbagdatyev3699 Жыл бұрын

Thank you for this tutorial! BTW: Which software are you using in order to highlight your cursor/pointer while moving your mouse on the screen and highlighting and creating arrows? Thanks!

@TheFunofIterating Жыл бұрын

ScreenBrush twitter.com/AdamPrzewoski/status/1387028671467298817?s=20&t=6iRg4vMT-iMx-wIkCt_1gg

@bpsujith 3 жыл бұрын

This is super cool...

@CarlosAndresVelasquez 2 жыл бұрын

Quick question, when Im swapping the instance for my sample form, the sample form comes up upside down… any ideas? The form is in the right orientation when I build it. I dont know why its coming up upside down

@neblinamorado 3 жыл бұрын

Interesting idea

@luiscamino 3 жыл бұрын

As you said in the beginning, everyone is probably used to doing this with icons inside buttons. Love the "replace me" component idea! But one thing I didn't quite get: when you renamed the "replace me" instance to "Content" (so that it always says "Content" in further instances, even after swapping the placeholder), what are the benefits of this? Just the clarity that "it's the content" or anything else?

@TheFunofIterating 3 жыл бұрын

Good question! Wanting to keep everything consistent in the layers panel is one thing, because, eg. I wouldn't want a developer inspecting my layers to see a window component with a "Component 1 (Copy)" layer inside of it. Another reason is that I know Figma can be picky when it comes to layers' names and carrying on component overrides throughout different instances based on that parameter. The worst part is that Figma can "change its mind" regarding the logic behind this overnight and - because it's a web tool - there's nothing we can do about it. Oftentimes there won't be any "release note" to let us know about another tiny-winy adjustment and we ourselves won't notice that something has changed until... something breaks. I've been there too many times with my components library that I'm creating since 2019. That's why I like to give my layers generic names, in general. I do it as a preventive measure if that makes sense. :)

@auburntiger6829 2 жыл бұрын

What do you recommend for icon components? Generally speaking, is it better to turn all your icons into variants of one big component or have them as separate components so you can swap them as instances?

@TheFunofIterating 2 жыл бұрын

Separate components 100%. Icons as variants is a difficult approach to work with, as you don't get previews of your icons and you can't really use your variants description to put keywords for your icons (for better discoverability in the Assets panel).

@ClaytonFussell 2 жыл бұрын

Great tutorial. Rookie question. In your window component I can see a header and footer toggle - how are these generated?

@TheFunofIterating 2 жыл бұрын

Not sure if I understand what you mean, but you can always duplicate a Figma file for this episode and inspect the layers yourself. The link is in the description.

@mohanvadivel3932 3 жыл бұрын

Hey what software are you using for annotations, is it a after effects thing?

@TheFunofIterating 3 жыл бұрын

Screen Brush :) twitter.com/adamprzewoski/status/1387028671467298817?s=21

@alissonsantoro Жыл бұрын

Developing an interface to be programmed in React makes a lot more sense when using components. The purpose of "componentization" of system elements makes no sense when the user disconnects the variant from the main component, especially for a change within the component.

@louisdauvergne1727 2 жыл бұрын

Wait figmate, what about markdown in figma ? Any doc is welcome :) Thanks for your awsome content

@borkolar 3 жыл бұрын

How do you do this if you dont wan't local component? When I do stuff like this, I usually try to have everything in our design system folder so everything can be used everywhere. Does this always need a local component in the file you are making your UI?

@TheFunofIterating 3 жыл бұрын

You can totally remove your local component once you’re done with it, as it can be restored later easily. Please, see my “Boilerplate Components” video for a better explanation of this (it’s towards the end of the video).

@TheFunofIterating 3 жыл бұрын

Personally, I like to keep my local components in the files I’m using them, just for visibility for others working with me. I create a separate page for that, called “Component Overrides”, and then I group my local components in frames, based on where I’m using them.