Amirhossein Khalili
75c9a62b37
Capture the portfolio source, design references, and production assets with repository-specific ignore rules.
23 lines
1.6 KiB
Markdown
23 lines
1.6 KiB
Markdown
# 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.
|