Icon
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
141 entries
First: Apr 30, 2020
1 contributor
norton
I’ve been thinking about this… And I sti...
internetvin
Link to more work?
internetvin
Nice! Really curious to see this part de...
internetvin
Pretty neat! Thanks for sharing :)
internetvin
I love this journal lol - I've always wo...
internetvin
It's so insane how much work goes into t...
internetvin
It's super cool to see the level of deta...
internetvin
I checked that stuff out it's super tigh...
internetvin
Nice. What’s your thoughts on the end st...
internetvin
Nice!
norton
@internetVin Yeah, I’ve been putting off...
internetvin
Pretty cool that you still got something...
internetvin
What else are you working on right now?
ethan
@norton i think if someone had commented...
ethan
Love that the link for this journal is t...
internetvin
It's really coming along. Cool to see yo...
internetvin
yeah I'm learning a lot just observing a...
internetvin
lol I have so much to learn about interf...
internetvin
@norton, I'll share more about restructu...
Third Lunation
Second Successful Lunation
First Successful Lunation

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.

2

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 : /

4

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

1

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

3

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…

1

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

1

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

1

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

1

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

2

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

1

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.

Covers

(Draft)

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.

1

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.

6

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

Tools
- 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){
      localPaint.remove()
    }
  })

})

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
  grid64
  
*/

let defaultGrid = {
  pattern: "COLUMNS",
  visible: true,
  color: {
    r:1,
    g:0,
    b:0,
    a:0.10000000149011612
  },
  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
  h3
  field name
  field email
  button.primary

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

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

Shadows

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

00:00
norton
norton Design System Starter Kit