Skip to content
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.

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

Parsing Figma text nodes and sending to the mocked API #2

Open
wants to merge 37 commits into
base: main
Choose a base branch
from

Conversation

Samesma
Copy link

@Samesma Samesma commented Sep 25, 2024

Overview

This PR implements the requirements for parsing text nodes from a Figma design and sending the collected data to a mocked API endpoint. The script retrieves information such as text content, font size, font family, font weight, line height, and text box dimensions for all text nodes in the Figma file.

Features Implemented

  • Figma API Integration: The script fetches text node data directly from the Figma API using a provided FIGMA_API_TOKEN.
  • Data Aggregation: Collected the following information for each text node:
    • Text Content
    • Font Size
    • Font Face (Font Family)
    • Font Weight
    • Line Height
    • Dimensions of the Text Box (width/height)
  • Mocked API Request: Sends the aggregated data to the mocked API at http://test-url.com/translations/text-parts.
  • TypeScript: The entire codebase is written in TypeScript for type safety and improved development experience.
  • CSV Report Generation (Bonus): Added functionality to generate and save a CSV report that logs statistics of each API call, such as the number of nodes processed, request/response size, and processing time.

Instructions

To run the script and observe its outputs, follow the steps below:

  1. Clone the repository and install dependencies:
    git clone <repo-url>
    cd <repo-directory>
    npm install
    
  2. Add your Figma API token and file ID to the .env file in the project root:
    FIGMA_API_TOKEN=your_figma_api_token_here

Run the build script:

npm run build

Start the server in development mode:

npm run dev

Make a request to fetch text node data from the default Figma file:

http://localhost:3000/v1/figma/file/default-file

The response will be returned in JSON format and additionally, the result will be saved to a JSON file at ./json-files/figma_response.json and a CSV report will be generated at ./csv-files/operation_statistics.csv.

Testing

Unit, integration, and end-to-end tests have been added to ensure the correctness of the functionality.
To run the tests, execute the following command:

npm run test

Additional Notes

This PR also includes improvements to logging and error handling for better traceability and debugging.
All major code sections have been documented and are written to adhere to TypeScript best practices.

Please read the README file for more details and review the changes and let me know if further adjustments are needed.

@Samesma Samesma changed the title The app for parsing Figma text nodes and sending data to a mocked API The app for parsing Figma text nodes Sep 25, 2024
@Samesma Samesma changed the title The app for parsing Figma text nodes The app for parsing Figma text nodes and sending to the mocked API Sep 25, 2024
@Samesma Samesma changed the title The app for parsing Figma text nodes and sending to the mocked API Parsing Figma text nodes and sending to the mocked API Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant