Creating a small design system for my blog using Figma — a UX case study

Published in

UX Collective

6 min readMay 28, 2019

My blog is here on Medium and I share recipes and articles about Whole Food Plant-Based Diet (WFPB).

I created this blog before I started studying UX/UI design (a year ago). In this ongoing process, I thought I could practice design while improving things on the blog. That’s when I decided to create a small design system.

I mean small because the pattern library and the style guide are only parts of the design system, as I realized later.

"A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem." Nathan Curtis [1]

🎯 My goals

Learn to create components using Figma
Learn about the design system
Organize and create patterns for my blog

👣 My process

Free course on Design System in Figma
Reading about the design system
Understanding the current state of my blog
Establishing design principles
Building the color palette, typography, icons, and UI Elements

Understand the current state of my design

I took a screenshot of the current page of my blog on Medium.
The things I was trying to understand were the colors, text styles and patterns on the covers of each post.

Screenshot of the blog (I cut and placed side-by-side as the original was 4096px height)

Establishing Design Principles

I thought it could be important to define design principles to guide my design choices (this would be part of a style guide in a Design System).

Simple
Awareness about what is necessary. Provide just enough information to make things understandable.

Meaningful
Thoughtful consideration to people, animal, and the environment when creating content. Purpose and utility are more important than trends.

Flexible
Openness to learning different ways to do things and evolve over time.

Building the color palette and UI Elements

I checked the current state of the colors on the design, and it showed 20 colors variables.

Besides the extense variety of colors, the previous primary colors didn’t provide enough contrast, failing to pass either the AA or AAA Web Content Accessibility Guidelines (WCAG) recommendation.

As a WFPB diet is mainly natural foods and whole grains I started searching for new colors that would match this idea. I decided to go with a warm yellow and a brown tone, which reminds me of this natural context of the diet.

This combination has also sufficient contrast as regulated by the WCGA.

Naming convention

I found that there are different approaches to naming colors in a design system (e.g. abstract name, actual names, numbers). I choose the semantic approach (described by the meaning). It thought it could be easy to remember and if I need to change at some point, I'll keep its meaning.

I set the colors as main colors, accent colors, a scale of neutral colors and feedback colors [3].

To find them easily on Figma I organized into groups by name then slash and the naming convention.

Left image — All color styles and its name | Right image — The color styles organized into groups

Typography

There were 3 types of fonts around the blog, plus the font of Medium.
I decided to search for new fonts considering:
• Brand adjectives
• Readability
• Flexibility (different weights)
• Latin characters
• Free for commercial use

The brand adjectives I came with:
• Stylized
• Functional
• Natural
• Sustainable
• Impactful
• Earthy
• Eccentric

For the headings and the brand, I choose Playfair.

For body text and subheadings I wanted a sans serif to pair with Playfair, so I choose Source Sans Pro. Different from the Playfair, this font is a highly-readable body text.

I choose a 4-based scale for sizing the fonts and defined spacing sizes.

I created and saved each grid and column as styles.

I grouped a column for Mobile, Tablets, and Desktop following the Material Design, thinking I could use it in upcoming projects.

Icons

All the icons I've used across the blog I collected and redefined their size frames. Then I made each icon a component.
I organized by "text icon" useful for content and "navigation icons" that I can use in a platform.

The "system icons" are a frame inside the frame called “Icons”, this way they are separate lists in the Assets panel.

Navigation

As my blog was on Medium I didn't have navigation elements to add. But during this process, I decided to design a landing page to import its elements into this small design system.

For now, I have buttons and the top navigation bar in this section.

The buttons have the text as nesting components which means if I make a change to the main text it will be applied to these buttons as well.

Shadow

There's one type of shadow for the button and four different shadows for the cards. I saved them as styles so I can reuse it on other objects.

Cards

The cards and buttons are elements grouped together and saved as components. To make them useful in different sizes I applied the constraints.

Publishing the library

In this free tier of Figma, I can publish the styles (color, typography, effects) and use in other files. But components (icons, buttons, cards, etc.) can only be shared in a paid plan.

Publishing the styles to the team library

To be able to use all these components in the landing page I created pages inside this Figma file.

Here is the final look of this small design system.

I updated the cover of the blog and the next steps would be to redesign all covers as well.

Screenshot of the first part of the blog

Take away

By doing this project, I set some constraints and principles that can help me to save time and increase the consistency of the blog in upcoming projects.
I could learn a bit more about components, nest components using Figma, and about design system while improving my blog.
It was challenging when I saw the vast array of options that involve a project like a design system. There are many tiny decisions to make and I focused on what was good for this moment and I'll improve it over time.

Thanks for reading! 👏