Making changes to the UI is also a tedious process. Replicating a small tweak across artboards and states is time-consuming. While solved to a certain extent with components, it is still a far cry from what is ideal.

Maintaining UI components in design tools is large enough of a problem to become meme-worthy. And imagining duplicating a thousand variants because your app has a dark mode—might as well forget sleep.

And let’s not even get into versioning.

Utopia

Now, what if the designer themselves could have complete control over the UI building process, right down to the last pixel? What if they had the ability to change minute things such as the font weight on the button, or the drop shadow value of a card element, or adding a new image? What if one person could do what takes two people multiple hours to sync and fix?

Instead of a designer-developer wresting match, what if each person could focus on their core strengths instead? The designer worries about user flow and aesthetics, and the developer only has to handle integration?

What if the designer could instead hand-off pixel-perfect, production-ready code that’s completely responsive across devices, and also reusable?

We firmly believe that the designer should be in complete control of the interface and the experience, rather than the developer trying to interpret the designer’s intentions via a document.

It makes more sense for the designer to focus on the UI and aesthetics, and the developer to focus on integration and performance etc—the idea is to ship quickly, and not have either wait for the other to make changes.

A step in the right direction

Enter Fictoan. It’s a dead-simple, intuitive UI framework and a component library for React, that handles everything you need for building interfaces.

What you see here is a real-time, non-sped-up video of building a simple login page. In about four minutes, you have a fully responsive, production-ready page with input validations, states and rudimentary error handling. All this, ready for hand-off.

While your front-end developer does the integration, you can continue to tweak the aesthetics. The other thing to note is the attributes and props are all in plain English. They are named in the same way you’d set them in any design tool. No complex nomenclature or abbreviations to remember.

<Row marginTop="medium" sidePadding="medium">
    <Portion desktopSpan="two-third">
        <Heading as="h3" weight="600" marginBottom="small">
            Welcome to my app!
        </Heading>
    </Portion>
    
    <Portion desktopSpan="one-third">
        <Card padding="micro" shape="rounded" shadow="hard">
            <Heading as="h6" weight="600" marginBottom="micro">
                Login
            </Heading>
    
            <FormWrapper>
                <InputField
                    label="Email"
                    type="email"
                    helpText="Work email, please"
                    errorText="Seems invalid"
                    validateThis
                />
    
                <InputField
                    label="Password"
                    type="password"
                    helpText="Min 8 characters"
                />
    
                <Button
                    bgColour="green"
                    textColour="white"
                    shape="rounded"
                    shadow="hard"
                >
                    Login
                </Button>
            </FormWrapper>
        </Card>
    </Portion>
</Row>

You can also store all variations and states using a simple theme file, so you don’t have to worry about adding the same props over and over again, too.