Skip to content

refactor(db-logo-importer): replace height variable binding with fix height #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leape wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(db-logo-importer): replace height variable binding with fix height #521

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 13 additions & 15 deletions packages/db-logo-importer/plugin/utils/variablesBinder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { CONFIG } from "../config";
export function bindFillVariable(
component: ComponentNode,
layerName: string,
variable: Variable
variable: Variable,
): void {
const target = component.findOne((node) => node.name === layerName);

Expand All @@ -22,7 +22,7 @@ export function bindFillVariable(
const paint = figma.variables.setBoundVariableForPaint(
{ type: "SOLID", color: { r: 0, g: 0, b: 0 } },
"color",
variable
variable,
);

target.fills = [paint];
Expand All @@ -37,28 +37,26 @@ export function bindFillVariable(
async function importVariables(): Promise<{
dbLogo: Variable;
logoAddition: Variable;
componentHeight: Variable;
}> {
const [dbLogo, logoAddition, componentHeight] = await Promise.all([
const [dbLogo, logoAddition] = await Promise.all([
figma.variables.importVariableByKeyAsync(CONFIG.keys.dbLogo),
figma.variables.importVariableByKeyAsync(CONFIG.keys.logoAddition),
figma.variables.importVariableByKeyAsync(CONFIG.keys.componentHeight),
]);

return { dbLogo, logoAddition, componentHeight };
return { dbLogo, logoAddition };
}

/**
* Binds design system variables to component layers and properties
* - Binds color variables to "DB Logo" and "Logo Addition" layers
* - Binds height variable to component and SVG Container
* - Locks component and SVG Container aspect ratio
* - Sets fixed height of 24px to component and SVG Container
* - Locks component aspect ratio
*
* @param component - The component to bind variables to
* @throws Error if variables cannot be imported or bound
*/
export async function bindDesignVariables(
component: ComponentNode
component: ComponentNode,
): Promise<void> {
try {
const variables = await importVariables();
Expand All @@ -67,16 +65,16 @@ export async function bindDesignVariables(
bindFillVariable(component, "DB Logo", variables.dbLogo);
bindFillVariable(component, "Logo Addition", variables.logoAddition);

// Bind height variable to SVG Container
// Set fixed height to SVG Container
const svgContainer = component.findOne(
(node) => node.name === "SVG Container"
(node) => node.name === "SVG Container",
);
if (svgContainer && "setBoundVariable" in svgContainer) {
svgContainer.setBoundVariable("height", variables.componentHeight);
if (svgContainer && "resize" in svgContainer) {
svgContainer.resize(svgContainer.width, 24);
}

// Bind height variable to component and lock aspect ratio
component.setBoundVariable("height", variables.componentHeight);
// Set fixed height to component and lock aspect ratio
component.resize(component.width, 24);
component.lockAspectRatio();

component.constraints = {
Expand Down