awesome-repositories.com
المدونة
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
bernaferrari avatar

bernaferrari/FigmaToCode

0
View on GitHub↗
5,020 نجوم·479 تفرعات·TypeScript·GPL-3.0·6 مشاهداتwww.figma.com/community/plugin/842128343887142055↗

FigmaToCode

FigmaToCode هو محول من التصميم إلى الكود ومولد كود للواجهة الأمامية يقوم بتحويل ملفات تصميم Figma إلى كود مصدري متجاوب. يعمل كمترجم واجهة مستخدم متعدد المنصات، حيث يربط عناصر التصميم المرئي بالقيود الهيكلية لبيئات الويب والهاتف المحمول.

يدعم النظام إصدار بناء جملة متعدد الأهداف لإنتاج كود لـ HTML، وTailwind CSS، وFlutter، وSwiftUI. يقوم بأتمتة تنسيق الواجهة الأمامية عن طريق تحويل متغيرات نظام التصميم والتأثيرات المرئية إلى كود متسق مع السمات عبر إطارات العمل المختلفة هذه.

تتعامل الأداة مع تنفيذ واجهة المستخدم المتجاوبة من خلال ترجمة عقد التصميم إلى تخطيطات تتكيف مع أحجام الشاشات المختلفة. تدير تحويل تسلسلات التصميم، والعلاقات المكانية، ولوحات الألوان إلى خصائص تخطيط وظيفية وتعريفات نمطية.

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.

سجل النجوم

مخطط تاريخ النجوم لـ bernaferrari/figmatocodeمخطط تاريخ النجوم لـ bernaferrari/figmatocode

بحث بالذكاء الاصطناعي

استكشف المزيد من المستودعات الرائعة

صف ما تحتاجه بلغة بسيطة — وسيقوم الذكاء الاصطناعي بترتيب آلاف المشاريع مفتوحة المصدر المنسقة حسب الصلة.

Start searching with AI

بدائل مفتوحة المصدر لـ FigmaToCode

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع FigmaToCode.
  • markmead/hyperuiالصورة الرمزية لـ markmead

    markmead/hyperui

    12,137عرض على 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
    عرض على GitHub↗12,137
  • ultralight-ux/ultralightالصورة الرمزية لـ ultralight-ux

    ultralight-ux/Ultralight

    4,971عرض على 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
    عرض على GitHub↗4,971
  • androidx/androidxالصورة الرمزية لـ androidx

    androidx/androidx

    6,010عرض على 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
    عرض على GitHub↗6,010
  • utom/sketch-measureالصورة الرمزية لـ utom

    utom/sketch-measure

    6,860عرض على 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
    عرض على GitHub↗6,860
عرض جميع البدائل الـ 30 لـ FigmaToCode→

الأسئلة الشائعة

ما هي وظيفة bernaferrari/figmatocode؟

FigmaToCode هو محول من التصميم إلى الكود ومولد كود للواجهة الأمامية يقوم بتحويل ملفات تصميم Figma إلى كود مصدري متجاوب. يعمل كمترجم واجهة مستخدم متعدد المنصات، حيث يربط عناصر التصميم المرئي بالقيود الهيكلية لبيئات الويب والهاتف المحمول.

ما هي الميزات الرئيسية لـ bernaferrari/figmatocode؟

الميزات الرئيسية لـ bernaferrari/figmatocode هي: 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.

ما هي البدائل مفتوحة المصدر لـ bernaferrari/figmatocode؟

تشمل البدائل مفتوحة المصدر لـ bernaferrari/figmatocode: 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…