We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.
react-figma - ⚛️ A React renderer for Figma
A React renderer for Figma. Use React components as a source for your designs. You can use react-figma-boilerplate for creating own projects.
react hacktoberfest figma figma-pluginsfigma-html - Figma to HTML, CSS, React, Vue, and more!
When exporting Figma to Builder, the plugin requires all elements to be in auto-layout. However, it's not possible to auto-layout a vector. The alternative here is to use Figma's rasterize selection command on your vector. If the output of that is too low-resolution, then you can try this plugin: https://www.figma.com/community/plugin/837846252158418235/Flatten-Selection-to-Bitmap. If you want the Builder end-result to have a vector, then consider this rasterized selection as a placeholder, and swap it back with an SVG in the Builder editor.
react chrome-extension html design-systems angular typescript vue svelte storybook figma design-tools no-code figma-plugins design-to-code figma-plugin jsx-litetailwindcss-figma-kit - Figma Kit for TailwindCSS
Alternatively this repo also contains a .fig file that can be imported into Figma.
css design kit figma tailwind tailwindcssMitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more
Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular. Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.
react builder angular vue compiler solid jsx visual declarative liquid svelte shopify figma no-code jsx-lite ui-framework ui-uxfigmagic - Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents
Figmagic promotes a structured way of assembling design systems. Following the primary principle of atomic design, Figmagic wants you to build from the bottom up, beginning with decomposing the tokens. Tokens shape elements, which form components, that are ordered in compositions, which get presented in views... You know the drill, though I am switching Brad Frost's nomenclature into something more front-end friendly. When it comes to code generation, Figmagic tries to do this in a better way. Instead of over-eagerly promoting hardcoded code generation from huge and complex components, Figmagic tries to competently, or at least "mostly-right", handle automation for things that should not be too context-dependent or manual input-heavy. Code should also be as close to "normal" as possible—meaning that generated code binds values to tokens and not some random px values as other platforms do. All of this can happen because Figmagic assumes a way of working that respects standard CSS and HTML: no magic trickery! Figmagic avoids some of the cognitive and technical overhead by introducing a concept called Elements, which are Figmagic-compliant components that can be output into code. By composing larger components out of simple Elements, code generation is made much more manageable while also promoting much more structured design.
ux tokens design-tokens figma theo design-specs figma-api design-system salesforce-theostorybook-addon-figma - Embed Figma designs in a storybook panel
If you find that the Figma panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the @storybook/addons-options addon. Note however that it is only possible to do this for all stories at once, and will move all addon panels to the right. A simple setup is shown here.
storybook addon figmafigma-theme - Generate development-ready theme JSON files from Figma Styles
Generate development-ready theme JSON files from Figma Styles
figma figma-api figma-js theme styles styled-system css-in-js design-systems tokensfigma-diff-probot - Probot using figma api to comment on PRs with before after images
a GitHub App built with probot that checks before and after components between two Figma files and posts before after images. This probot is customized to work with Octicons to look for changes in the figma import url found in the octicons package.json.
probot figma github image-difffigcup - Converts Figma designs into Hiccup and Rum/React components to render in the browser
Converts Figma designs into Hiccup and Rum/React components to render in the browser.
figmafigma-app-linux - Unofficial Figma desktop app rebuild for Linux users
Unofficial Figma desktop app rebuild for Linux users who want a workaround while official version is released. We <3 Figma :). Note that this app support local-fonts. Before run the AppImage you may need to install libfontconfig with: sudo apt-get install libfontconfig-dev, some distros don't need it.
figma desktopfigma-action - Export image assets from Figma to GitHub
A GitHub action that will export Figma components from design files to your repository. This token is used to access the Figma API. It's required to generate one so this action will work. It's recommended to set the token in a secret token in your repository.
action github-action github-actions figma figma-api github design-system design image exporterdslint - ✨ DSLint is an extensible linting tool for designers.
DSLint is an extensible linting tool for designers. Similar to code linting, design linting can be used to find problematic patterns in your design files. DSLint ships with some basic rules you can apply to your design systems. However, these rules may not account for some of the best practices your team follows. DSLint was written to allow you to extend the system with your own custom rules which can be written in JavaScript. See below for a TypeScript example.
linters design design-system figma design-tool automation lint prototype design-systems design-toolsfigma-to-flutter - A Dart code generator that converts Figma components to Flutter widgets.
Disclaimer : All of this is purely experimental and under active development (read why I started the project here). If I would have access to Figma rendering source code it would have been a lot easier and quicker (if a Figma employee read this and can share the algorithm, it would be awesome!), but be aware that all the rendering logic is reverse engineered, so you will experience a lot of inconsistencies! Moreover a few performance and rendering tests have created yet, so please share your experiences through issues. The easiest way to start is the online tool.
figma dart flutter generatorvue-low-code - Quant-UX standalone
Vue-Low-Code is an open-source project that turns Figma and Quant-UX designs into fully functional VUE applications. By ensuring that the design stays the single source of truth, Vue-Low-Code reduces the need for design hand-offs and front-end code significantly. A constant pain point during the development of an application is the hand-off between the design and the development team. Often this process is not frictionless. The design team creates a set of graphics and prototypes, which serve as the source of truth and specification for the development team. The development team implements the visual design in the desired technology, which includes the translation of the design into front-end code and business logic, as well as the wiring between the two. As the development evolves, the implementation becomes a second source of truth, and keeping the design and the code base in sync can be a painful exercise.
quant-ux figma prototyping low-code vue.jsFugen - Command line tool for exporting resources and generating code from your Figma files
Fugen is a command line tool for exporting resources and generating code from your Figma files. Installation via CocoaPods is recommended, as it allows to use the fixed version on all team members machines and automate the update process.
homebrew ios design-systems xcode tvos watchos cocoapods codegenerator codegen design-tokens figma figma-api figma-export xcode-assetsawesome-figma - 💡 A curated list of delightful Figma resources
Figma is the first interface design tool with real-time collaboration. A curated list of awesome Figma stuff that focused on integration Figma and development, e.g. Figma Plugins, Figma Rest API.
awesome awesome-list figmafigma-api-stub - 🤖 A stub implementation of Figma Plugins API.
A stub implementation of Figma Plugins API. ⚠️ Warning! It's not an official implementation, and it hasn't the purpose to fully reproduce Figma behavior and API.
testing figma figma-pluginsfigma-ui-components - Unofficial set of Figma UI components
An unofficial set of Figma UI components for creating plugins and other purposes. Based on Tom Lowry's Figma UI JS/CSS files.
figma figma-plugins react ui-kitreact-figma-boilerplate - 👯♀️ Boilerplate app for react-figma
👯♀️ Boilerplate app for react-figma
boilerplate figma-plugins react-figma-plugin react-figma react react-figma-boilerplate figma
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.
