Creating a Design System - Spacing and Icons

Defining the spacing and the icons of our design system.
Do subscribe, like and hit the notification icon:
/ @amdesignanddev .
Have a project? Send me a message on [e-mail] or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....

[@joelx.1428]

I appreciate your ability to elaborate on design systems. Thank you for being a positive influence on the design community.

[@AMDesignAndDev]

Thank you Joel!

[@ANHTUAN-fd6vn]

You deserve more subscribers!!!!! I've seen a lot of your videos and learn from it! Thanks so much!!!!!

[@AMDesignAndDev]

Thank you bro :)

[@nagarajuv6371]

Every video, I'm learning more than a design studio teaches.. wonderful content

[@nj2nj]

I would consider Golden Ratio multiplier 1.6. It may look slightly more complicated than 2, but that is more classic way of designing DS systems. And this looks really cool and more natural.

[@israelossai5487]

Great work, thanks you so much. You teach maybe a little too fast so us learning from scratch. Would live to watch more of your content

[@marcelocristiano838]

I'm a backend developer trying to learn a little bit about design, really thanks for all the amazing tutorials :D I have a question about the sizing and the tokens. Here you created 13 sizes but you didnt use them at Figma tokens. In the token's class you have created 3 sizes under Sizing property. These sizes from this class would be created under the Sizing property too? if so, how would you name it? in the token class you've used size-small, size-medium and size-large, what would it be with 13 sizes?

[@sarfarajdal3372]

Great work, thank you so much. can you create a video about Grid for Desktop and Mobile??

[@kamransiddiqui1125]

Awesome Channel and super-awesome content. Love from India.

[@AMDesignAndDev]

Jazak Allah Kamran 😊

[@tayyabsohail8823]

Thanks for providing good video

[@yusefess]

fantastic as always. keep up the good work.

[@AMDesignAndDev]

Thanks a lot :)

[@GraveRave]

Sweet!

[@salemmohammad2701]

Dosen't design system include determining for the values in pixel for padding, margin, gap spacing, and dimensions for things like forms, Hero or Features sections, or the spaces around the page and between its sections? someone said that bootstrap design system contain recommendations for this things but I can't find this. so is there a place that has such suggested values?

[@darkpsychologylab]

Nie video AM design, but I will like you to show us some of the short cuts you use when doing some things, cause it is difficult to follow through with the video when the shorts you use are not mentioned clearly for us to see, it passes below too fast.

[@smilli6415]

can you do new component creating design system course with variables

[@jaminizam9450]

How to create this all icons for instances?

[@HarbarhsXo]

Good content but you're fast I can hardly keep up with the shortcuts you're using. Need to backwards couple of times

[@shibambiswas415]

I am not able to publish the ICONs. Please guide us.

[@emilynguyen7769]

Hi. I’d like to ask how you add icon system into the design system like this to reuse. I’m beginner to learn using Figma. I know how to set up text and color system. But I didn’t know steps to set it up like you do. How do you create it? Thanks a lot

[@AMDesignAndDev]

I just copied the hero icons from a community file and made them components.

[@sujithnivel9822]

Hi, Can you put a video on Grid system for a screen?

[@AMDesignAndDev]

Check this out: kzbin.info/www/bejne/eHmscqF8otGMgs0

[@CreativeCutsStudio534]

Is any group open for newbies? I want to learn in a team.

[@asimasmac]

I guess we should double the spacing after 8.. why we increased 4px in first 7cols than 8px in 5cols ?

[@AMDesignAndDev]

We can do that, but personally on smaller elements, I see a need to use 4px spacing after 8 as well, like 12, 20, etc.

[@asimasmac]

@@AMDesignAndDev Yeh for that you need to set the rules when and where that particular spacing will apply like before and after table 40px that means 40px will be used in each table before and after.

[@teenylupini]

When i change my container to horizontal it puts the text to the left of it... you didnt explain that well

[@teenylupini]

but thank you for all the other info