my-protfolio/resources/design-system/README-FIGMA-IMPORT.md

Portfolio design tokens for Figma

These files use Figma's Design Tokens Community Group (DTCG) JSON import format.

Recommended import order

1. In Figma, open the Variables view.
2. Create a collection named 01 Primitives, then import 01-primitives.json.
3. Create a collection named 02 Semantic, then import both 02-semantic-light.json and 02-semantic-dark.json together. Figma creates one mode per imported file; rename the modes to Light and Dark.
4. Create a collection named 03 Dimensions, then import 03-dimensions.json.
5. Create a collection named 04 Typography, then import 04-typography.json.
6. Create text styles manually using the imported typography variables. Figma imports the typography values, but it does not automatically create complete text styles.

Important

The semantic color files contain resolved values so they import reliably. After importing, you may replace those values with aliases to matching variables in 01 Primitives (for example, text/primary → blue/700). Do this only after confirming the variable names in your Figma file.

Do not import the Light and Dark semantic files into two separate collections. Import them together into the same collection so they become two modes.

Starter-plan workaround

Starter does not include variable modes. Import 02-semantic-light.json into a collection named 02 Semantic — Light, and import 02-semantic-dark.json into a separate collection named 02 Semantic — Dark. Apply the Light collection to the light desktop frame and the Dark collection to the dark desktop frame. The variables still work, but you will not have a single Light/Dark mode switch.