Office hours: Mastering components

Подписаться 549 тыс.

Просмотров 164 тыс.

50% 1

Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.
Future Livestreams at figma.com/events
Workshop file available on the Figma Community Beta: www.figma.com/community/file/...
#Figma #OfficeHours #Components

Наука

Опубликовано:

23 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@fajleyrabbe2930 3 года назад

25:00 Push override to Master 29:00 Add icon in AutoLayout & Component 32:25 Create Multiple component 34:00 -- 37:00, 38:00 Layer Rename, Replace current Name 36:00 Use '/' for Layer and Component organize, group. 37:00 Button name replace delete 47:00 Component Description and Search 39:10 Component order 59:20 Combine different state--Than show and hide 1:40:00 Auto Layout/Responsive Text box 27:02 Auto Layout Alignment(little Adjustment)

@josieleung1592 3 года назад

thank you!

@josequintero379 3 года назад

i love you so much right now for this index :)

@matheusjorge6146 3 года назад

You are an angel

@bernhardsmuts2265 3 года назад

🏆🏆🏆🏆🏆🏆🏆🏆 500 Legend points for you my good sir

@hermangreen8108 2 года назад

@JackieWilushewski Месяц назад

This is by far my favv Figma Office Hours! Thank you both for all of the awesome tips and tricks, and wonderful break down and explanations in this video 🎨💯

@akhillochen 3 года назад

Thank you so much Joey & Rogie! So much design wisdom in here. Please keep these coming xo

@bernhardsmuts2265 3 года назад

Awesome walk through components! Now to remember to use everything! Thanks guys!

@maryamnakhaei8921 3 года назад

Definitely worth watching the whole video! Thank you guys!

@DavidBerlinguette 2 года назад

Thanks for this. You've eased a lot of my concerns about switching from Sketch!

@kristinludlowUX 2 года назад

New-ish to Figma (formerly Sketch). As a former dev I appreciate the concept of frames and auto layout so much. It's nice to see a design program that follows the logic of basic box models.

@gustavoaraujo4131 Год назад

It's interesting to watch this video in 2022 and notice that some features changed and made everything easier

@sanketuikey6846 Год назад

Thanks for this video Rogie and Joey !❤

@tayyabsohail8823 10 месяцев назад

Lot of concepts clear from this video thanks figma community

@rupaliroychoudhury2300 2 года назад

Great video! The demo on button components can be done via variants. Love the variant feature!

@cristinaribeiro4067 3 года назад

Thank you for this video! Super helpful

@alexahong 2 года назад

appreciate everything you have done here :3

@NunoFigueiredoDesign 3 года назад

That negative frame trick is timesaver! Thank you

@ChakibTsouli 3 года назад

Rogie has a talent for explaining complex things in layman terms

@verawat 3 года назад

Awesome. Thank you sir

@rafaelcalderon6658 Год назад

Great work

@shanzhong7511 3 года назад

The small video window on top right really blocks lots of important settings being made.

@giantpinkbutton 2 года назад

Update: "Reset Instance" is now "Reset all overrides" :)

@jhmesseroux Год назад

amazing thanks

@kindimage 3 года назад

As others have mentioned, please do not place the video window in the upper-right because it blocks the design panel (can't see settings that you've clicked on in that area), please annotate or index long videos like this, and mention Windows keyboard shortcuts along with the Mac shortcuts. Otherwise great video thank you

@silentkiller4091 2 года назад

Great video

@mingsirakowit3316 10 месяцев назад

Thank you so much

@justinrichardson3630 3 года назад

Some of this no longer seems to work in the current version of Figma. Strokes are now obfuscated by frames, and auto-layout prevents the ability to place a rectangle behind it as a hack to fix it. Really not sure what's up with that, and a huge disappointment that functionality is now broken. I would prefer to use a template button as demonstrated, but it's broken currently.

@jaredralphstanley 3 года назад

instead of pushing changes to master, is there a way to redefine an instance as the master component? e.g. when masters get deleted or when masters need to be separated out of a design comp, it would be great to define which instance is the master component.

