figma-inspector: initial docs for the variables export files #8326
Conversation
szecket
force-pushed
the
szecket/push-xmylpukmutxp
branch
4 times, most recently
from
6cd26fb to
caad4a3
Compare
| import { Tabs, TabItem } from '@astrojs/starlight/components'; | ||
| import LangRefLink from '/src/components/LangRefLink.astro'; | ||
|
|
||
| ## Setting up the Figma Inspector |
There was a problem hiding this comment.
Perhaps before setting up, there could be an intro section that briefly explains what the problem space is and what our solution roughly entails?
After that, a section that explains how to set up the inspector makes sense.
| First of all, find and enable the "Figma to Slint" plugin in the Figma Plugin Manager. | ||
| The inspector currently has 2 functions. One is to inspect individual Figma objects for their properties, and the other is to export the variables defined in Figma so they are useable in Slint directly. | ||
|
|
||
| ## Key Features of Variable Export |
There was a problem hiding this comment.
This looks a little like a "marketing brochure" to me. I suggest to break this down into sections, perhaps with groups?
For example, how we map figma variable types to Slint types is IMO best represented using a table, instead of just one sentence.
We have a similar scenario with the Rust code that we generated from Slint files, and besides an overview explanation, we also provide an example of how the generated code looks like (in structure, not content). Perhaps the same could be used here. ("Suppose the following variables in figma , we generate the following Slint code")
| ## Naming Conventions & Sanitization | ||
|
|
||
| - **Hierarchy:** Figma uses / in variable names (e.g., `radius/small`, `font/body/weight`) to create nested Slint structs. | ||
| - **Sanitization:** Collection names, variable names (path segments), and mode names are automatically sanitized: |
There was a problem hiding this comment.
Perhaps this section would benefit from examples (after listing the rules).
| - **Single File:** Combines all collections into a single `design-tokens.slint` file. This is also the fallback if dependency cycles are detected. | ||
| - **README Generation:** Creates a `README.md` file alongside the export, summarizing exported collections, renamed variables, detected circular references, and warnings. | ||
|
|
||
| ## Usage |
There was a problem hiding this comment.
This section would greatly benefit from screenshots, I think. We're in the Guide part of our documentation, a visual guide with screenshots would probably work wonders and be a little advertisement :)
szecket
force-pushed
the
szecket/push-xmylpukmutxp
branch
from
57bd755 to
e1222e2
Compare
szecket
force-pushed
the
szecket/push-xmylpukmutxp
branch
from
a95e2b4 to
df90da8
Compare
szecket
force-pushed
the
szecket/push-xmylpukmutxp
branch
from
b2a9229 to
9911bd5
Compare
| - Names starting with a digit are prefixed with `_` or `m_`. | ||
| - Any variable named exactly `mode` at the root of a collection is renamed to `mode-var` in the Slint output to avoid conflicts with the generated scheme `mode` property. | ||
|
|
||
| #### Example |
There was a problem hiding this comment.
The indentation looks off here :)
| #### Example | |
| #### Example |
| import { ExportType, useInspectorStore } from "./utils/store"; | ||
| import DialogFrame from "./components/DialogFrame.js"; | ||
| import { Text, Button, Checkbox, DropdownMenu } from "figma-kit"; | ||
| import { Button, Checkbox, DropdownMenu, Text } from "figma-kit"; |
There was a problem hiding this comment.
The changes in this file look unrelated
2 participants
No description provided.