UI Prototyping's Role

In 2021 while doing product research for Janesberry, I eagerly learned Figma to design UI concepts. Over time, I learned its ins and outs, how to create components and layouts, build basic design systems, and follow best practices for productivity. One really helpful resource for me was UI Prep, a component kit that provides ready-made UI to use and adapt.

A part of me wondered if by continuing to learn and practice, I might like becoming a UI designer myself. It's a fascinating space that can easily draw you in. The ability to design interactive prototypes with animation and much more via plugins is an empowering feeling. But in the end, they're still just prototypes.

There are many templates and plugins you can find from freelancers and premium vendors, just like you can for Wordpress. Using Figma well though means progressively crafting designs and systems to just your needs, along with setting up environments for collaborative development, and workflows for stakeholder review and feedback.

When I later used it to redesign my website, I tried to model the layers and components like how it might best be done in code, which worked to a degree. Though Figma isn't a web design tool, its "Auto Layout" is similar enough to Flexbox. Their "Grids" strive for visual alignment, whereas CSS Grid aims to accommodate content. Elements in Figma can be inspected for their web equivalent properties and lately, new developer-oriented features have been added.

After searching and asking designers how they approach responsive web design in Figma, I heard that it was too complex to build using a single document. The recommendation was to build a mobile-first design that could adapt to tablets, and a separate desktop design starting at 1280 pixels in width and up. After making a few desktop screens, my layouts didn't change much, so I finished the design to start development.

Implementing all the colors, styles, text, layouts, and components took longer than I expected. My designs began to slightly change once I could build fully flexible designs with conditional styling and content depending on the viewport size. I realized what was probably my rookie mistake: having taken way too much time in the design phase.

Once you start developing the actual digital artifact, the only valuable thing a prototype gives you is an initial plan and everything else is subject to change. Figma is not a CAD program. Maybe it comes close if your design is for a mobile app, but for web design once you have real content and start developing interactions in the browser for varying screen dimensions, planned designs will have to adapt to the new working environment. Web designers/developers will come up with neat visual effects and practical microinteractions that can make the product pop.

Since early 2023 when making project prototypes in Figma, I now try to be as low fidelity as possible, skipping making components altogether, not naming or organizing layers, and copying & pasting wherever needed. It's also slightly more fun since it's a challenge, knowing that all your design decisions in your prototype will likely never be updated. At least in my case and maybe many other solo and small teams too.

I completely understand the enterprise use case for Figma. Building design systems is important and difficult work. It's the translation between designs to code and back that seems (in addition to organizational culture and politics), to be the bottleneck. There are multiple potential workflows, but only a few will be pragmatic for an organization.

Should 'designs' be the source of truth? What is that 'design'? It could be a Figma file or design system, or maybe a published UI library online (like a Storybook), a Tailwind config, CSS variables, or a versioned code repository with design tokens that can be referenced when making updates for any development environment. This latter approach can be viable if customized to one's organizational needs, though overall it's a nascent field where Amazon's Style Dictionary was the first recognized pioneer, followed by the W3C Design Tokens community group.

I'm all for using Figma or Penpot to generate designs. Since Figma said at their 2023 conference that half of their customers were developers, I'm hoping they introduce more features for small to medium-sized teams. I have yet to try Penpot whose toolset is better aligned for the web.

But at the end of the day, they're just tools to get early feedback and provide a guide for product development. Don't spend extra time perfecting a design to look and theoretically perform great in an artificial setting.