Skip to main content

Extracting Elements from Figma

Processing Considerations​

The processing architecture presents two main approaches: separate HTML and CSS files, which facilitate modularity but can complicate integration into Scale, or HTML with inline styles, which simplifies initial portability but makes maintenance more difficult. It is necessary to establish clear criteria to determine the default format, considering both modification in Scale and exportation to other tools.

The limitations of Figma plugins, such as timeouts, CORS, and memory restrictions, must be considered when designing the processes, along with the challenges presented by using workers in the Figma environment.

Image Processing​

Handling images requires addressing multiple technical aspects. Images in Figma can be represented as various elements (basic elements, images, fills, components), which demands the ability to recognize and process each variant specifically.

The treatment of background images deserves special attention, particularly their conversion to background-image. The management of Base64 images requires an extra process that includes options for conversion to other formats when necessary. Additionally, the implementation of optimization functionalities for the extracted images is contemplated, including compression and scaling, as well as parallel loading strategies to maintain process efficiency.

Text Processing​

Text management requires a systematic approach to ensure consistent results. It is essential to analyze and document the Figma text properties that could generate unwanted or redundant CSS styles.

The implementation of a normalization system will ensure that the translation of styles is consistent and predictable. The processing must consider the handling of special characters and compatibility with multiple languages, ensuring correct encoding and representation in the resulting files.

Multi-language support must ensure that the tool can process text in various languages without compromising visualization.

Color and Font Processing​

Color management requires a differentiated cataloging of the types available in Figma, including solids, gradients, and images. The processing strategy must ensure an accurate translation to the corresponding CSS syntax, paying special attention to complex gradients.

Regarding fonts, the extraction process in the tests obtains names and weights, ensuring correct identification with existing font files on the page that are also available on Google Fonts. However, the option of uploading fonts that are not part of the group of fonts provided by Google Fonts must be considered for cases where the original fonts are not available.

In turn, this extraction process must fit with the styles of the texts belonging to the Figma pieces.

Element Extraction Methods​

During the initial tests, a hierarchical structure of frames was implemented to identify the elements to be exported. However, this approach requires prior knowledge of the names or positions of the elements, which is not ideal. As an alternative, the use of Figma variables is being evaluated to establish a more semantic and clear nomenclature and structure in the extraction formats.

Plugin Limitations​

  • Extensive Processing: Consider the limitation in handling long processes due to the characteristics of a Figma plugin (timeouts, memory limitations). Explore strategies to avoid bottlenecks and errors.
  • Workers: Difficulty in using workers due to the execution of plugin processes in Figma.

Extraction via API​

Extraction using the Figma API offers significant advantages by providing precise control over the extraction process. Two main approaches can be explored: using the Figma REST API or direct implementation through the plugin. Both methods allow for detailed customization in the extraction of properties and data, although they require additional work in creating abstractions.

It is necessary to develop a robust structure of classes and functionalities. The implementation must include a meticulous extraction logic that guarantees the precise obtaining and transformation of information, contemplating various use cases to ensure complete coverage in the extraction process.