Skip to content

Commit

Permalink
add docs
Browse files Browse the repository at this point in the history
  • Loading branch information
samijaber committed Jun 6, 2022
1 parent db81565 commit 1156821
Show file tree
Hide file tree
Showing 6 changed files with 7,752 additions and 27 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
plugin/**/*.js
node_modules
dist

**/.DS_Store
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v16.14.0
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const layers = htmlToFigma(document.body);
```

## Auto-layout Vectors

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.
Expand All @@ -65,6 +66,7 @@ If you want the Builder end-result to have a vector, then consider this rasteriz
Importing HTML layers to Figma is a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.

A few known limitations:

- not all element types are supported (e.g. iframe, pseudoelements)
- not all CSS properties are supported or fully supported
- not all types of media are supported (video, animated gifs, etc)
Expand All @@ -81,3 +83,36 @@ If you find any issues or have feedback at all please [make an issue](https://gi
<p align="center">
Made with ❤️ by <a target="_blank" href="https://builder.io/">Builder.io</a>
</p>

## Architecture

- `builder.io/api/v1/html-to-figma`: API endpoint that converts a URL's layout to a Figma design. The logic of that endpoint lives in this repo, under [./lib/html-to-figma](./lib/html-to-figma).
- `builder.io/api/v1/figma-to-builder`: API endpoint that converts a Figma design to a Builder content JSON. The logic of that endpoint lives in Builder's API.

## DEVELOP - Figma plugin

### Setup local development plugin

- install the Figma desktop app through https://www.figma.com/

- Right click Plugins -> Development -> Import plugin from manifest
<img src="./assets/dev-import.png" />

- Choose `manifest.json` in this repo

- Now you can access/test the local plugin code in this repo by navigating to: Right click Plugins -> Development -> HTML <> Figma
<img src="./assets/dev-use.png" />

### Develop

```bash
# install
npm install

# run tsc server
npm run dev
```

NOTE: make sure to enable this boolean:

https://github.com/BuilderIO/figma-html/blob/db81565798c2989f701ae2b6b0aeaff175b9108b/plugin/ui.tsx#L45
Binary file added assets/dev-import.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/dev-use.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1156821

Please sign in to comment.