DataFlow Designer for Figma

Description

DataFlow Designer is an interactive widget for Figma that allows users to design and modify data table structures directly within Figma. This widget makes it easy to create and customize tables with support for multiple data types and style customizations.

Features

• Table Structure Editing: Enables users to define and modify table and column names, data types, and descriptions.
• Data Type Support: Supports various data types including string, number, boolean, date, object, array, function, undefined, and null, each with a distinctive color.
• Style Customization: Users can adjust the widget size and header color for better integration with their design.
• Intuitive User Interface: With a clear layout and easy navigation, users can effortlessly add, delete, and modify columns.

Installation and Usage

To use DataFlow Designer in Figma:

1. Ensure you have access to Figma and the necessary permissions to install widgets.
2. Add the widget to your Figma project.
3. Interact with the widget on your Figma canvas to start designing your data structures.

Development

This widget is built using the Figma widgets framework and JavaScript/TypeScript. To contribute or modify the widget:

1. Clone the repository.
2. Install dependencies with npm install.
3. Make your changes in the source code.
4. Use npm run build to compile your changes.
5. Test your changes in Figma.

Available Scripts

In the project directory, you can run:

npm run build

Compiles the widget and generates the dist/code.js file.

npm run watch

Watches for file changes and automatically compiles during development.

npm run lint

Runs ESLint to identify issues in the code.

npm run lint:fix

Automatically fixes issues identified by ESLint.

npm run format

Formats code using Prettier.

Contributions

Contributions are welcome.

License

This project is distributed under the MIT license.