As developers, we've all experienced the challenges of translating design into code, getting the right colors, spacing, font sizes etc. Minor inconsistencies can cause friction between design and development teams, leading to frustration and inefficiencies and unhappy designers. Design systems are growing more complex, adding to the manual work required to implement these values accurately in our codebase.

In my experience, one of the most common issues is the incorrect implementation of fonts, where details like line height, letter spacing, and font weights are often overlooked. Fortunately, Tailwind CSS provides a solution with its object syntax for setting font sizes, allowing us to incorporate these values seamlessly.

To help close the gap between design and development at Bravoure, I've developed a Figma plugin that allows our designers to quickly generate font styles using Tailwind's default font size scale. Additionally, I created a package for our boilerplate that automates the export of these font styles from our design systems.

This workflow not only saves time for both designers and developers but also ensures that any changes in the design system are easily reflected in our codebase with a single command. Happy designers, happy developers.

Figma Tailwind CSS Font Size Generator Plugin

You can check out the Figma plugin here: TailwindCSS Font Size Generator

_{TailwindCSS Font Size Generator}

Fire up the plugin, choose a font and gain control over the font styles. It includes a bunch of features like:

• Live preview of the selected font
• Adding/removing font sizes with custom naming
• Reordering font sizes
• Modifying font size, line height and letter spacing per text style or all at once
• Renaming parent text style title
• Generating text styles grouped by frame

Figma Export Tailwind Font Size Package

The export package can be downloaded here: figma-export-tailwind-font-size

_{Export font sizes}

The export package simplifies the process of importing font styles into your codebase. Usage is simple:

1. Install the package in your codebase
2. Set up a config file
3. Run the script in your codebase to import the font styles

Here's an example of the generated output:

export const fontSize = {
  "sm-primary": [
    "0.875rem",
    {
      lineHeight: "112%",
      letterSpacing: "0rem",
      fontWeight: "400",
    },
  ],
  "base-primary": [
    "1rem",
    {
      lineHeight: "112%",
      letterSpacing: "0rem",
      fontWeight: "400",
    },
  ],
  "lg-primary": [
    "1.125rem",
    {
      lineHeight: "112%",
      letterSpacing: "0rem",
      fontWeight: "400",
    },
  ],
  // etc...
}; 

To conclude, as no one likes manual work, it's rewarding to see the Figma plugin already making a positive impact among our designers and developers, resulting in happier, more efficient teams on both sides of the bridge. It's a win-win! Our ultimate goal is to automate the entire design system token library. An exciting work in progress.

*Also see the figma-export-colors package