@dpsd6859 3 года назад

Thank you for the video. Can a Variant be moved to another Property?

@EdenRaphaelGil34 3 года назад

Can I add multiple images at once to a rectangle/ellipse like you had on your avatar or does it have to be manually from the right panel?

@imani828 Год назад

Wish you mentioned you were using a frame for the buttons (and why) instead of groups

@TyranVz Год назад

5:40 starts

@syedsufyanpervez7914 2 года назад

Kevin James is really good at Figma

@2WIICE Год назад

Negative frame spacing 1:16:29

@basuki094 Год назад

Can we make a Structure button or any button using frame and auto-layout instead of the rectangle?

@norailves6823 3 года назад

Thank you so much, this was extremely helpful. Love from cold mother Russia

@scottmackenzie9711 Год назад

could you elaborate on how you got the feather icons to be a visual asset? time stamp 28:45

@yasirarafat105 3 года назад

I copy a icon from a website then it is nested to a component and it is not possible to swap this icon with another icon from from asset panel but why . Can anyone help me about this?

@user-zt9qv4cs5o 3 года назад

I saw EPIC GAMES on your computer 😁

@bradmacdonald6591 3 года назад

Would it matter if you apply auto layout before or after creating a component?

@Figma 3 года назад

Hey Brad, you can do it either way! I think different objects benefit from each approach. I personally tend to think about how a component will be structured using Auto Layout first, then build it with Auto Layout from the start. This helps me think about the functionality and behavior of the component as I'm building it. I think of that functionality and responsiveness as a key part of the component itself, so I like to make sure I'm happy with the component in its entirety before "locking it in" as a component.

@bradmacdonald6591 3 года назад

@@Figma Great, thanks for the thoughtful reply!

@Raustle 3 года назад

The new Figma autolayout is completely different than shown in the video here that is the reason can't do what he is showing at 1:04:54 which is stretch left and right, can someone help me out? TIA

@chelagiraldo938 2 года назад

Same here, I have been doing the same card for over 3 hours, trying to get it right. Then I realized that this video is outdated and I can't follow it literally. I have been using the resizing panel but I can't get it to work quite perfectly. :|

@kavineesh12 3 года назад

Can we do component state prototype in Figma just like XD

@goshgarnuriyev3440 3 года назад

It would be just great

@kavineesh12 3 года назад

@@goshgarnuriyev3440 I am also waiting for that ,It will kill adobe XD for sure

@Underhills 3 года назад

@@kavineesh12 Hm, I've been checking out Figma for some time now and I can't really see anything here that would kill XD. On the contrary I think Figma is very quirky and odd. Weak on prototyping features and not very intuitive to use as an editor. Terrible type and text implementation is just one out of many annoying things about Figma. I'll stick to XD to get my work done.

@MayaBlevins 3 года назад

#homeownergoals

@303visuals4 3 года назад

Can you create a component within a component?

@xxfreedom 3 года назад

Technically you cannot, a master component can only contain an instance of another component within.

@notdefined9898 3 года назад

If I created a component and I forgot where I use it. Any way to find them? If I had a master but don't now where I use child ones

@ottototofilm 3 года назад

I am really sorry for the new users in Figma. With no experience in Figma (or similar to Sketch) software - with such poor explanation of what this mentor "Rogie King" is doing it would be a nightmare. Especially with poor user interface and pattern of using the software. If you are doing something - don't wait for users without experience to mimic the stuff you are doing. I do understand what is he doing, new users will NOT, because Figma changing user experience every half a year! Wake up

@felipeneves2156 3 года назад

Well I started using Figma 3 days ago with no UI software background (I have extensive use of AI and PS tho) and I didn't have any issues to follow their instructions, even though the interface is "outdated" in the video. Funny I guess

@ottototofilm 3 года назад

@@felipeneves2156 it is great, maybe I am wrong

@super20187 Год назад

it is for professionals who knows the figma well. for other just a waste of time

@dulanjala 3 года назад

figma is way to expensive.... no offline support, no security (encryption), putting any designs that's beyond basic company project on figma is way too risky...