Added fields with icons

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

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

Taking a brief detour before really starting on typography

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

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

Sixth day of color. A short one. Batch created the styles

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

Messing around with dialog variations

Alert / toast variations

Expanded the set

Messing around with images for the readme

No focus or energy today. Fixing icons, the running the outline.

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

Futzing around with pagination

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

Organizing the index/overview

Adding another icon/button size…

Scattered updates

Small update to View & Navigation → Steps

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.

Slow, but steady

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.

Started on basic calendar/event components

More scattered work. More cleanup.

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

Mocking up more compound components. Text field with a dropdown.

Revised 'special fields' and calendars

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)

More minor Auto Layout updates. 1 fewer layers, less fuss

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

Every basic component will be tested in a bunch of common examples

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

Slow day. Continued organizing the file and making the ToC

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.)

Small breadcrumb improvements

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.

Alt date picker and a time picker

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

More table cell types

Slowly turning more things into variants

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.

Adding small details. Gotta save longer sessions for the workweek.

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

Disclosure/icon list items

Roles and their contrast requirements

Floating stepper

Large option buttons

More table cells

Disclosure items to match the toggle items

Rough planning for variants

Website roughs

Weirdo covers

Tooltips! 2 components, 6 variations each. Pretty compact

Making covers instead of working

Assorted covers

Slogging through fields

Okay. I’ll just copy what GitHub’s Primer does

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

More calendar stuff. Date range

More multi-select stuff.

Multiselect thingies

More Covers

The kbd tag

More styles and components

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()
    }
  })

})

Tiny outpu

Variations: CTAs inside alerts

More pagination

Project snapshot

Grid styles

Added 3 new calendar components

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