One of a Kind Figma UI Design Kit - Frames For Figma Add-on (F4F) Overview

[@TheJimMcDermott]

The wait for F4F is well worth it with this comprehensive of a walk through. I appreciate it, Tomas!

[@uioverhaul]

Thank you for the kind words Jim and I am glad you like it. It really is a robust UI kit which needed time to be build properly.

[@goshenweb]

Congrats on the new release Tomas! Thanks for working tirelessly behind the scene to get this new version out. Looking forward to further iteration for Frames4Figma supporting other leading 3rd party Figma UI kits like UntitledUI, so we can bring those designs into Bricks. Also, pls look into partnering with or integrating Figma plugins like FigPress and UiChemy so exporting these F4F designs into Bricks can be seamless and efficient. Also, in future videos, pls ensure your talking head is minimal/out of the way and not covering actions you are doing as part of the video, so less advanced users can follow easily along. Well done!

[@uioverhaul]

Thanks for the comment and ideas! We will definitely look into them.

[@pseudsite]

Great overview! I'm casting a vote for the additional hour.

[@pseudsite]

Don't forget to charge your phone battery.

[@kristapsvilcans]

Could you make a follow-up video where we could see the actual workflow as if it were a real project? Are the Sitebuilder components renamed afterwards, or are they detached and then changed and a component created, or what? Also, are elements added and removed, or is a new component created, where is it placed, etc.? It could be very useful for us so we can use F4F as good as it possible using all it's power. Thanks

[@uioverhaul]

Good questions, and I'll definitely create a video from start to finish, like it was a real project. To answer your questions for now: 1. "Are the Sitebuilder components renamed afterwards, or are they detached and then changed and a component created, or what?" No, site builder components doesn't need to be renamed afterwards. If you are happy with a default layout of the component, you don't need to detach it from a master component. If, however, you wish to adjust the layout in some way, you will need to detach it, which will allow you to adjust the layout however you like. 2. "Also, are elements added and removed, or is a new component created, where is it placed, etc.?" I am not quite sure what you mean, can you expand on this?

[@kristapsvilcans]

@@uioverhaul In second, I mean, if in component needs to change something, then best practice is to detach and creating a new component, or just add/remove some elements and no need for new component. And if a new variant is created, then best practice is to put in the component tab? In short, it also shows if you need to slightly change the layout of an existing component, but without damaging it, just using it as a basis.

[@uioverhaul]

@@kristapsvilcans Oh got it. So if you need to adjust the existing component, it really just depends on if you're going to re-use it more than once or not. The advantage of components is that you have a single source of truth. If you change it in one place, it will take an effect on all the other places where that component lives. However, if you know that you won't be using that adjusted component anywhere else, you don't need to create a component out of it. Is my answer helpful?

[@kristapsvilcans]

@@uioverhaul I think it is like we never know and that why we need some guidelines how to do it right from the beginning. It is like Kevin teaches, if You are in the doubt, BEM it out

[@uioverhaul]

@@kristapsvilcans It really is as simple as I described above my friend. To sum it up: - If you know you're going to re-use the layout more than once, use component - If you know that you just need to adjust that component once, simply detach the component and make adjustments there

[@sylviaangelova5279]

I love it! You're doing wonders with Figma! 👏❤

[@uioverhaul]

I am glad you like it! Thanks Sylvia

[@derekshort]

Good video, Tomi! 😃👍🏻

[@uioverhaul]

I'm happy you like it Derek!

[@emmylegend5442]

I had to watch the entire video to spot the differences and potentials of this tool, it feels a bit like building with Dora ai. The library here are rich and flexible. But the price is a shocker 😅😅 especially for a stud like me. Although I understand it's a lifetime purchase! Amazing work right here though u saw s problem and brought a solution to the community 🎉

[@uioverhaul]

Thanks for the kind words!

[@WolfG11]

Please more/updated tutorial videos ;)

[@uioverhaul]

Thanks for the feedback Wolf! What would you like to see? Let me know!

[@KshitijShah89]

Amazing tutorial Tomi! In the future would it be possible to show how you would use the site builder but then also add a custom component or custom section to it. In case the design you need isn't available in the frames library.

[@nasmith67]

He is pretty close to that with the Custom Form creation. Customization would work the same way with a Section component.

[@sushikurier]

Great add-on. I look forward to work with it. Many thanks.

[@uioverhaul]

Fingers crossed! 👊

[@donatasp.]

This tool is super powerful and does a lot of cool stuff. But one thing that bugs me is that the F4F and ACSS don't work together. It would be so much better if they were integrated seamlessly to be able to push settings from Figma to ACSS or even convert Figma design into BB. I hope to see that in the near future.

[@uioverhaul]

I have to agree. Work in progress :)

[@johnysvitana5297]

Mannn this is amazing. Will there be some import / export to bricks builder?

[@uioverhaul]

Thanks Johny! Maybe in the future, but it is not as simple as it might seem 😅

[@johnysvitana5297]

@@uioverhaul Yeah i know that. But you know questions are free :D: D. And maybe acss settings? I have in mind that it would be extremly helpfull to just export variables to acss so you dont have to set colours and fonts or website width manualy twice. Or am i dreaming too much? :D

[@KristiyanIvanov]

Can we export all the settings from the Tokens Studio addon into ACSS? Or we have to copy each settings manually after we are done with the design?

[@uioverhaul]

Our team is planning to crate an export functionality so that you will be able to easily export settings from ACSS Tokens (Figma) into ACSS WP Plugin.

[@KristiyanIvanov]

@@uioverhaul That will be great!

[@abrownecreative]

🔥

[@nathan-sg7cu]

damn, any version for third world countries? haha can't afford.. congrats on this btw.. hopefully will help a lot of people.

[@uioverhaul]

Thanks! We believe so! :)

[@hi-tech-future]

@@uioverhaul Wth does that mean? "We believe so! :)" :|

[@uioverhaul]

@@hi-tech-future It is a response to this sentence: "hopefully will help a lot of people"

[@leonardoaubert]

We need a function to change the Client 😂

[@uioverhaul]

Haha :D I know that feeling, sometimes it would be handy.