Modularity Figma Web Design UI Kit

Modularity is created to help designers focus on the creative part of work instead of routine tasks like defining dozens of typography and elements styles.

Learn web design, kickstart your next project by adding your content to the selected sections, experiment with easily customizable colors, icons, text styles, and buttons, iterate to define the best structure of your website using predefined modules.

• 62 modules of popular website sections Sections included: Header, Hero, Product, Features, Content, Gallery, Cart, News, About, Contacts, Footer
• Two color themes (Black & White)
• All modules are built using the 8px / 12 columns web grid
• Customizable components and assets: typography, colors, responsive buttons, input fields and icons could be easily auto-updated to your preferred color palette
• Layouts for desktop, tablet & mobile: all designs adopted for desktop (1440px), tablet (1024px) and mobile (375px) resolutions.

Experiment with your website structure using different modules, customize fonts and elements styles, choose project colors - free up your creative energy. Create fresh website designs beyond standard boring templates with Modularity.

WHAT'S INCLUDED:

Style Guide:

• Logo
• Typography styles (H1-H4, sH1-sH2, Body, Body Bold, Body Caps, Body Large, Underlined, Hint, Hint Bold)
• Color styles
• Buttons
• Input fields
• Icons

Resolutions:

• Descktop (1440px)
• Tablet (1024px)
• Mobile (375px)

Grid:

• Layout grid: 12 columns (desktop), 2 columns (mobile)
• Grid: 8 px

Sections:

• Hero: 12
• Header: 8
• Menu: 5
• Gallery: 3
• Product: 3
• Cart: 1
• News: 2
• Content: 7
• Features: 2
• Team: 3
• Partners: 2
• Numbers: 2
• Contacts: 3
• Footer: 8

Fonts:

• Montserrat
• Lato

Photos by unsplash.com

We use Modularity in our everyday design process. Actually, it was created for ourselves and then presented to the designer’s community.