Approaching web builds at the component level is a great way for design and development to meet in the middle.

Every web project starts by examining the brand’s story. 

What are we trying to communicate? To whom? What is most important? These answers are what inform work like the sitemap, navigation, site-wide CTAs, information architecture and overall content strategy. Considering and empathizing with your user and aligning their needs with the goals of a project, can help determine what needs to be said as well as where and how to say it.


The content outline deliverable is what summarizes the site’s narrative. It’s a document that defines content needs and informs the wireframe work to come. This Google doc may not look like much, but thoughtful content work in the beginning of a project is what essentially shapes the entire website. 

Once we have a content outline in place, we let that drive layout decisions and determine component, UI and content needs from there.

If the content strategy and outlining work is the blueprint, the wireframes become the foundation, structure and support for the eventual build. We’re not shopping shutters just yet, we’re making sure the house can stand the test of time.

Achieving Consistency and Cohesion through Componentry

Now for an interface inventory. We start by breaking out each element from wireframes into categories - UI, cards, menus, lists etc. to determine the needs for a project. 

Components are what become the “building blocks” for your site. Once you have a library outlined, you can begin to infuse the brand. Component by component, leveraging a brand’s personality and starting to establish a style guide foundation - Colors, heading styles, underlying grid, spacing etc. 

Then, taking things a step further by setting styles and effects. This is where it’s important to have fun and flex the brand, but also be mindful of rules, consistency and feasibility. Applying design to each component, 1 by 1, allows you to experiment, feel out what’s working, what isn’t and create patterns through properties that carry throughout the design and ensure consistency, trust and cohesion for the entire site experience.

Tweak, iterate, test and finesse. Designing components is the fun part. And once you build a core set, you’re on your way to being the proud new owner of a scalable, design system. The 

component library that you establish is a subset of the full system

. The library is essentially a repository of reusable modules that developers, or the admin can then utilize when building pages. And guess what? It doesn’t have to end there! Design systems provide a flexible framework that allow you to easily grow your library of core components at any time. This provides your website with the capacity to scale and evolve without compromising on consistency or quality.

For a more comprehensive look at creating a full design system, check out this post:

A set of rules and guidelines that act as a single source of truth for digital interpretation of your brand. A design system is essentially a complex digital brand guide. The building blocks for any web work.



Introduction to Design Systems

Creating a Design System in Figma

Here are a few examples of open source component libraries to pull inspiration from:

Web Design

User Experience

Frontend Development

Websites

UX / UI

Component-Based Web Design

Ever opened up Chrome and right clicked to Inspect a website? Maybe you’re trying to target a specific variable, copy a hex code or identify a header style. As a designer, I do it all of the time. Well, think of

 as reverse engineering that process. Developers now have a workspace within design files - Something that feels familiar, and easy to navigate. It translates design intentions into a familiar and relatable language.

Navigate designs faster with a more familiar and relatable interface

Track changes and status of design updates

Connect tools and documentation - Integrations that allow for a more streamlined workflow


Begin to speak the same language as developers in order to reduce handoff friction

Improve process by being able to build structure into designs that leaves development with less questions

Less preparation of files and asset generation. Development has more control and visibility into designs

Let’s take a deeper look at some of these benefits:

In the past, inspect mode allowed developers access to design layers, with the ability to copy code, inspect things like styles and fonts, export assets etc. but the terminology was still very much design-specific. Now, dev mode allows developers a translated environment with dev-centric concepts like tokens, code snippets, specs. It’s bringing design and development one step closer to using a shared language and collaborating on a single source of truth. A shared language makes it easier for developers to find the information and assets they need. It also helps designers better communicate and understand things from a developers point of view.


Was this client approved? Is this the most updated version? Has this changed since I last looked at it?

Thanks to the new “Frame History” module, you can now see frame versioning history and determine exactly when a design change was made. You can even compare a frame to its previous version to see exactly what changed. Even better, sections can now be marked as 

to communicate which components are ready to build. Once a section is marked as Ready for dev, that section immediately gets moved to the top of the Dev layers panel, signifying its importance.

Isolating and exporting specific assets just became MUCH easier for developers. Instead of having to sift through groups and frames to find a layer, you can now download or export icons and assets from the design file with a single click. Selecting a group, a single layer or an entire frame in dev mode will identify all exportable assets and give asset download options.

Dev mode now allows you to add documentation to components, frames and layers. For example, you can add descriptor text to components to outline specific use cases and rules. You can also add “dev resources” or links associated with designs - This could be a link to a 

I can’t find a lot to make me doubt that Figma’s Dev Mode will make modern day workflows more efficient, and enable better designer-developer collaboration. We can effectively work together cross-discipline and not only inform, but build upon each other’s work. It’s a massive improvement from inspect, minus 1 detail …

Inspect mode (the previous, less robust iteration of dev mode in Figma) was 

. A developer did not have to have a collaborator or editor seat in order to view and inspect designs. Dev mode on the other hand is replacing this free feature, And … will not be free.

“Dev Mode is currently in open beta and is free for everyone to use through the end of 2023. Starting in 2024, access to Dev Mode will require a paid seat.”

So, next year, dev mode will require a $25 per month on Organization, and $35 per month on Enterprise price tag per dev seat. Some shiny new features that unfortunately come with a shiny new price tag.

All in all, paid access or not, this is a powerful new tool. Figma is constantly evolving the design process in order to move designers and developers closer together and this is no different. I’m excited about the new features, eager to put them to the test and I look forward to future updates and feature adds to come!

Process

Custom Dev

Intro To Figma Dev Mode

Bernheim Forest Website

Ecommerce

Foxhollow Farm 

 a cohesive, mobile-friendly website takes a talented team with diverse skill sets. Our team delivers the strategy, design, and development talent needed to execute outstanding work. We build from the ground up with a focus on accessibility and mobile devices.

Web Design

Web Design: Case Studies

01

Bernheim Forest Website

02

Foxhollow Farm

Web Design: Blog Posts

Component-Based Web Design

Intro To Figma Dev Mode