Skip to main content

Introduction

The web application will be developed using a modern and robust technology stack, focused on providing an optimal user experience and high performance. The architecture will be built on the following technologies and their respective versions:

Core Technology Stack:

  • React (v19.0.0): The primary library for building user interfaces.
  • Next.js (v15.3.1): A React framework for hybrid rendering and optimization, ideal for building applications with artificial intelligence integration.
  • Tailwind CSS (v4.1.0): A utility-first CSS framework for modern styling.
  • Node.js (v22.15.0): The server-side runtime environment.
  • shadcn/ui: A collection of reusable and accessible components.
  • Storybook (v8.6.14): A tool for developing and documenting UI components in isolation, facilitating testing and visualization.
  • Zustand (v5.0.5): A lightweight and simple library for global state management in React, featuring a minimalist API.

Architecture​

The application will implement a component-based architecture, leveraging the latest features of React 19 and the hybrid rendering capabilities of Next.js 15.3.1. The user interface will be built on top of shadcn/ui components, styled with Tailwind CSS 4.1, ensuring a consistent and modern visual experience.

For global state management, Zustand is used due to its minimalist and atomic approach, allowing for specific state management for each entity or use case. This avoids unnecessary complexity and improves performance. Additionally, Storybook is used for component documentation.

System Requirements

  • Node.js version 22.15.0 or higher
  • NPM or PNPM as the package manager

Technical Considerations​

  • Type Standardization: Ensure consistency and coherence in the data types used between services and the backend to prevent errors and facilitate communication.
  • Standardization of Plugin and Web App: Opt for the same technologies and similar structures in both projects to allow for the reuse of elements between them.
  • Dynamic Rendering: Analyze and design the best rendering strategy based on the page and modified elements to optimize performance.
  • HTML as a Template: Use HTML as a template where its values are dynamically modified through properties, allowing for greater flexibility.
  • Figma Variables: Explore the use of Figma variables as identifiers for element extraction, which will allow for greater precision and semantics in the process.

Potential Challenges​

  • Interconnection and CORS: Communication between the Figma plugin and the services could be affected by CORS (Cross-Origin Resource Sharing) restrictions, requiring an appropriate solution to enable fluid communication.
  • Cache Synchronization: Real-time element modification can be hindered by cache synchronization issues, so efficient cache management is required to reflect changes in real-time.
  • Feed Editing: Modifying elements through the feed can be complex due to the need to manipulate HTML through representative properties, which requires a robust solution for manipulation.
  • Inline Style Export: Exporting elements with inline styles presents a challenge due to the way style properties must be combined to be correctly reflected in the HTML, requiring a precise solution.
  • Plugin Performance: The plugin may experience performance issues when processing a large number of Figma nodes, requiring code optimization to ensure fluidity.