html-figma
playroom
| html-figma | playroom | |
|---|---|---|
| 8 | 2 | |
| 2,958 | 4,419 | |
| 1.4% | 0.2% | |
| 3.8 | 8.0 | |
| 7 days ago | 10 days ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
html-figma
-
Introducing Visual Copilot: A Better Figma-to-Code Workflow
Try the Builder.io Figma plugin
- How to create prototypes from existing website pages?
-
PageGenie instantly generates an entire landing page from your product idea using ChatGPT and DALL-E
to test Figma integration you can try an open-source HTML ⇔ Figma plugin (GitHub) by Builder.io. Works both ways
-
How to turn your Figma designs into enterprise-ready apps
After designing your user interface within Figma, teams can utilize a plugin like Builder.io to turn the beautiful and functional look into code.
-
20+ Best Figma Plugins to Create & Manage Design Systems for Web Designers in 2022
Figma to HTML converts Figma layers to HTML, CSS, React, Vue, Svelte, Solid, and more. The output is quality, responsive front-end code.
- Figma → React
-
5 best no-code tools for developers
You can also use HTML to Figma to convert your code to Figma designs, and JSX Lite to convert Figma designs to code of your framework of choice.
playroom
-
Using NPM Programatically
In my day job, as part of our design system library ecosystem, we're building an internal code sandbox (think of it as a mix between Seek OSS Playroom and QuickPaste). It allows our users try the components from our component library (let's call it @wtf-ds/core) and any other supplementary React code right there in the browser, without having to create a new project in their own environment.
-
Figma → React
I'd love to hear from devs and designers who have experience with Playroom https://github.com/seek-oss/playroom ...
also, where does Storybook fit into tbe picture?
What are some alternatives?
FigmaToCode - Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
storybook - 📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more! [Moved to: https://github.com/storybookjs/storybook]
mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
plasmic - Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
builder - Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
framer-bridge-starter-kit - Start your design system in Framer X.
meta-system - The open-source no-code engine/framework. A system to be any system.
proposal-json-modules - Proposal to import JSON files as modules
ngx-ui-builder - An Angular library for creating no code tools & applications
parabeac_core - Continuous Design / Continuous Integration for Figma to Flutter