What is Schemator?

Schemator is a lightweight yet powerful Figma plugin designed to enhance and standardize the schema of your components. By providing a flexible and structured schema, Schemator empowers you to streamline your design-to-code workflows and unlock new possibilities for automation.

What all can Schemator do?

• Consistent Naming - Establish a universal schema for component properties, promoting seamless collaboration and code integration across teams and projects.
• Predictable Structure - Adopt a familiar and logical naming convention, ensuring that components are intuitive to use and easy to extend.
• Sanitized Definitions - Enable customization by adding suffixes and prefixes to property definitions, giving developers the flexibility to tailor components to their specific workflows.

Note: The plugin only works with component and componentSet and not with instances.

Supported funcationalities

You can find all the supported constants in constants.ts

Cleanup

export const renameConditions = [
    { regex: /\b2xs\b/i, replacement: 'Extra Extra Small' },
    { regex: /\bxs\b/i, replacement: 'Extra Small' },
    { regex: /\bsm\b/i, replacement: 'Small' },
    { regex: /\bs\b/i, replacement: 'Small' },
    { regex: /\bmd\b/i, replacement: 'Medium' },
    { regex: /\bm\b/i, replacement: 'Medium' },
    { regex: /\blg\b/i, replacement: 'Large' },
    { regex: /\bl\b/i, replacement: 'Large' },
    { regex: /\bxl\b/i, replacement: 'Extra Large' },
];

Currently there is regex added for renaming tshirt sizing to be formatted, feel free to add your own regex too.

Sanitization

export const booleanCustom = {
    prefix: '',
    suffix: '?'
};
export const textCustomSuffix: ' text' | ' string' = ' text';
export const casingStyle: 'title' | 'upper' | 'lower' | 'sentence' | 'camel' = 'title';
export const includeStringDefaults = true;

Give custom prefix and suffix for boolean and text type properties, you can also mark includeStringDefault=false if you dont wish to expoert the string prop type entered value from Figma.

Example component and schema

Below is a sample shown of the component prop definition in Figma and the generated JSON from it.

{
  "selectChips": {
    "name": "Select Chips",
    "nodeType": "componentSet",
    "nodeId": "155:337",
    "selectChipsProps": {
      "size": {
        "dataType": "variant",
        "defaultValue": "medium",
        "variantOptions": ["medium", "small"]
      },
      "chipCount": {
        "dataType": "variant",
        "defaultValue": "1",
        "variantOptions": ["6", "5", "4", "3", "2", "1"]
      },
      "helperText?": {
        "dataType": "boolean",
        "defaultValue": true
      },
      "helperText": {
        "dataType": "string"
      },
      "errorText": {
        "dataType": "string"
      },
      "errorText?": {
        "dataType": "boolean",
        "defaultValue": false
      }
    }
  }
}

Contribution

Feel free to submit a pull request if you'd like to contribute 🤝🏼