Design System Starter Kit
Build a library of flexible and un-styled components to start or supplement design system projects. Anyone can jump in the file below
178 entries
First: Apr 30, 2020
1 contributor
Super cool. Would love to see some kind ...
this is looking very clean man
No worries lol. San Diego
lol emoji translates to 'cleaned or appl...
Congrats on the 100th day! It will be ...
I’ve been thinking about this… And I sti...
Everything this guy Rasmus makes is awes...
Nice! Really curious to see this part de...
I don’t know… In general, I just pay att...
I love this journal lol - I've always wo...
It's so insane how much work goes into t...
It's super cool to see the level of deta...
Right now, not really. I haven’t updated...
Nice. What’s your thoughts on the end st...
Making gradual progress. Can you share a...
Pretty cool that you still got something...
What else are you working on right now?
@Norton definitely am. So is @luke_. And...
Love that the link for this journal is t...
It's really coming along. Cool to see yo...
yeah I'm learning a lot just observing a...
@internetVin lol me too. (I didn’t study...
@norton, I'll share more about restructu...
100 Days in a Row
Third Lunation
Second Successful Lunation
First Successful Lunation

Rest day. Added a few more interactions. Gotta carve out some time to go through the playground/tutorial file

Rest day. Added the most basic interactivity to some components. I’m going to gather all the interactive components in this 'prototype'

Reattached some components. Started working not the color snapper script, but hit some snags

Applied some color styles. This is maddening. I’m going to revise the color snapper script (006) so it iterates over all the descendants of the the nodes in a selection

Not 100% sure how to best organize the type styles. I’ll have to take a look at other projects/files

Short session today. Made more alerts

Comments on Figma Community files just got rolled out today. Wondering If I should just add a "WIP" badge to the cover and then publish it tomorrow instead of March 9

Made another alert. I should write a script to change the tone or color scale for every descendant in a selection. I might even have it lying around somewhere.

The format for color names is "tone / index - role", e.g "Positive / 05 - AA Text"


Fixed the header and made it a component. Getting ready to fold in the multi-month variants

Added a time property to the Calendar component group, which should probably be named something else

Also, that nesting on Friday was probably a mistake, so I removed it

- More applying color and type styles
- Replaced instances of deleted components
- Made the calendar components easier to change—the calendar inside the variant to the right is an instance of the variant to the left, so any changes will appear in all the different variants

- Status indicator dropdwon item
- More applying color and type styles
- Layout improvements to calendar component
- Make a little illustration to show how to nest things with rounded corners


- Notes
- Validated dropdown that’s not part of the main component

- Applied color and text styles

The first decent session in a couple days. Got a little bit of everything done.

- Documentation component
- Validated field and textarea that’s not part of the main component

- Applied color and text styles
- Component properties and values
- Some icons

Using the color snapper script to make sure everything’s using the color styles

Found some little things I overlooked, e.g. it overlooks the visible and opacity properties in a fill


13,763 → 13,195

The difference between something that’s good enough for you to use and something that’s good enough to let strangers use is stark and kinda hilarious


Not a terribly interesting day… Lots of tidying up. I should have done more of this as I went, lol.

Misc numbers…
- This is the 100th day in this streak…
- There are 43 days left until March 9, the tentative publish date
- The file has 16,924 layers. I’m looking forward to watching this number drastically drop . I wish I had started logging this earlier.
- Work has agreed to subsidize more of this project. Going forward, I should be able to log ~4–6 hours a week

Short session
- Deleted and old version of the tabs component. Misc cleanup
- Moved some stuff out of the 'Core Components' frame

I need to restructure this file…

When I started it last March, it made sense to break up the master components into different pages, but also keep copies of everything in like an index page so people could see everything at once.

Since then, new features have shipped and this structure isn’t super necessary. So right now this file is almost twice as large as it needs to be. I need to move the masters to the main page and delete all the copies

It’s also become clearer that the ideal way to use this file is to grab only the component or handful of components you need, move them over to your file or design system, then change them to fit your context.

Copying the entire file and restyling it is definitely not the move.

As for ‘real' work done today, I just deleted a bunch of stuff and styles.


Created separate text styles for content. The line-heights are rounded to multiples of 2, not 8 like the text styles for ui

Renaming layers. Strangely calming. If I had a screen that didn’t emit light I would totally do this to fall asleep

Auto layout has padding, but not margins so sometimes you have to put something in a container : /


Misc. thoughts

I think I’m going to separate type styles into two groups
- Standard type sizes
- Specific roles e.g. 'table header'

I should have 1 or two standard line-heights. Then clamp things down to a multiple of eight. This is what Figma does in UI2.

I’m using Inter for everything, so I’ll use it’s tool to get the right tracking

Got an early start but still managed to procrastinate. Getting familiar with a plugin called Smart Text that makes documenting things way easier


Tiny start on the typography section. Tiny script to make the layer name and text the name of the text style used

Created an 'Inbox' page to put stuff I want to extract from the day job, but don’t necessarily want in the starter kit

Figma doesn’t let you set individual borders (smh), so I’m faking it with shadows with no blur and saving those as Effect Styles

I misremembered making these correctly. They’re actually not consistent. Gotta fix this before making the script


Working on shadows next. This shouldn’t take long. I’m only gonna make 4 levels, 3 of which have already have specific role. And they’re not super complicated or layered.

I think a good shadow is made of 2 shadows
1. A small one to define/outline the shape
2. And a larger, softer one that that has an offset to create some depth

I think the main challenge here is: making it easy for someone to adjust and add steps. I think I could write some simple rules/instructions for doing this manually, then write a script later.

I wrote a script a while back to batch change the color of shadows. I should add to this…


Yikes, this is dragging on and on…

I’ve finished the test layers and now I’m gonna leave this alone for at least a few days


Seventh day of color. I should have started with a bunch more test layers. They’re way more informative than just squares. I’m going to pause work on color and move on to other parts of the project

I still need to do more testing, tweaking, and note writing, but everything "works"

Snapshot before creating the final styles, cleaning up the section. and writing the readme notes

A solid hour of working on color. The process is a little frustrating. The tools are so much better than they were a few years ago but… even with all the tools I’ve chained together, including the modest ones I’ve made, I still feel like I’m moving at a tenth of the speed and 90% of what I’m doing is busy work a computer should be handling

A little bit more color work. Night shift has gotten too strong, so I need to move on to something else tonight


Revising colors…

Trying to get the entire process in the screenshot, so this isn’t what it actually looks like, =

1. Set the general feeling in ColorBox
2. Use Leonardo to get colors at the exact contrast ratios
3. Add the colors to Figma
4. Create color styles and test

Color is the first thing I need to tackle when I get large blocks of time to work on DSSK

Another short day:

1. Updated some icons across the project that got their color overrides lost when I outlined the icons a few days ago
2. Turned misc non-components into component instances with the Master plugin

Okay, keeping these icons as strokes was a mistake, even though I flattened each icon to a single vector/layer. Wrote a tiny script to outline the strokes in bulk.

They’re a nice set of icons


Revised the sample tables. Moved the checkboxes. added pagination, added actions that appear when rows are selected

Super brief session. 5m of working on on collapsible sidebar components.

Will try to continue tonight


More diffuse work. Can’t wait until pre-holiday crunch time is over and I can carve out longer work sessions


Couldn’t get around to making more calendar components. Started noodling around with a simple script to make mocking up any given month less of a drag.

Not a lot of time today, or lately. Got to make a few more calendar bits

We’re working on a redesign of a booking tool at work, so I’m gonna spend the next week or so "un-styling" the components we make and adding them to DSSK.

Mostly small scattered stuff today
- Deleted a bunch of button variants that Auto Layout 3 has made redundant. 72 → 36
- Made a "Font Awesome backfill" component
- Made a tiny horizontal rule and tested some more common patterns

Adding AL v3 to all the inputs. No visible changes, but they’re a bit more flexible when things wrap and you can change the padding/spacing in instances

Trying to put together color scales bu starting with these required contact ratios and building around them. I’m using this tool called Leonardo to place some steps between the bottom of the range ~1.05 and the first required contrast ratio. Not sure how the tool is doing this or what the pattern here is, but I’ll use it for now. then maybe reference some other color scales

- AAA Normal Text (7:1)
- AA Normal Text (4.5:1),
- AA graphics and ui components (3.1)

Adding Auto Layout v3 stuff all month. Almost none of this will be visibly different. Going to try to mix in some stuff that couldn’t be made with previous versions of auto layout. e.g. stuff with different padding values

Updating components with the new Auto Layout features that were released today. E.g. you can now resize frames on the main axis

Snapshot of (most of) the project.

Work was scattered today. More converting stuff to variants.

Slow day today. Revised test fields, textareas, dropdowns, and 'special fields' with leading text/icons

In addition to the basic components, it would be good to also have the most common combinations. This helps 1) test the how well the basic components work together and 2) provides a good reference for people using the library

