Displaying 1 to 20 from 24 results

react-figma - ⚛️ A React renderer for Figma

  •    TypeScript

A React renderer for Figma. Use React components as a source for your designs. You can use react-figma-boilerplate for creating own projects.

tailwindcss-figma-kit - Figma Kit for TailwindCSS

  •    Shell

Alternatively this repo also contains a .fig file that can be imported into Figma.

Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more

  •    Typescript

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.

figmagic - Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents

  •    TypeScript

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.




storybook-addon-figma - Embed Figma designs in a storybook panel

  •    Javascript

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.

figma-diff-probot - Probot using figma api to comment on PRs with before after images

  •    Javascript

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.

figcup - Converts Figma designs into Hiccup and Rum/React components to render in the browser

  •    Clojure

Converts Figma designs into Hiccup and Rum/React components to render in the browser.


figma-app-linux - Unofficial Figma desktop app rebuild for Linux users

  •    Javascript

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-action - Export image assets from Figma to GitHub

  •    Javascript

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.

figplug - Figma plugin builder

  •    TypeScript

Figma plugin helper. Initialize Figma plugins in directories provided as <dir>, or the current directory.

dslint - ✨ DSLint is an extensible linting tool for designers.

  •    TypeScript

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.

figma-to-flutter - A Dart code generator that converts Figma components to Flutter widgets.

  •    Dart

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.

vue-low-code - Quant-UX standalone

  •    Javascript

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.

Fugen - Command line tool for exporting resources and generating code from your Figma files

  •    Swift

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.

awesome-figma - 💡 A curated list of delightful Figma resources

  •    Javascript

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.

figma-api-stub - 🤖 A stub implementation of Figma Plugins API.

  •    TypeScript

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.

figma-ui-components - Unofficial set of Figma UI components

  •    TypeScript

An unofficial set of Figma UI components for creating plugins and other purposes. Based on Tom Lowry's Figma UI JS/CSS files.

figmagic-example - Using Figmagic (simplifying design token generation and asset extraction) with Webpack 5, React 16, Styled Components

  •    TypeScript

This repository is a demo of Figmagic. In this project you're going to see how a project running Webpack, React and Styled Components might use tokens. There are pre-compiled tokens available under /tokens. Figmagic Example Demo: On the left is a big Figma component assembled of a number of "Elements", Figmagic-compliant components that can be output into code. On the right is the React-composed version of those after just a few minutes of coding and closing elements correctly.