awesome-repositories.com
Blog
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectAboutHow we rankPressMCP server
LegalPrivacyTerms
© 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·4 viewswww.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 history

Star history chart for bernaferrari/figmatocodeStar history chart for bernaferrari/figmatocode

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to FigmaToCode

Similar open-source projects, ranked by how many features they share with FigmaToCode.
  • markmead/hyperuimarkmead avatar

    markmead/hyperui

    12,137View on 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
    View on GitHub↗12,137
  • ultralight-ux/ultralightultralight-ux avatar

    ultralight-ux/Ultralight

    4,971View on 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
    View on GitHub↗4,971
  • androidx/androidxandroidx avatar

    androidx/androidx

    6,010View on 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
    View on GitHub↗6,010
  • utom/sketch-measureutom avatar

    utom/sketch-measure

    6,860View on 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
    View on GitHub↗6,860
See all 30 alternatives to FigmaToCode→

Frequently asked questions

What does bernaferrari/figmatocode do?

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.

What are the main features of bernaferrari/figmatocode?

The main features of bernaferrari/figmatocode are: 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.

What are some open-source alternatives to bernaferrari/figmatocode?

Open-source alternatives to bernaferrari/figmatocode include: 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…