Build it in Figma: Create a design system - Components
HTML-код
- Опубликовано: 12 июл 2024
- Part 2/5. Add to your design system by building foundational components and organize them using pages, frames, names and descriptions.
Figma is free to use. Sign up here: bit.ly/3ibd7uT
Figma file: www.figma.com/community/file/...
#Figma #DesignSystem #DesignSystems #UXDesign 
Наука
15:20 Layout Grid visualizer Plugin & Why it importance
29:00 Form Design
36:20 Double border_Active state_Gloe effect
Animations With Figma ruclips.net/video/aMFUuGZ9LEs/видео.html
This is golden! Thank you so much for doing this! Just getting into Figma and these series are priceless, I am obsessed!
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!
Thank you! Figma is a powerhouse! Just at the beginning of the learning curve and really benefiting from these videos.
SO happy to find more advanced tutorials. The type relations at 21:05 are priceless. Thank you so much!!!
Animations With Figma ruclips.net/video/aMFUuGZ9LEs/видео.html
Resources like this alone make Figma worth using! Thank you :)
(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: ruclips.net/video/y29Xwt9dET0/видео.html
this should be pinned.
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.
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.
This is pure gold and underrated.
Thanks for sharing the files :)!
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.
This is soo helpful! Thank you!
Thanks a bunch! Real helpful!
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)
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.
Great Video, Awsome!
21:45 very useful info about padding and spacing
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.
Great!
How do we get some of the links that were mentioned on the stream? Specifically the icon one mentioned at the end. Thanks!
thank you thank you thank you!
Sorry for spamming the comments. But I need to make a note of that - 54:47 stretch and alining in auto layout
For the inheritance of values regarding the buttons, couldn't you just create a component?
can you please share the link that you talk about at 10:38 .I want to read that article
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.
I can't find "Stretch left and right" in my Figma, have they changed it in the update?
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.
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.
I believe that Rogie was talking about the "Build it in Figma: Design a cohesive icon set" in this link: ruclips.net/video/S9P7ob7Nx5I/видео.html
How do we get access to these as live streams? Thanks!
You can sign up at figma.com/events
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
The grid part was confusing af. I hope I'm not alone. Could've been simplified since Figma is an intuitive app.
How do I get this Monaco font though. Is it free? I didn't find it in google fonts and Figma.
Could you share the link to the icon figma document you mentioned in the end of the video❤?
Why is my drop shadow's spread option grayed out? I can't seem to edit it.
I had the same problem. Make sure you have set „Clip Content” on the component and it should work.
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?
Listening to you designing is like watching Bob Ross painting. 😅
Two things: make a more compact video with same principles and with better audio quality.
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 ?
yes, variants weren't available at that time.
appreciate these videos thank you but man they could be 1/4 the length
"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.
i have the same problem.
I cant find any Stretch left or right when i click on the child component. Anyone who can provide any shortcut link?
Thank you
Were you able to figure that out?
Where's the file shared?
Please share the file in figma community
Volume is very low sir. It would be helpful if you can increase it a bit.
can you share the link that was sent in the chat?
Try this: ruclips.net/video/S9P7ob7Nx5I/видео.html
can you
lol don't build custom icons unless you can afford it - just use Material icons
Can you please improve the audio quality of the video as it was not much clear to hear 😓
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.
Am I doing something wrong here? I create an auto layout but the component is not scaling 44:45 ruclips.net/video/9xUXTFzDDCo/видео.html - maybe new version is not having this option?
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
34:00
Great video but these people ask the most irrelevant ass questions lol so focused on visual ui kit question less about Design system.
The way the assets/components drawer is organized and designed is a nightmare! Zero hierarchy. Please improve this.
Too much talking, too less showing,
I wish that series were more dynamic [*]
25:05 ?
This guys talks like Aaron Draplin 🤣
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.
the audio's pretty bad
Its hard to see this. Not everyone is on a 27inch Mac.
Show your face, make a connection with the audience.
the audio quality is very very garbage
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.
@selfless the former. Always.
Im new to UX and I thought the same thing...to build the design first, then the system.