awesome-repositories.com
Blog
MCP
awesome-repositories.com

Découvrez les meilleurs dépôts open-source grâce à notre recherche par IA.

ExplorerRecherches sélectionnéesAlternatives open sourceLogiciels auto-hébergésBlogPlan du site
ProjetÀ proposNotre méthodologiePresseServeur MCP
Mentions légalesConfidentialitéConditions d'utilisation
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
bernaferrari avatar

bernaferrari/FigmaToCode

0
View on GitHub↗
5,020 stars·479 forks·TypeScript·GPL-3.0·7 vueswww.figma.com/community/plugin/842128343887142055↗

FigmaToCode

FigmaToCode est un convertisseur design-vers-code et un générateur de code frontend qui transforme les fichiers de design Figma en code source responsive. Il fonctionne comme un compilateur d'interface utilisateur multiplateforme, mappant les éléments de design visuel aux contraintes structurelles pour les environnements web et mobiles.

Le système prend en charge l'émission de syntaxe multi-cible pour produire du code pour HTML, Tailwind CSS, Flutter et SwiftUI. Il automatise le stylage frontend en convertissant les variables de système de design et les effets visuels en code cohérent avec le thème à travers ces différents frameworks.

L'outil gère l'implémentation d'interface utilisateur responsive en traduisant les nœuds de design en mises en page qui s'adaptent à diverses tailles d'écran. Il gère la conversion des hiérarchies de design, des relations spatiales et des palettes de couleurs en propriétés de mise en page fonctionnelles et définitions de style.

Features

  • Design-to-Code Converters - Automates the translation of Figma design files into clean HTML, Tailwind, Flutter, or SwiftUI code.
  • UI Layout Compilers - Maps visual design elements to specific structural constraints across different programming frameworks.
  • Multi-Target Code Generation - Emits design representations as source code for HTML, Tailwind, Flutter, and SwiftUI.
  • Layout Tree Construction - Translates nested design nodes into hierarchical layout trees for geometry and styling calculations.
  • Cross-Platform UI Frameworks - Generates consistent user interfaces for web, iOS, and Android from a single design source.
  • Design-to-Code Tools - Transforms design nodes into responsive layouts that maintain structural relationships across platforms.
  • Flexible Layout Constraints - Converts absolute pixel coordinates and anchors into fluid, flexible layout constraints.
  • Adaptive UI Layouts - Creates layouts that automatically adapt to different screen sizes using constraints and size classes.
  • Design-to-Code Generators - Processes design nodes and style variables to generate production-ready layout code.
  • Configuration-Driven Property Mapping - Matches design attributes to framework properties using configuration-driven property mapping.
  • Template-Based Code Generators - Uses pre-defined syntax templates to generate idiomatic source code for various frontend frameworks.
  • CSS Variable Theming - Extracts design tokens and color palettes to generate native CSS variable-based themes.
  • Style Consistency Generators - Processes color variables and visual effects to ensure cohesive, theme-consistent styling.
  • Styling Automation - Automates the conversion of design system variables into standardized CSS styles.

Historique des stars

Graphique de l'historique des stars pour bernaferrari/figmatocodeGraphique de l'historique des stars pour bernaferrari/figmatocode

Recherche par IA

Explorez plus de dépôts awesome

Décrivez vos besoins en langage naturel — l'IA classe des milliers de projets open source sélectionnés par pertinence.

Start searching with AI

Alternatives open source à FigmaToCode

Projets open source similaires, classés selon le nombre de fonctionnalités partagées avec FigmaToCode.
  • markmead/hyperuiAvatar de markmead

    markmead/hyperui

    12,137Voir sur GitHub↗

    HyperUI is a dependency-free collection of responsive HTML layouts and pre-styled components designed for various web domains. It functions as a Tailwind CSS component library where users integrate standalone HTML snippets via a copy-paste distribution model to avoid package installation and framework overhead. The library features one-click markup copying from a pre-built component gallery. It includes specialized design systems, such as high-contrast neobrutalist styling with heavy borders, and visual tools for generating dark mode color palettes and harmonic typography scales. The compone

    HTMLaccessibilitycomponentscss
    Voir sur GitHub↗12,137
  • ultralight-ux/ultralightAvatar de ultralight-ux

    ultralight-ux/Ultralight

    4,971Voir sur GitHub↗

    Ultralight is a GPU-accelerated HTML UI renderer and C++ framework designed for embedding web interfaces within native applications. It functions as a lightweight web browser and cross-platform UI framework that renders HTML, CSS, and JavaScript directly to CPU pixel buffers or GPU textures. The project distinguishes itself by allowing developers to emit raw geometry and draw calls via a custom GPU driver interface, eliminating intermediate CPU bitmaps. It provides deep integration between native logic and web environments through a C++ web interface library that binds native functions and ob

    CMakecross-platformdesktop-appsdirectx-11
    Voir sur GitHub↗4,971
  • androidx/androidxAvatar de androidx

    androidx/androidx

    6,010Voir sur GitHub↗

    AndroidX is the official collection of Android Jetpack libraries for building Android applications. It provides a suite of backward-compatible APIs that expose modern platform features on older Android versions, ensuring consistent functionality across devices. The project is built around lifecycle-aware component architecture, with tools like ViewModel for preserving UI data across configuration changes, LiveData for lifecycle-aware data observation, and WorkManager for constraint-based background task scheduling. The project distinguishes itself through compile-time code generation and type

    Kotlin
    Voir sur GitHub↗6,010
  • utom/sketch-measureAvatar de utom

    utom/sketch-measure

    6,860Voir sur GitHub↗

    sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an HTML design spec generator and asset export manager, creating technical handoff documentation and measurement annotations directly from design files. The tool generates interactive web viewers and standalone offline HTML pages that allow for the inspection of dimensions, styles, and design details. It includes capabilities for managing color palettes via XML export and capturing influence rectangles to ensure exported image dimensions account for shadows and borders. The system

    HTMLdesign-specsjavascriptmeasurement
    Voir sur GitHub↗6,860
Voir les 30 alternatives à FigmaToCode→

Questions fréquentes

Que fait bernaferrari/figmatocode ?

FigmaToCode est un convertisseur design-vers-code et un générateur de code frontend qui transforme les fichiers de design Figma en code source responsive. Il fonctionne comme un compilateur d'interface utilisateur multiplateforme, mappant les éléments de design visuel aux contraintes structurelles pour les environnements web et mobiles.

Quelles sont les fonctionnalités principales de bernaferrari/figmatocode ?

Les fonctionnalités principales de bernaferrari/figmatocode sont : Design-to-Code Converters, UI Layout Compilers, Multi-Target Code Generation, Layout Tree Construction, Cross-Platform UI Frameworks, Design-to-Code Tools, Flexible Layout Constraints, Adaptive UI Layouts.

Quelles sont les alternatives open-source à bernaferrari/figmatocode ?

Les alternatives open-source à bernaferrari/figmatocode incluent : markmead/hyperui — HyperUI is a dependency-free collection of responsive HTML layouts and pre-styled components designed for various web… ultralight-ux/ultralight — Ultralight is a GPU-accelerated HTML UI renderer and C++ framework designed for embedding web interfaces within native… androidx/androidx — AndroidX is the official collection of Android Jetpack libraries for building Android applications. It provides a… utom/sketch-measure — sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an… glips/figma-context-mcp — Figma-Context-MCP is a design-to-code automation tool that functions as a server for the Model Context Protocol. It… tamagui/tamagui — Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that…