Logo
Created for Figma

Free for personal use by Arsen Kolyba

Create Complex
Forms in a Few Clicks

Create Complex
Forms in a Few Clicks

Create Complex
Forms in a Few Clicks

Create Complex
Forms in a Few Clicks

Create Complex
Forms in a Few Clicks

An interactive form created from building blocks that allow to easily swap them out
for any component you need for your next form, either for web or mobile

An interactive form created from building blocks that allow to easily swap them out
for any component you need for your next form, either for web or mobile

1

1

Super Easy to Use

Super Easy to Use

You already have a frame with empty building blocks that you just swap out for a component from dropdown like legos! Figma file has all the instructions inside which is convenient :)

You already have a frame with empty building blocks that you just swap out for a component from dropdown like legos! Figma file has all the instructions inside which is convenient :)

01_illustration
3_illustration

2

2

Single Customization Panel

Single Customization Panel

Every brand has it’s own face, there’s no one solution that fits all, that’s why everything is customizable from a single panel. Set your colors, fonts, line thickness and even corner radius—all that will be applied to the whole form instantly

Every brand has it’s own face, there’s no one solution that fits all, that’s why everything is customizable from a single panel. Set your colors, fonts, line thickness and even corner radius—all that will be applied to the whole form instantly

3

3

Fully Adaptive

Fully Adaptive

Each and every component is 100% adaptive with a minimum supported resolution of 336px, which is great for mobile forms. Maximum resolution is not really limited, but the recommendation for desktop forms would be 720px

Each and every component is 100% adaptive with a minimum supported resolution of 336px, which is great for mobile forms. Maximum resolution is not really limited, but the recommendation for desktop forms would be 720px

Each and every component is 100% adaptive with a minimum supported resolution of 336px, which is great for mobile forms. Maximum resolution is not really limited, but the recommendation for desktop forms would be 720px

2_illustration
4_illustration

4

4

One & Two Column Support

One & Two Column Support

Some forms require having two columns of blocks. That’s also supported! Just change the single column block for a two column block and you’re good to go, you can now swap columns independently

Some forms require having two columns of blocks. That’s also supported! Just change the single column block for a two column block and you’re good to go, you can now swap columns independently

Some forms require having two columns of blocks. That’s also supported! Just change the single column block for a two column block and you’re good to go, you can now swap columns independently

Get started with creating your next Form without a hassle

Frequently Asked Questions

?

?

What if I need more radio buttons/checkboxes?

First of all, read components description (it’s under the Instances dropdown, there’s a lot of useful info in there including this) All MultiControl components have lots of these controls hidden. You just need to change the height of the block to reveal them, which is described in the next question

?

How do I change the height of individual blocks?

While changing the width is easy, height might be trickier. First, select the whole “Form Constructor” Frame, pink dots will appear over every block. Click on the dot of the block you want to make taller and resize it as usual. It’s important that you not drag in the center (over that little line) because that will just change margins between blocks

?

?

What if I don't need any icons on the button?

Sure, that’s really easy! You can just hide it in the layers panel. In fact, we’re in Figma, which means you can turn off anything that you don’t need!

?

What if I want to round corners but leave something square?

Yes, by default almost everything is being rounded when rounding corners in the styles customization. You can easily go to that exact Instance and change corner radius there. It will no longer be affected by the master

footer-logo
Behance
Dribbble
Twitter

Copyright © 2019 Forma
All Rights Reserved

Created by Arsen Kolyba

Created by Arsen Kolyba