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

Aberta
  • Algo errado?
#305 2 comentários 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
25/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
figma, typescript
Domínio
developer-experience

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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" ...

Linguagem predominante
TypeScript
Estrelas
1.6k
Forks
126
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de figma/code-connect

Todas as issues de figma/code-connect

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.