Michael Mangialardi
@michaelmangial1
Christian | Frontend Engineer | Design Systems Engineer. š Author of āDesign Systems for Developersā and "Rethinking Agile"
3 Types of Work for Web Developers to Specialize In
Thread: You're no longer a junior developer, so what type of role do you take on next?
Generally, there are 3 types of work for a web developer:
1) Stream work - Creating new features on a product or API service
2) Platform work - Keeping up a platform via bug fixes, CI/CD, dependency upgrades, etc.
3) Enabling work - Specialized work to bring code to an ideal
Figma Tokens Pipeline: A Professional Use Case
Here's how I'm using Figma Tokens in a professional use case:
ā
Allow designers to update design tokens in Figma rather than GitHub
ā
Open a PR when changes in Figma are finalized
ā
Have developers subscribed to repo to get notified of a new release
ā
Allow developers to provide input, finalizing the tokens "contract"
ā
Use the tokens synced from Figma as the "raw"/base tokens in the Style Dictionary pipeline
ā
Use GitHub actions to build the new "formatted" tokens when the PR initiated from Figma is merged
An Easy System for Being Productive
Here's my system for being productive:
- Capture seasonal projects/goals
- Create a kanban board of tasks for the week
- Pull tasks to a todo list for the day
- Distinguish stretch goals from musts
- Carry over incomplete tasks to the next day
- Track tasks that crept up
Interestingly, I recently found there's a product similar to this system: ugmonk.com/ *
* Not an affiliate link
Using Tools (Like Tailwind) to Generate Tokens More Quickly
Iāve previously written about how you can start a design tokens pipeline by building our ārawā tokens in Style Dictionary and formatting them for various platforms. Then, you can build a Tailwind config (for example) off of that.
But, can you change that order?
The theory behind having raw tokens that can be formatted (via Style Dictionary) is that it you can expose primitive tokens that can be consumed by any platform before you develop more sophisticated assets.
A Backwards Design Tokens Pipeline: Generating Tokens From React (An Experiment)
Here's an idea that I'm currently developing...
A @storybookjs addon that extracts the Style Dictionary-friendly design tokens out from the current story.
Here's why this is helpful:
Creating Tokens After a React UI Library
I often hear the following objections to building a design-tokens based design system:
1. Weāre only concerned with a React UI library for now.
2. Whoās going to create the design tokens? Seems like more work.
In a word, how can we use design tokens when we donāt have the time?
I commonly emphasize the need for developers to take ownership of advocating for the usefulness of a design system and to start getting it off the ground with a POC: specifyapp.com/blog/becoming-a-design-tokens-ambassador
But, let me give an alternative answer.
Reverse Engineer a Design System
Problem:
There are no small amount of frontend engineers who would love to have a design system but designers are busy making prototypes for product workflows and havenāt organized a design system.
In such a scenario, what can you do?
Reverse engineer the design system.
Go over the prototypes that have been handed off to you from the designers.
Try to detect the patterns for colors, typography, spacing, etc.
Do your best to distinguish certain components that are generic enough for a design system.
The Intersection Between a Design Tokens Pipeline and Tailwind
What is the intersection between a design tokens pipeline (a la Style Dictionary) and @tailwindcss?
By transforming formated JS tokens into a Tailwind config, you can use Tailwind to compose your tokens easily via utility classes.
Even better...
Tailwind can fill in the gaps for "simple" tokens (i.e. colors, typography spacing) if your design system doesn't have one.
Should your design system become more extensive to include official spacing specs, then you override Tailwind with minimal changes to the dev experience.
Experimenting With Creating a Gatsby Blog from Twitter Threads
I created a @GatsbyJS source plugin that sources your latest threads from Twitter: github.com/michaelmang/gatsby-source-twitter-threads
Here's an example of using this in order to generate a blog:
github.com/michaelmang/gatsby-source-twitter-threads
There are some limitations as the Twitter API only returns the previous 7 days' worth of threads. However, I think there could be a workaround to use threads for a full-fledged blog source: github.com/michaelmang/gatsby-source-twitter-threads#limitations