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

[@vinarostomyan]

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

[@danielq888]

This is pure gold and underrated.

[@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.

[@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!

[@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 :)

[@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

[@magdalenawalczak8725]

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

[@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.

[@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.

[@martacondedesigner]

Thanks for sharing the files :)!

[@RasmusSchultz]

are spacer components still relevant in 2024? 10:02 "right now in Figma there's not really a native built-in way to do this" and "that's why I'm going to bring in the idea of a spacer component" 4 years on, variables for auto layout properties are actually supported now, so... should we be adding spacers to component libraries? sort of seems like an outdated workaround now?

[@strongsads1]

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

[@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.

[@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.

[@mettemarthedaljrgensen4501]

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

[@Smokyghost77]

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

[@ramil2733]

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

[@developerdon6419]

21:45 very useful info about padding and spacing

[@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

[@walaaismael6351]

Great Video, Awsome!

[@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?

[@lejdide]

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

[@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

[@pavankumarattavar7514]

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

[@adelinas77]

Thanks a bunch! Real helpful!

[@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.

[@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?

[@oliveryt7168]

This is soo helpful! Thank you!

[@punisherxabhi6259]

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

[@Solonomade]

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

[@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.

[@mandovid]

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

[@yogeshpant1761]

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

[@joy-lopes]

thank you thank you thank you!

[@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

[@nukeout]

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

[@TerekkiTerekki]

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

[@chuhanwang4882]

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

[@andreazevedo9776]

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

[@loveleenjoshi9511]

can you

[@RasmusSchultz]

how do people feel about rendering out all these design variables as text and shapes? rendering out your font properties and shapes representing grids creates problems if/when you update those variables - your grid visualizer plugin doesn't update the shapes when you change the grid, it's just a one time rendering, so now your actual design can very easily get out of sync with your presentation of those details. I don't think I like it. I mean, anyone can inspect the variables and get the font and grid properties when needed - so this just feels like redundant work that invites problems.

[@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

[@oposkainaxei]

Where's the file shared?

[@katylee3168]

Great!

[@samduss4193]

Need to update actually now there is variables

[@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.

[@secession77]

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

[@goldglover89]

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

[@DanielleAsh-h5c]

25:05 ?

[@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.

[@TheLyricsGuy]

34:00

[@elizabeth4689]

the audio's pretty bad

[@aurelianspodarec2629]

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

[@ItsMeHakan]

This guys talks like Aaron Draplin 🤣

[@aurko6510]

the audio quality is very very garbage

[@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.