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.
- 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.
To use DataFlow Designer in Figma:
- Ensure you have access to Figma and the necessary permissions to install widgets.
- Add the widget to your Figma project.
- Interact with the widget on your Figma canvas to start designing your data structures.
This widget is built using the Figma widgets framework and JavaScript/TypeScript. To contribute or modify the widget:
- Clone the repository.
- Install dependencies with
npm install
. - Make your changes in the source code.
- Use
npm run build
to compile your changes. - Test your changes in Figma.
In the project directory, you can run:
Compiles the widget and generates the dist/code.js
file.
Watches for file changes and automatically compiles during development.
Runs ESLint to identify issues in the code.
Automatically fixes issues identified by ESLint.
Formats code using Prettier.
Contributions are welcome.
This project is distributed under the MIT license.