Slowly resuming writing and designing the website.

There’s a baseline grid, but aligning to them like you would in print isn’t really feasible. They’re still useful for getting a vertical rhythm though. Make the line-height (24px) a multiple of the baseline (8px), then make the spaces between stuff a multiple of the line-height. (48, 96, etc.)

More date picker improvements

At the moment, the date shortcuts are buttons. You click on a shortcut, then it selects the date(s) and closes the calendar. Thinking these should be tabs instead. You click on a shortcut to select the date(s), but instead of closing the calendar the tab becomes active.



After the first release, this’ll continue being an ongoing project. I see it slowing down, but never actually ending. I like the idea of having a different cover (e.g.) every month. They’d be a fun way to denote when a particular version of the file is from, and they’d be the one part of this project where utility isn’t a concern.

For the first year or so, I’ll use colorways of the “cubes” cover. They’re pretty easy to make:

1. Choose a background color.
2. Make the line-work cubes the background color, but change the blend mode to ‘Multiply’

The hard part’s choosing the background colors. I don’t want them to be arbitrary. They should relate to the project, even if only tenuously.

Because it’s what I prefer, and because it’s what we use at work, this project is, and will ultimately be, a Figma file. That’s a good place to start. I think it would be cool to pull colors from the UI before moving on to more obvious colors, or more esoteric colors.

