Figma website templates. Web design kit to double a landing page conversion
Meet Material Website Toolkit — a next-level product design kit to create landing pages that sell well.
From a visitor to a customer
Now everyone could build next-level product pages aimed to deliver impact messages and emotions to engage your potential customer. These web templates and based on humans, not illustrations.
Blocks to fit together
Made from 1440px blocks exclusively for Figma, this kit meets your customization requirements and ready for mixing and combining to let you design more webpages variants per hour. You can swap from light to dark versions or use both mixed to impact better.
Inspired by Top-100 tech companies
Setproduct team was studied and examined the web experience of Top-100 most successful worldwide tech companies. We did the research and browsed through tons of landing pages and collected the best and most popular web design patterns at a whole product which is inspired by Material web design.
Highlights of Figma web UI kit
- Each block is scalable and fits perfect with each other
- Several Google.Fonts declared as Figma styles for base typography
- Components-driven constrained and incredibly organized to quickstart without docs or Figma knowledge
- Contains a lot of UI patterns to quickly deploy a brandy product design website
To accelerate the workflow
What’s the most primary dedication for a launching trendy, clear, vibrant landing page for your product? Of course to let your visitor discover the necessary information about services and then get him clicked on a CTA button without hassle.
Figma Website Templates library is a quicker way to deploy trustful product design as a website to catch, attract and convert visitors into your customers without a doubt, or to represent your product or services with spirit.
We have a lot of blocks included for your endless experiments. You’re free to pick any, then test and validate with traffic driving to a page, compare the metrics after and stay within the best design combination to let your business grow.
Take the web to the next level
One-time purchase for the unlimited amount of projects
Dark mode for web design
Categorized in 13 sections
Hero covers • Navigation • Product features • Cards • Tables • Call to action • Pricing plans • Forms • Image grids • Testimonials • FAQ • Footers and more uncategorized blocks (Roadmap, Calculator, Code snippet and others)
Hero Covers
Blocks to start telling a story about your product, service or application. We got all them covered. Replace and rescale photos, edit and change texts and start collecting emails for a campaign or gain more app downloads. Use your imagination to set the most convenient block as the start according to aimed goals. Material web design experience was reimagined here for your next landing page
Call to Action
Use Figma for web design. It’s a quicker way to deploy trustful product design as a website to catch, attract and convert visitors into your customers without a doubt.
We have a lot of CTA blocks included for your endless experiments. You’re free to pick any, then test and validate with traffic driving to a page, compare the metrics after and stay within the best design combination to let your business grow.
Footers
There’re so many ways to design a better footer for your pages. Footers that help a user to navigate, discover necessary information or convert into newsletter subscribers. But you don’t have to spend your time on it. Pick just one from a collection, resize or move nested frames with links, social icons, forms and other; replace with your own content; toggle fonts (there much more variants available as Figma fonts styles and already declared in advance) and produce awesome websites faster…
Pricing Plans
What’s the primary purpose of a clear and simple pricing plan block? To let a potential customer select the plan which is most convenient for your business, not for a user. That’s why most expensive plans are always highlighted, elevated and visible more clearly instead of basic or free plans. You can pick any from 5 blocks provided for pricing information in Figma web UI kit.
Data Tables
When building websites sometimes it’s necessary to have flexible tables on hand to quickly paste a different kind of data to represent to a visitor. That’s why Figma Web Design kit equipped with smart and ultimate tables, served within a variety of style to cover every possible purpose. FYI, it’s built brick-by-brick using only one whole-cell component, to make upcoming changes, edits and customizations easy and quick.
Features Blocks
Material Design for Web — is a next-level Figma templates toolkit especially made to quickly deploy convertible landing pages and represent the features of your application, services, studio or product better than ever. Use this web kit to convert more users into customers merging the blocks together. It’s easy as it could be. Fewer skills — more conversion.
Web Forms
There are several powerful layouts included in Figma web design templates aimed to collect all the necessary data from your visitors. We’ve designed and developed a variety of blocks powered by usability for collecting emails for a campaign, let your visitor subscribe for a newsletter, sign up for a service or web app, fill and pass through TLDR surveys and many more. All the text fields related patterns collected in whole landing pages design kit.
Cards
Material Website Design Kit — is an ultimate Figma templates bundle for launching product design sites as easy as a finger click. Cards section contains 12 blocks for light & dark themes to represent any kind of content clearly and affordable. Scalable, constrained and production-ready. FYI, desktop & mobile mockups are integrated into the kit.
Grids for Images
Figma Web Templates — contain so many blocks as possible to have all the web patterns on hand within the whole Figma library for the web. Image Grids provided in 5 combinations, free to rescale or reassign. Use this pattern to create delightful photo combinations related to your product, service or application that upcoming landing page is related to.
Testimonials
Landing Design Kit For Figma — powered by the best web design patterns collected from the most successful worldwide tech companies. The testimonials section contains scalable blocks to cover every case for representation customer’s feedback around your app, product or service. Having those blocks at your web pages boosts the conversion because visitors always looking for someone else’s experience to make their doubts disappearing!
Purchase Material Website Toolkit
If you wish to preview more web design blocks for your inspiration — take a look at Web Design Inspiration gallery related to this design product
