Figma landing pages builder. Web system based on components

A new product to save resources on designing web & mobile sites

4 min readJul 12, 2018

UPD: This product was released on 20.08.2018

Components in Figma is a ticket to the universe of unlimited scalability and semi-automatization. What, if to have components-based constructor for creating trendy and presentable landing pages for product showcase better than ever? To represent portfolio, services, application… Whatever! Today mostly every landing page consists of seamless blocks with similar structure: Hero images, Covers, CTAs, Features, Testimonials, Subscription forms and more… What, if we can have an ultimate Figma web design system made of hundreds reusable components, to let you collect the variety of layouts just by toggling Instances.

Figma web design templates

Components-driven landing pages toolkit for Figma delivered as smart web design system. Allows you to launch mobile &…

setproduct.com

How it works

This video shows the designer’s workflow with web design kit. Designed at big scale. This is not the last word about what this product is capable of:

More videos is about to come soon. So follow me to stay updated!

Let me explain the meaning reusable component as I feel it contextually. It’s pretty clear to have such one on the web development; but how to use full power of it, when designing interfaces in Figma? Components is a way to inherit customization quickly and spread it to the parent items. One picture speaks louder than words:

Yes, static image might be making no sense, but scroll down to the next, please :)

This Hero Image component for landing cover made of two isometric images which is converted into components as well. Once it has been used at desktop layout and reused at mobile, your future possible customizations passes faster. Move or edit the object inside parent and obtain the mass effect simultaneously:

Drag and move an app screen layout to obtain better combination, and effect goes further to the parented. This principle is considered in every component included in Figma landing web system

Now you’ve been guided through the most feature!

This is an early screenshot of some components already crafted and used

Made by components

Right now I am deeply involved into moving pixels for this product to be released soon. Every UI widget in this system comes responsive, neatly organized and named to let you toggle it faster within Instances. Even no need to edit pixels in most of the cases. Simply drag and drop the component and fit it into the canvas. By the way, Bootstrap grid is considered in every template as well.

Global styles

Recently released Figma 3.0 delivers a game changing opportunity to lay down the styleguides better and faster. Few variants of shadows, round corners and shades of gray declared globally to grant you full control over the shape and elevation. 2dp, 4dp, 8dp, 16dp and even 999dp available to swap the shadow size or jump from square button to rounded. Thus you can generate more different styles faster than before.

Yeah, mockups connected to the color system as well 🙈

Features & Highlights

Once again: components-driven! Hundreds of properly constrained web components will be included in the bundle to let you prototype any of product / landing pages and save hours, days or even weeks!
Variety of landing templates dedicated to represent your services, applications, start-ups and portfolios in a eye-catching way. More than 20+ layouts for both of mobile and desktop will be included.
200+ awesome outlined Feather icons. It’s an open source set, so you are free to use. Every icon imported into Figma, fixed, well labeled, converted into constrained component to let you swap it faster.
Will be themed into 3 different styles, colors and font combinations. By default it comes with free for commercial use font Objectivity, variants with Roboto and others comes as option. You are free to select more convenient theme for your project to start with.
Perfect kit for Figma beginners. While exploring this product you will learn how to use full power of components as if archimage casts fireballs. Take your Figma design systems education process to the next level!

Almost yours for $68

Your number one quickstarter for web sites in Figma

The progress

20.08 — The release day! Meet Websy 1.0

16.08 — The last 10th template is done! Now I am switching to seeking for bugs, renaming and organizing the components. Less than a week before the release.

14.08 — Components overview

13.08 — New +3 templates added and available for preview

There are some shots showing the design progress available: one, two, three, four