Figma Starter File

I often create many Figma files, and there are certain configuration steps that can be tedious. To solve this, I maintain a Starter File that includes all the necessary settings and elements. When I start a new project, typically website designs, my starter file provides everything I need right from the beginning.

This post describes the features of my starter file, which I will keep updated as I make updates to it.

Starter file features

The starter file has the following features:

• Minimal set of Figma variables for light and dark modes.
• A flexible type system to start, with matching Figma styles.
• A base set of starter components.
• A cover image template.

Figma variables

A starter set of Figma variables are defined for both light and dark modes. These include colors for backgrounds, text, and borders. I generally keep my light mode pages as components, and create an instance in a section scoped to dark mode. This lets me see both modes, while actively maintaining one version.

Typography

One of the most tedious things to setup are text styles in Figma. My file has this taken care of, accounting for most html text sizes, with a few display options to add variety. When setting new type, I tend to use Batch Styler to adjust multiple text styles at once.

Aspect ratio images

Images can be frustrating to work with within Figma, especially using auto layout. I use a component from Vitalii’s community file. This component allows any image to resize in auto layout and maintain its aspect ratio. This is massively helpful for me, since I put most everything in auto layout.

Starter components

I have a set of components that are common in my design work. My current list is:

• Buttons
• Blockquote
• Code blocks
• Image
• Divider

Figma community

I keep a version of my starter file published on Figma community. In the future, I plan to add more capabilities, components, and more robust figma variables.