Build it in Figma: Create a design system - Components

[@fajleyrabbe2930]

15:20 Layout Grid visualizer Plugin & Why it importance 29:00 Form Design 36:20 Double border_Active state_Gloe effect

[@EchoEnglishPodcast]

Animations With Figma kzbin.info/www/bejne/l36phqh9j55_e9U

[@michalguy]

(30:00) Creating component states - Note to everyone: There's now a new feature called VARIANTS, which makes creating various component states much easier and much more intuitive Link to official Figma variants tutorial: kzbin.info/www/bejne/r2Ociaqqbsl4ipI

[@aburakaktas]

this should be pinned.

[@iamfrankstallone]

Came to see if someone mentioned this. I was wondering if the skeleton components were needed anymore with variants. Popped into the Figma file from this course and it hasn't been updated to reflect variants either. Thanks for clarifying.

[@rskieball]

SO happy to find more advanced tutorials. The type relations at 21:05 are priceless. Thank you so much!!!

[@EchoEnglishPodcast]

Animations With Figma kzbin.info/www/bejne/l36phqh9j55_e9U

[@welling1]

How about a video showcasing a developer, picking up this guide, and actually applying it? There are areas where I'm confused as to how certain areas would be properly implemented.

[@JocoGravoski-jb5er]

That really depends on the technology you're using to actually make the website. I personally can use, flutter, react, django which all have a plethora of ways to implement these designs.

[@vinarostomyan]

This is golden! Thank you so much for doing this! Just getting into Figma and these series are priceless, I am obsessed!

[@suzettegibson350]

Thank you! Figma is a powerhouse! Just at the beginning of the learning curve and really benefiting from these videos.

[@ssamiuddin1]

Resources like this alone make Figma worth using! Thank you :)

[@PapaG-0101]

Wow, love the Grids, so powerful. I love that you can add multiple different grids, and save them out as a style. I may just have to make the switch!

[@danielq888]

This is pure gold and underrated.

[@fajleyrabbe2930]

HI, Figma 1. put previous Live video link in description. 2. Share file link. 4. And tell us how can we join with you.(u can put a video link on this matter)

[@raspat1]

Any chance you can put the links that you shared in the chat during the live stream into the video description? Hopefully, for each of the three design system videos? This is excellent btw.

[@shrishti93]

can you please share the link that you talk about at 10:38 .I want to read that article

[@paweonorin2978]

What a fantastic show! One thing I could find to help improve is the panel (right and left) characters are too small. If it's possible to use something to zoom in when you point to something, it's going to be a huge help. It's hard to read even in full screen right now.

[@magdalenawalczak8725]

Sorry for spamming the comments. But I need to make a note of that - 54:47 stretch and alining in auto layout

[@ramil2733]

The grid part was confusing af. I hope I'm not alone. Could've been simplified since Figma is an intuitive app.

[@martacondedesigner]

Thanks for sharing the files :)!

[@emmasottardi]

If this is the best video Figma has on this topic, we're in big trouble. This video was a total waste of time. I sat through an hour of rambling and didn't learn the thing i came here to learn.

[@joeygarner1636]

I'm very interested in learning more about create a spacing system that is responsive and how to communicate that to developers. He doesn't go into depth on that and I'm having trouble finding the resources he mentioned. Does anyone have a link? Thanks.

[@walaaismael6351]

Great Video, Awsome!

[@pavankumarattavar7514]

Volume is very low sir. It would be helpful if you can increase it a bit.

[@andreazevedo9776]

I believe that Rogie was talking about the "Build it in Figma: Design a cohesive icon set" in this link: kzbin.info/www/bejne/iWqzaKKYbLOra6s

[@strongsads1]

How do we get some of the links that were mentioned on the stream? Specifically the icon one mentioned at the end. Thanks!

[@developerdon6419]

21:45 very useful info about padding and spacing

[@Smokyghost77]

For the inheritance of values regarding the buttons, couldn't you just create a component?

[@punisherxabhi6259]

Can you please improve the audio quality of the video as it was not much clear to hear 😓

[@mettemarthedaljrgensen4501]

I can't find "Stretch left and right" in my Figma, have they changed it in the update?

[@mandovid]

Two things: make a more compact video with same principles and with better audio quality.

[@adelinas77]

Thanks a bunch! Real helpful!

[@nukeout]

lol don't build custom icons unless you can afford it - just use Material icons

[@lejdide]

Could you share the link to the icon figma document you mentioned in the end of the video❤?

[@Komaln]

"Stretch" option is not highlighting in my Figma when I am selecting child components ... at 44:56. Somebody, please help. Not able to figure out what I am doing wrong.

[@basakcelik8916]

i have the same problem.

[@brittanybuckley4571]

