Basic shortcut and useful tools

 

*** Bootsrap Grid : 

  আমরা যদি ওয়েবসাইট ডিজাইন করার সময় Grid  ব্যবহার করি তাহলে ডিজাইন করা আমাদের জন্য আরো অনেক সহজ হবে ।  

Syntax :    Add Grid  অপসনে  click  করার পর নিচের value  গুলো সেট করে দিতে হবে ঃ 

১ )

            Grid  ==   Column 

            Number of column  ==  12 

            Gutter  ==  24 

            Margin  ==  100

২)  

            Grid  ==   Column 

            Number of column  == 12 

            Gutter  ==   30 

            Width    ==   70 

            Align   ==   Center 

*** Resource  : 

1 . Image :  freepik.com  +  undraw.co  (website)

2. Icon :  unicons (plugins)

3. Gradiend background : grainy gradient {auto generated} (plugins)

*** Shortcuts : 

1. ctrl + g  ------ group

2. ctrl + d ------ duplicate

3. ctrl + alt + k ------ Componant 

4. shift + a  ------ Auto Layout 

5. shift + r  -------- Rular 

6. f ------- Frame 

7. v  ------ Moov Tool

8. r  ------- Rectangle

9.  o ---------  circle 

10. l --------- Line

*** Basic Sizes / Typography : 

Designing a website with a clear typographic hierarchy and consistent spacing is essential for a good user experience. Here are some general guidelines for text sizes and button dimensions for a desktop website using Figma's Auto Layout:

1. Heading (H1)

   • Size: 32-40 px
   • Weight: Bold (700)
   • Line Height: 1.2

2. Subheading (H2)

   • Size: 24-32 px
   • Weight: Semi-bold (600)
   • Line Height: 1.3

3. Normal Text (Body)

   • Size: 16-18 px
   • Weight: Regular (400)
   • Line Height: 1.5

4. Small Text

   • Size: 12-14 px
   • Weight: Regular (400)
   • Line Height: 1.4

5. Caption Text

   • Size: 10-12 px
   • Weight: Regular (400)
   • Line Height: 1.4

Buttons

1. Primary Button

   • Size: 16-18 px (text)
   • Padding: 12-16 px (vertical), 24-32 px (horizontal)
   • Corner Radius: 4-8 px

2. Secondary Button

   • Size: 16-18 px (text)
   • Padding: 10-14 px (vertical), 20-24 px (horizontal)
   • Corner Radius: 4-8 px

Spacing

• Margin Between Elements: 16-32 px (depends on the importance of the elements)
• Padding Inside Containers: 16-24 px

Additional Tips

• Use a consistent color palette for text and backgrounds to maintain visual harmony.
• Ensure contrast between text and background for readability.
• Test responsiveness by adjusting sizes and layouts for different screen widths.

Feel free to adjust these values based on your design’s aesthetic and branding needs!

*** Others : 

1. Frame is more flexible than a group .. so after creating a component you should make it Auto Layout .

2. Element - Group/Frame - AutoLayout - Component . 

-->  You can reuse an element if you make that element as a component .

Created By _____  🅰🅻🅸  🅷🅰🅸🅳🅰🆁