Theemo Token Suite
Replies: 2 comments 3 replies
-
|
Ah, that's the new Figma grids? I haven't seen them myself in code yet. Best I can say is the Figma developers site: https://www.figma.com/developers Plugin API and REST API are very similar. What you access through the Rest API is much likely to be similar to the Plugin API, checking back and forth can help. Yeah might be, that my Figma Parser doesn't have support for that, since the parser is older than this feature. I have a question though: If I'm not mistaken, this all references a variable? Then you can access that through the Theemo hooks, no? What info you need, that you can't find elsewhere? |
Beta Was this translation helpful? Give feedback.
-
In this case each one is a one column grid that references a max width variable.
Do you mean the That's where I'm at. But i feel like the I'm thinking that a way to access a map of variables would be very useful to the extendable parser config.
All of this seems like something that the theemoPlugin already does, but doesn't expose this resolved list of variables downstream.
Perhaps this illustrates the problem space more? import * as Figma from "figma-api";
declare module "@theemo/tokens" {
type GridValue = {
offset: ReferenceValue<Figma.LayoutGrid["offset"]>;
count: ReferenceValue<Figma.LayoutGrid["count"]>;
alignment: ReferenceValue<Figma.LayoutGrid["alignment"]>;
gutterSize: ReferenceValue<Figma.LayoutGrid["gutterSize"]>;
sectionSize: ReferenceValue<Figma.LayoutGrid["sectionSize"]>;
};
interface TokenTypeRegistry {
Grid: GridValue;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
It might also be useful to us if we could import the rest of the private pure functions in |
Beta Was this translation helpful? Give feedback.
-
|
Traversing through the grid is finding a variable applied. That's a use-case scenario for a designer, but usually Theemo shall have no interest in that. Seems like some step before went wrong. Here is the responsibilities and their hooks
Basically, since you are having a variable already, I wouldn't see a need to parse through Figma's design - but rather look where your variable got lost 😅 Figma allows you to publish variables (or hide them). For styles it allows you to keep them unpublished if the name starts with a Here is the two hooks for that: The variable you are looking for might be hidden? But I re-checked your repo, you set this to |
Beta Was this translation helpful? Give feedback.
-
|
Another thing to consider: Expose Grid styles in the theemo plugin UI. It currently only lists Colors, Text and Effects. If it could list
note that the type is ...
//#endregion
//#region src/figma-styles.ts
function getTypefromStyle(style) {
const type = style.styleType;
switch (type.toLowerCase()) {
case "fill":
case "stroke": return "color";
case "effect": return "shadow";
case "text": return "typography";
case "grid": return "dimension";
}
return void 0;
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm trying to resolve the variable reference in this grid style without recreating the internals of
FigmaParser.parseStyle.I think my issue is that parseStyle ignores
key === 'grids'In the short term i'll probably clone the parser and add it as a third plugin
... sources: figmaReader({ secret: process.env.FIGMA_TOKEN, files: [process.env.FIGMA_DOCUMENT_ID], plugins: [theemoPlugin(), GridAwareParser()], ...What are the chances of accepting a PR that handles resolving references for grids?
figma node JSON dump
{ "id": "2628:1505", "name": "Grid", "type": "FRAME", "scrollBehavior": "SCROLLS", "boundVariables": { "itemSpacing": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "paddingTop": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "paddingBottom": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "rectangleCornerRadii": { "RECTANGLE_TOP_LEFT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "RECTANGLE_TOP_RIGHT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "RECTANGLE_BOTTOM_LEFT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "RECTANGLE_BOTTOM_RIGHT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" } }, "fills": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1197" } ], "strokes": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1201" } ], "layoutGrids": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1132" } ] }, "children": [ { "id": "2628:1506", "name": "max-w/lg", "type": "TEXT", "scrollBehavior": "SCROLLS", "boundVariables": { "fills": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1205" } ], "lineHeight": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" } ], "letterSpacing": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2320" } ], "fontWeight": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2313" } ], "fontFamily": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2306" } ], "fontSize": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2332" } ] }, "blendMode": "PASS_THROUGH", "fills": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 0.1921568661928177, "g": 0.2549019753932953, "b": 0.3450980484485626, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1205" } } } ], "strokes": [], "strokeWeight": 1, "strokeAlign": "OUTSIDE", "absoluteBoundingBox": { "x": 4287, "y": 308, "width": 58, "height": 16 }, "absoluteRenderBounds": { "x": 4287.716796875, "y": 310.84765625, "width": 56.080078125, "height": 11.73046875 }, "constraints": { "vertical": "TOP", "horizontal": "LEFT" }, "layoutAlign": "INHERIT", "layoutGrow": 0, "layoutSizingHorizontal": "HUG", "layoutSizingVertical": "HUG", "characters": "max-w/lg", "characterStyleOverrides": [], "styleOverrideTable": {}, "lineTypes": [ "NONE" ], "lineIndentations": [ 0 ], "style": { "fontFamily": "Menlo", "fontPostScriptName": "Menlo-Regular", "fontStyle": "Regular", "fontWeight": 400, "textAutoResize": "WIDTH_AND_HEIGHT", "fontSize": 12, "textAlignHorizontal": "CENTER", "textAlignVertical": "TOP", "letterSpacing": 0, "lineHeightPx": 16, "lineHeightPercent": 114.54138946533203, "lineHeightPercentFontSize": 133.3333282470703, "lineHeightUnit": "PIXELS" }, "layoutVersion": 4, "effects": [], "interactions": [] }, { "id": "2628:1507", "name": "Keyboard", "type": "FRAME", "scrollBehavior": "SCROLLS", "boundVariables": { "itemSpacing": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1155" }, "paddingLeft": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "paddingTop": { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2332" }, "paddingRight": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" }, "paddingBottom": { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2332" }, "rectangleCornerRadii": { "RECTANGLE_TOP_LEFT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1157" }, "RECTANGLE_TOP_RIGHT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1157" }, "RECTANGLE_BOTTOM_LEFT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1157" }, "RECTANGLE_BOTTOM_RIGHT_CORNER_RADIUS": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1157" } }, "strokes": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1201" } ] }, "children": [ { "id": "2628:1508", "name": "shift + G", "type": "TEXT", "scrollBehavior": "SCROLLS", "boundVariables": { "fills": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1205" } ], "lineHeight": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1112" } ], "letterSpacing": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2320" } ], "fontWeight": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2313" } ], "fontFamily": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2306" } ], "fontSize": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:2829:2332" } ] }, "blendMode": "PASS_THROUGH", "fills": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 0.1921568661928177, "g": 0.2549019753932953, "b": 0.3450980484485626, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1205" } } } ], "strokes": [], "strokeWeight": 1, "strokeAlign": "OUTSIDE", "absoluteBoundingBox": { "x": 4377, "y": 308, "width": 66, "height": 16 }, "absoluteRenderBounds": { "x": 4378.7109375, "y": 310.8828125, "width": 63.064453125, "height": 9.287109375 }, "constraints": { "vertical": "TOP", "horizontal": "LEFT" }, "layoutAlign": "INHERIT", "layoutGrow": 0, "layoutSizingHorizontal": "HUG", "layoutSizingVertical": "HUG", "characters": "shift + G", "characterStyleOverrides": [], "styleOverrideTable": {}, "lineTypes": [ "NONE" ], "lineIndentations": [ 0 ], "style": { "fontFamily": "Menlo", "fontPostScriptName": "Menlo-Regular", "fontStyle": "Regular", "fontWeight": 400, "textAutoResize": "WIDTH_AND_HEIGHT", "fontSize": 12, "textAlignHorizontal": "CENTER", "textAlignVertical": "TOP", "letterSpacing": 0, "lineHeightPx": 16, "lineHeightPercent": 114.54138946533203, "lineHeightPercentFontSize": 133.3333282470703, "lineHeightUnit": "PIXELS" }, "layoutVersion": 4, "effects": [], "interactions": [] } ], "blendMode": "PASS_THROUGH", "clipsContent": false, "background": [], "fills": [], "strokes": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 0.7921568751335144, "g": 0.8352941274642944, "b": 0.886274516582489, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1201" } } } ], "cornerRadius": 8, "cornerSmoothing": 0, "strokeWeight": 1, "individualStrokeWeights": { "top": 1, "right": 1, "bottom": 2, "left": 1 }, "strokeAlign": "INSIDE", "backgroundColor": { "r": 0, "g": 0, "b": 0, "a": 0 }, "layoutMode": "HORIZONTAL", "counterAxisAlignItems": "CENTER", "primaryAxisAlignItems": "CENTER", "paddingLeft": 16, "paddingRight": 16, "paddingTop": 12, "paddingBottom": 12, "layoutWrap": "NO_WRAP", "absoluteBoundingBox": { "x": 4361, "y": 296, "width": 98, "height": 40 }, "absoluteRenderBounds": { "x": 4361, "y": 296, "width": 98, "height": 40 }, "constraints": { "vertical": "TOP", "horizontal": "LEFT" }, "layoutAlign": "INHERIT", "layoutGrow": 0, "layoutSizingHorizontal": "HUG", "layoutSizingVertical": "HUG", "effects": [], "interactions": [] } ], "blendMode": "PASS_THROUGH", "clipsContent": true, "background": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 1, "g": 1, "b": 1, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1197" } } } ], "fills": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 1, "g": 1, "b": 1, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1197" } } } ], "strokes": [ { "blendMode": "NORMAL", "type": "SOLID", "color": { "r": 0.7921568751335144, "g": 0.8352941274642944, "b": 0.886274516582489, "a": 1 }, "boundVariables": { "color": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1201" } } } ], "cornerRadius": 16, "cornerSmoothing": 0, "strokeWeight": 1, "strokeAlign": "INSIDE", "backgroundColor": { "r": 1, "g": 1, "b": 1, "a": 1 }, "layoutGrids": [ { "pattern": "COLUMNS", "sectionSize": 512, "visible": true, "color": { "r": 1, "g": 0, "b": 0, "a": 0.30000001192092896 }, "boundVariables": { "sectionSize": { "type": "VARIABLE_ALIAS", "id": "VariableID:309:1132" } }, "alignment": "CENTER", "gutterSize": 0, "offset": 0, "count": 1 } ], "styles": { "grid": "2628:1466" }, "layoutMode": "HORIZONTAL", "itemSpacing": 16, "primaryAxisSizingMode": "FIXED", "counterAxisAlignItems": "CENTER", "primaryAxisAlignItems": "CENTER", "paddingTop": 16, "paddingBottom": 16, "layoutWrap": "NO_WRAP", "absoluteBoundingBox": { "x": 3716, "y": 280, "width": 1314, "height": 72 }, "absoluteRenderBounds": { "x": 3716, "y": 280, "width": 1314, "height": 72 }, "constraints": { "vertical": "TOP", "horizontal": "LEFT" }, "layoutAlign": "INHERIT", "layoutGrow": 0, "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "effects": [], "interactions": [] }Beta Was this translation helpful? Give feedback.
All reactions