I'm trying to follow this, today is March 2, 2022. I recently downloaded Figma, and I'm trying to do the "stretch" option for my child elements within my textfield components, but the align options do not appear when I click on the child elements. Could it be that Figma has updated since the time of this recording and that information is now obsolete? If so, is there a new solution?

[@magdalenam6866]

Hello, I am wondering why he didn't use variants for creating instances ? Was it for purpose ? Or maybe variants weren't available that time when video was created ?

[@designdirection1]

yes, variants weren't available at that time.

[@emilysbs]

The host sounds a lot like Josh Gad to me, so I just imagine the whole time that Olaf is the one giving this Figma tutorial and that, thanks to his personal snow cloud made by Elsa, he has really moved up in life. LOL

[@joy-lopes]

thank you thank you thank you!

[@oliveryt7168]

This is soo helpful! Thank you!

[@pritikasharma1208]

Hello, I have the free version of FIGMA. I have been following along but my view is different when Rogie creates textfields. I can not see icons for 1. the 'Stretch' feature when auto layout is turned to vertical. 2. I can see 'Spread' for Drop shadow effects, but it is disabled. Could someone please let me know if these features are not offered in the free version.

[@anitius101]

Hi, I have the free version as well. I had the same problem with the spread option disabled, so I hope this helps: Make sure you are selecting the instance of the component below the component layer. You need to check "clip content" above in the panel, (right below the angle and rounded corner options). And have outside stroke in the stroke options. That worked for me. As for point 1 I can't help you. I didn't use that feature.

[@TerekkiTerekki]

appreciate these videos thank you but man they could be 1/4 the length

[@spindext]

Why is my drop shadow's spread option grayed out? I can't seem to edit it.

[@ania5078]

I had the same problem. Make sure you have set „Clip Content” on the component and it should work.

[@123austinpowers]

I cant find any Stretch left or right when i click on the child component. Anyone who can provide any shortcut link? Thank you

[@Komaln]

Were you able to figure that out?

[@Solonomade]

Listening to you designing is like watching Bob Ross painting. 😅

[@samduss4193]

Need to update actually now there is variables

[@yogeshpant1761]

How do I get this Monaco font though. Is it free? I didn't find it in google fonts and Figma.

[@secession77]

Too much talking, too less showing, I wish that series were more dynamic [*]

[@MrNedicS]

Am I doing something wrong here? I create an auto layout but the component is not scaling 44:45 kzbin.info/www/bejne/b6m4iYd8r6l3edE - maybe new version is not having this option?

[@MrMarcelPolo]

Definitively a difference between 2 figma versions (stretching child component in a parent auto layout). You can do the same using the fill container (vertical and / or horizontal) function in the top right tools : switch between "fixed with" or "fill container", after selecting the child object

[@chuhanwang4882]

can you share the link that was sent in the chat?

[@andreazevedo9776]

Try this: kzbin.info/www/bejne/iWqzaKKYbLOra6s

[@loveleenjoshi9511]

can you

[@mishaval]

How do we get access to these as live streams? Thanks!

[@stevenhines4211]

You can sign up at figma.com/events

[@desandipan19]

Please share the file in figma community

[@katylee3168]

Great!

[@goldglover89]

The way the assets/components drawer is organized and designed is a nightmare! Zero hierarchy. Please improve this.

[@FirstLast-tb7qn]

One day programming languages will be like clicking and selecting were the ide will write the code for the programmer..may be the programmer will inject certain facts were the ide will solve the problem automatically.

[@oposkainaxei]

Where's the file shared?

[@aurelianspodarec2629]

Its hard to see this. Not everyone is on a 27inch Mac. Show your face, make a connection with the audience.

[@djblast101]

Great video but these people ask the most irrelevant ass questions lol so focused on visual ui kit question less about Design system.

[@privacyadvocacy]

The video is incredible, but maths calculations are too weak. To get the second golden ratio number, it has to be divided as (X/ 1.62*1.62) and not (X / 1.62*2). How could the guy keep doing calculations like these?😅😆 No offence, sir, the video was breathtaking and those bragging "design system comes second, first the design"- Get your basics straight.

[@elizabeth4689]

the audio's pretty bad

[@DanielleAsh-h5c]

25:05 ?

[@TheLyricsGuy]

34:00

[@aurko6510]

the audio quality is very very garbage

[@ItsMeHakan]

This guys talks like Aaron Draplin 🤣

[@fiveshorts]

Lots of enthusiasm. Too much caffeine. And you really don’t know WTF you’re doing, design-wise. No one would multiply by a golden ratio multiple times, and you have to design first, then build your system. This is all ass backwards. The system always comes last.

[@fiveshorts]

@selfless the former. Always.

[@KristenDadesho]

Im new to UX and I thought the same thing...to build the design first, then the system.