I wish more designers wrote code

I know this can be a touchy topic for many—but let me start by saying I’m a designer myself, but I’m slowly turning into a front-end dev. It’s one thing to mock up the design, but its entirely another to bring to life and deploy it yourself.

I’ve been doing this for a few years now, and I came up with a React UI library to help me do the things I do, faster. Over time, with a whole bunch of my own elbow grease, and the magnanimous help from a few other devs in the company I work at, have made this into a full-featured framework that’s used in pretty much all the UI that we build.

I wanted to share that with the rest of you here: https://fictoan.io/

While the Docs are still fairly a work-in-progress, the components themselves are mostly not, and would be great if you folks would share your opinions on this.

Now, it’s not just another component library.

It’s main selling point is the declarative, unambiguous syntax.

The target audience for any code is always you and your team—the compiler doesn’t care about formatting, line breaks or naming conventions. What if code was understandable and obvious at first glance?

Here’s an example of Tailwind markup used to create an input field, with a search icon on the left, and arrow icon on the right:

<div className="relative w-full max-w-md">
      <div className="absolute
left-3 top-1/2 -translate-y-1/2 text-gray-400">
        <Search size={20} />
      </div>
      <input
        type="text"
        className="w-full rounded-lg border border-gray-300
py-2 pl-10 pr-10 focus:border-blue-500
focus:outline-none focus:ring-1 focus:ring-blue-500"
        placeholder="Search..."
      />
      <button className="absolute right-3 top-1/2
-translate-y-1/2 text-gray-400 hover:text-gray-600">
        <ArrowRight size={20} />
      </button>
    </div>

Now, the same thing in Fictoan:

<InputField
    label="Search"
    iconLeft={<SearchIcon />}
    iconRight={<CheckboxIcon />}
/>

Here’s another example of an oft-used Card component:

<Card padding="small" bgColour="red-light20" borderColor="red-dark-40">
  <Text size="large" horizontallyCentreThis>
    Hello there!
  </Text>
</Card

The British/US spelling is no typo—either work!

Here’s some layout code:

<Row horizontalPadding="small">
  <Portion desktopSpan="half" mobileSpan="8">
    <SomeComponent />
  </Portion>

  <Portion desktopSpan="10" mobileSpan="one-sixth">
    <SomeComponent />
  </Portion>
</Row>

The fractions define a portions of 24-column grid.

Here’s another:

<CodeBlock withSyntaxHighlighting language="jsx" showCopyButton>
  import { CodeBlock } from "fictoan-react";
</CodeBlock>

Are you seeing where I’m getting at?

Now, don’t get me wrong. Tailwind works, and it’s popular for a reason. But, I also think its one of the main reasons why designers find code intimidating—it’s the unfamiliar syntax. It’s cryptic, unintelligible and scary at first glance.

What if code was a lot more cleaner, friendly and self-explanatory?

And, there are a million frameworks aimed at developers, who are already spoilt for choice—Bootstrap, Chakra, Shadcn, Bulma—the list is endless.

What if the entry barrier was lower for designers looking to implement their designs? What if they could also bring to life their ideas more easily?

---

In any case, those interested, please do take it for a spin, would love to hear your thoughts!

Again, the Docs I’m still working on, so bear with me if something is incomplete/broken!