https://github.com/sonnylazuardi/framer-sites-figma-plugin

Build figma plugin with low code using framer sites
https://github.com/sonnylazuardi/framer-sites-figma-plugin

figma framer plugin sites

Last synced: 12 days ago
JSON representation

Build figma plugin with low code using framer sites

• Host: GitHub
• URL: https://github.com/sonnylazuardi/framer-sites-figma-plugin
• Owner: sonnylazuardi
• Created: 2022-04-24T04:57:10.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-04-24T07:08:27.000Z (over 2 years ago)
• Last Synced: 2024-05-02T06:18:20.810Z (7 months ago)
• Topics: figma, framer, plugin, sites
• Language: JavaScript
• Homepage: https://figmaplugin.framer.website/
• Size: 953 KB
• Stars: 13
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Framer Sites Figma Plugin 

Build figma plugin with low code using framer sites

![screen](screenshot.png)

## Framer Sites

Duplicate [this framer site](https://sites.framer.com/projects/new?duplicate=sUTqiLD13aV9nhuIt1gz)

### Code Override

`Examples.tsx`

```typescript

import { figma, postFigmaMessage } from "./FigmaApi.tsx"

export function createPage(Component): ComponentType {

    return (props) => {

        return (

             {

                    postFigmaMessage(() => {

                        figma.createPage()

                    })

                }}

            />

        )

    }

}

```

Assigning code override

![assign](assign.png)

Autocomplete

![autocomplete](autocomplete.png)

## Figma Plugin

clone [figma plugin examples](https://github.com/figma/plugin-samples/tree/master/webpack-react): `webpack-react`

install framer-sites-figma-plugin

```

yarn add framer-sites-figma-plugin

```

`ui.tsx`

```typescript

import useFramerMessage from "framer-sites-figma-plugin";

const App = () => {

  useFramerMessage();

  return (

    

  );

};

```

`code.tsx`

```typescript

import framerOnMessage from "framer-sites-figma-plugin/lib/api";

figma.ui.onmessage = (msg) => {

  framerOnMessage(msg);

};

```