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

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"
00:00
norton
norton Design System Starter Kit