I think I’ve settled on the first four colors/covers:
1. #00a1ff (Blue), from the selection bound of a regular object/layer
2. #7b61ff (Purple), from the selection bounds of a variant or component
3. #e249af (Pink), from the smart selection overlays
4. #e5e5e5 (Light gray), from the default canvas background

I’m still slowly turning components into variants…

I need to speed things up a bit. I’m presenting at a side project showcase zoom call and, although my presentation’s more about the process (work on it every day for ~30 days; post to FL), it would be good to have something ‘complete’ and shareable

More importantly, the sooner I can get his in front of people that can test it and give me feed back the better

Next steps

- Wrap up the transition to variants
- Make v1 of the color system and styles
- Add auto layout v3 features wherever it makes sense. (Auto layout v3 should be launching this month)
- Writ a ToC and readme
- Throw together a website, which will probably just be loose port of the ToC and readme
- Publish the file to the Community

More work on tables
- Headers for sortable columns need 3 states: Ascending, descending, and a default state that indicates they can be sorted.
- The page, frame, and any 'slash naming' determine what the assets panel looks like. Gotta keep things sane.

So here’s an instance where some things don’t slot perfectly into variants.

I have 2 properties: Day and Selected. Toggling Selected on, changes the Day property to Selected Day. Changing the Day property to anything other than Selected Day toggles the Selected property off

Nothing’s broken, but this doesn’t feel quite right.


I need to avoid making a ton of variants.

Here, instead of making "Label" and "Label + helper text" variants of text fields, textareas, and dropdowns, you can just instance swap what’s inside the "Label" and "Label + helper text" components.

We’ll see if this ends up being the best approach

The variants feature is new and still in flux. They made a change last night and now text overrides will be preserved, even if the components in the set have different text.


More converting things to variants.

