First 'Internal Friday'
100 Days in a Row
Third Lunation
Second Successful Lunation
First Successful Lunation
Made the journal public
📐

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
229 entries
Started Apr 30, 2020
norton

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