Support layer-walking and CSS extraction through the CLI or the REST API

Abierto
  • ¿Algo no está bien?
#305 2 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
figma, typescript
Área
developer-experience

Línea de trabajo

Start by reading the Code Connect CLI and REST API entry points, then review the Get File Nodes endpoint described in the issue and how it exposes node styling properties. The requested work spans layer traversal and access to generated dev-mode CSS, but the issue does not identify files or tests. Done means a CLI or REST API interface can walk a design node and its children and provide the CSS output.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

feature request

Describe the feature you'd like:

TL;DR:

It would be amazing to have the functionality to automatically scaffold code from a Figma design by offering interfaces to walk layers in the design and extract generated dev-mode CSS code.
These interfaces could be offered in the code-connect CLI or the REST API.

Long version

I've been looking at a way to automate some tedious frontend-work recently. We use Figma a lot and I've been thinking to automate the process of extracting layers/nodes and CSS code for new designs.

The idea was to run a script, provide the Figma URL to a node of a design, and then have the script walk the node and its children, extracting the basic structure (and i.e. duplicating that in HTML) as well as extract the dev-mode CSS code and save that too.

The REST API is already part of the way there. We can use the Get File Nodes Endpoint to query information about a node and its children.
The queried information contains styling information as well, such as layoutMode, padding*, layoutSizing* and more, however there is no CSS code that comes with it. We would have to manually map all those different properties to CSS code.
The endpoint takes a plugin_data query parameter, however I didn't find any ID for the native CSS-code "plugin" ...

Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
126
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de figma/code-connect

Todos los issues de figma/code-connect

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.