Topics / #figma

Figma projects on GitHub

Integrations and tooling around the Figma design platform.

As of , the most-starred Figma projects on GitHub are awesome-design-md (121.9K stars), screenshot-to-code (80.4K stars) and heroui (30.9K stars). GitHub.Locker tracks 21 Figma repositories with 407.3K stars combined. The fastest-growing on October 16 was awesome-design-md, with +181 stars in a day.

21Projects
407.3KStars in total
+378Stars in a day

Hot right now

Most stars gained in a day · Oct 16

The all-time top

21 projects · by stars

  1. #1 · VoltAgent/awesome-design-md

    awesome-design-md

    This is a curated collection of DESIGN.md files — plain-text design system documents analyzed from real websites like Claude, Stripe, Nike and Tesla — that you drop into a project so an AI coding agent generates UI matching that brand's visual language.

    121.9K
  2. #2 · abi/screenshot-to-code

    screenshot-to-code

    Screenshot-to-code converts screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI models like GPT, Claude, and Gemini.

    80.4K
  3. #3 · heroui-inc/heroui

    heroui

    HeroUI (formerly NextUI) is a production-ready React component library that combines React Aria's accessibility primitives with Tailwind CSS v4 styling.

    30.9K
  1. 4

    onlook

    26.9Konlook-dev/onlook · TypeScript

    Onlook is an open-source, AI-first visual editor for designing on top of your Next.js + Tailwind codebase. You edit elements directly in the browser DOM like a design tool, and the changes map back to real code in real time.

  2. 5

    awesome-design-systems

    26.1Kalexpate/awesome-design-systems

    A curated list of design systems — the documented principles, best practices and UI/pattern libraries that help a team build digital products consistently.

  3. 6

    lucide

    25.1Klucide-icons/lucide · TypeScript

    Lucide is an open-source icon library with 1600+ vector (svg) files, made by the community as a fork of Feather Icons, for use in digital and non-digital projects.

  4. 7

    Figma-Context-MCP

    16KGLips/Figma-Context-MCP · TypeScript

    It's the Framelink MCP server: it gives AI coding agents like Cursor direct access to your Figma files, so they can implement designs from real layout and styling data in one shot.

  5. 8

    react-native-paper

    14.5Kcallstack/react-native-paper · TypeScript

    React Native Paper is a cross-platform UI kit for React Native: customizable, production-ready components that follow Google's Material Design guidelines by default.

  6. 9

    mitosis

    14.4KBuilderIO/mitosis · TypeScript

    Mitosis is a compiler that lets you write a UI component once and compile it to native code for React, Vue, Angular, Svelte, Solid, Qwik, Alpine, and other frameworks.

  7. 10

    semi-design

    10.4KDouyinFE/semi-design · TypeScript

    Semi Design is a comprehensive design system and React UI library: 80+ production-quality components kept stable since 2019, plus tooling that connects design and code — a Figma Design-to-Code plugin and a DSM platform for custom design tokens.

  8. 11

    Tkinter-Designer

    10.3KParthJadhav/Tkinter-Designer · Python

    Tkinter Designer is a tool that turns Figma designs into working Python Tkinter GUIs: it reads your design file through the Figma API and generates all the code and images the GUI needs.

  9. 12

    css.gg

    10.1Kastrit/css.gg · JavaScript

    CSS.GG is a comprehensive open-source icon library: 700+ UI icons written in pure CSS, plus matching SVG versions and a Figma collection.

  10. 13

    baoyu-design

    4.4KJimLiu/baoyu-design · JavaScript

    baoyu-design packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill you drop into a local coding agent like Cursor, Claude Code, or Codex, producing polished UI mockups, prototypes, wireframes, landing pages, dashboards, and slide decks as self-contained HTML.

  11. 14

    design-extract

    4.2KManavarya09/design-extract · HTML

    Designlang (the 'design-extract' CLI) points a headless browser at any live URL and reads the site's complete design system off the DOM in one command, emitting 17+ files including DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, component anatomy, and brand voice.

  12. 15

    awesome-claude-design

    4.1KVoltAgent/awesome-claude-design

    A curated collection of 68 ready-to-use DESIGN.md files - one-page briefs describing a brand's visual language - that you drop into Claude Design to scaffold a full UI design system (colors, type, components, preview cards, working UI kit) in one shot.

  13. 16

    kumo

    4.1Kcloudflare/kumo · TypeScript

    Kumo is Cloudflare's component library for building modern web applications — accessible, design-system-compliant UI components built on Base UI.

  14. 17

    ux-ui-agent-skills

    2Kplugin87/ux-ui-agent-skills · JavaScript

    A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

  15. 18

    open-pencil-cloud

    591yoohoo360/open-pencil-cloud · TypeScript

    An AI-native, open-source Figma alternative: a product fork of the OpenPencil design editor. It keeps the upstream engine (.fig/.pen, CanvasKit rendering, SceneGraph) and adds a React shell, cloud documents, and internal deployment.

  16. 19

    vibe-aso

    451Kronop/vibe-aso · JavaScript

    Vibe ASO is a Claude Code skill that takes an iOS app from 'ready to submit' to a fully localized App Store presence: keyword research, metadata in up to 50 locales, localized screenshots, worldwide pricing, and in-app string localization, all driven from inside Claude Code.

  17. 20

    oxynote

    201oxynote/oxynote · Go

    Oxynote is a self-hosted technical wiki that connects documentation directly to the systems it describes, pairing live metric charts and Stripe-style API docs with the same page and running every edit through a draft-diff-approval review flow.

  18. 21

    Core-Framework

    190CoreBunch/Core-Framework · TypeScript

    Core Framework is a visual CSS framework and design-token builder you use across the web, WordPress, and Figma to build a design system once and export portable, production-ready CSS.

Often tagged together