awesome-repositories.com
Blog
awesome-repositories.com

Entdecke die besten Open-Source-Repositories mit KI-gestützter Suche.

EntdeckenKuratierte SuchenOpen-Source-AlternativenSelf-hosted SoftwareBlogSitemap
ProjektÜber unsRanking-MethodikPresseMCP-Server
RechtlichesDatenschutzAGB
© 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·6 Aufrufewww.figma.com/community/plugin/842128343887142055↗

FigmaToCode

FigmaToCode is a design-to-code converter and frontend code generator that transforms Figma design files into responsive source code. It functions as a multi-platform UI compiler, mapping visual design elements to structural constraints for web and mobile environments.

The system supports multi-target syntax emission to produce code for HTML, Tailwind CSS, Flutter, and SwiftUI. It automates frontend styling by converting design system variables and visual effects into theme-consistent code across these different frameworks.

The tool handles responsive UI implementation by translating design nodes into layouts that adapt to various screen sizes. It manages the conversion of design hierarchies, spatial relationships, and color palettes into functional layout properties and style definitions.

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.

Star-Verlauf

Star-Verlauf für bernaferrari/figmatocodeStar-Verlauf für bernaferrari/figmatocode

KI-Suche

Entdecke weitere awesome Repositories

Beschreibe in einfachen Worten, was du brauchst — die KI bewertet tausende kuratierte Open-Source-Projekte nach Relevanz.

Start searching with AI

Open-Source-Alternativen zu FigmaToCode

Ähnliche Open-Source-Projekte, sortiert nach der Anzahl der gemeinsamen Funktionen mit FigmaToCode.
  • markmead/hyperuiAvatar von markmead

    markmead/hyperui

    12,137Auf GitHub ansehen↗

    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
    Auf GitHub ansehen↗12,137
  • ultralight-ux/ultralightAvatar von ultralight-ux

    ultralight-ux/Ultralight

    4,971Auf GitHub ansehen↗

    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
    Auf GitHub ansehen↗4,971
  • androidx/androidxAvatar von androidx

    androidx/androidx

    6,010Auf GitHub ansehen↗

    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
    Auf GitHub ansehen↗6,010
  • utom/sketch-measureAvatar von utom

    utom/sketch-measure

    6,860Auf GitHub ansehen↗

    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
    Auf GitHub ansehen↗6,860
Alle 30 Alternativen zu FigmaToCode anzeigen→

Häufig gestellte Fragen

Was macht bernaferrari/figmatocode?

FigmaToCode is a design-to-code converter and frontend code generator that transforms Figma design files into responsive source code. It functions as a multi-platform UI compiler, mapping visual design elements to structural constraints for web and mobile environments.

Was sind die Hauptfunktionen von bernaferrari/figmatocode?

Die Hauptfunktionen von bernaferrari/figmatocode sind: 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.

Welche Open-Source-Alternativen gibt es zu bernaferrari/figmatocode?

Open-Source-Alternativen zu bernaferrari/figmatocode sind unter anderem: 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…