Apparently, text changes don’t get preserved unless the components in the set all have the same text.

Variants launched today. Time to start slowly porting everything over…

Looks like I’ve hit the private posts limit…

Hello world

ColorBox by Lyft Design

Colorbox is a color tool to produce color sets.

Wondering about color…

Required contrast ratios
- Graphics & UI: 3.0
- AA: 4.5
- AAA: 7.0

Non-critical elements
- Very light background: 1.06
- Keyline: 1.11
- Light background: 1.2
- Darker border 1.6

Base/bg colors
- #FFF
- Very light bg
- Light bg

Color Scales
- Text
- Main color
- Info
- Positive
- Caution
- Critical
- Promote

- Colorbox to create the general feeling
- Leonardo to set the final colors using the hexes brought in from Colorbox

Learning about some new features that’ll require some some changes to DSSK
- Watched Config videos about Variants and Auto Layout v3
- Read a help article about Variants

…And we’re back.
Breadcrumbs. Should the divider be its own component or part of the Page component?

On no!

I worked on the project yesterday, but forgot to post.
Styles and components for articles, etc.
Basically cover everything in the Markdown spec

Tangentially related scripts

Glued together the "Batch Create/Update Local Styles" script and the "Color Stepper" script.

Batch Delete (Local) Color Styles

let node = figma.currentPage.selection[0]
let nodes = figma.currentPage.selection

nodes.forEach (node => {

  let localPaints = figma.getLocalPaintStyles()

  localPaints.forEach (localPaint => {
    if(localPaint.name === node.name){


Out of scope?

A test corpus thingy for articles/markdown.

- Headings
- Paragraphs
- Lists
-Dates and bylines
- Pull quotes
- Images & captions

And so on…

Keep writing the description

A Figma-first component library to kickstart or supplement design system projects.

The starter kit should be

- Minimal
- Flexible
- Systematic

Concrete goals

- Compact layer lists and layer names
- Don’t use the layer list to change state
- Build for instance swapping
- Use pages and frames to create related instances
- Use the tool—not shared context—to enforce convention
- Auto Layout, guides, text cse
- Create a library, not a framework. More context

Write the description

DSSK is a Figma-first component library to start or supplement

Concrete goals

- Compact layer lists and layer names
- Build for instance swapping
- Use the tool—not shared context—to enforce convention
- Create a library, not a framework. More context

Grid Buddy

/* Grid Budddy

Notation examples
  cols3 gutter0 margin0
    c3 g0 m0

let defaultGrid = {
  pattern: "COLUMNS",
  visible: true,
  color: {
  gutterSize: 0,
  alignment: "STRETCH",
  count: 1,
  offset: 0,

Idea: composer

- Dragging components onto the canvas is slow
- Making a component for every common grouping isn’t a good solution

Something like Emmet for placing and nesting components

vstack width320
  field name
  field email

hstack 0 0 8
  tag "design"
  tag "code"
  tag "books"

Some components (tabs) look almost identical to other components (dropdown items)


Problem: editing shadows is a drag, especially if the shadow style contains multiple shadows

// Set shadow colors 

let node = figma.currentPage.selection[0]
let nodes = figma.currentPage.selection

function clone(val) {
  return JSON.parse(JSON.stringify(val))

const baseColor = findOne (swatch =>
  swatch.name === "shadowColor"

nodes.forEach (node => {
  let newEffects = clone(node.effects)
  newEffects.forEach (effect => {
    effect.color.r = baseColor.fills[0].color.r
    effect.color.g = baseColor.fills[0].color.g
    effect.color.b = baseColor.fills[0].color.b
  node.effects = newEffects

Split button
- Enforce sentence a case?

The project as a whole
- Rummage through old files? Try to extract general components from stuff that was actually born of out some immediate need?
- What am I actually most likely to need in the future?

Hello world

More background on the project as a whole later

For now here are some buttons I’ve been slowly working on.

Things to consider
- How to best use Auto Layout
- What to name the components themselves—and how to these names affect instance swapping when people finally start using it… Who will use it and for what
- What to name the layers inside

norton Design System Starter Kit