Skip to content

Commit 95810a3

Browse files
steve8708steve8708
committed
updates
1 parent eaf8677 commit 95810a3

30 files changed

+3859
-2639
lines changed

‎README.md

+23-8
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,42 @@
11
<p align="center">
2-
<img alt="Html to figma" src="https://imgur.com/FrlJOr4.jpg" />
2+
<img alt="Html figma logo" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd4b3b47142934d6cb471bf9689c0ade9" />
33
</p>
44

55
<br />
66

7-
# HTML To Figma
7+
# HTML <-> Figma
88

9-
Figma plugin to convert HTML from a URL to Figma
9+
Figma plugin to convert HTML from a URL to Figma, or convert Figma designs to code via [JSX Lite](https://github.com/BuilderIO/jsx-lite)
1010

1111
## How does it work
1212

1313
1. [Install the plugin](https://www.figma.com/c/plugin/747985167520967365/HTML-To-Figma)
14-
1. In Figma hit cmd+/ and search "html to figma" and hit enter
14+
1. In Figma, open a new or existing document, then hit cmd+/ and search "html figma" and hit enter
1515
1. Enter a URL you want to import
1616

17-
<img src="https://i.imgur.com/YNDD9dH.gif" alt="Demo" width="500" />
17+
<img src="https://i.imgur.com/YNDD9dH.gif" alt="Plugin demo" width="480" />
1818

1919
## Why?
2020

2121
- Easily import real live site styles for a starting point for designs and prototypes
2222
- Quickly turn real site components into design components
2323
- Easy import from storybook, etc
2424

25+
## Chrome Extension
26+
27+
Want to capture a page behind an auth wall, or in a specific state you need to navigate to? Then the [chrome extension](https://chrome.google.com/webstore/detail/efjcmgblfpkhbjpkpopkgeomfkokpaim) is for you!
28+
29+
<img src="https://imgur.com/ARz16KC.gif" alt="Chrome extension demo" width="480" />
30+
31+
## Using the library
32+
33+
```js
34+
// npm install @builder.io/html-to-figma
35+
import { htmlToFigma } from "@builder.io/html-to-figma";
36+
const layers = htmlToFigma(document.body);
37+
// E.g. send these to the REST API, or generate a .figma.json file that can be uploaded through the Figma plugin
38+
```
39+
2540
## Limitations
2641

2742
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.
@@ -35,11 +50,11 @@ A few known limitations:
3550

3651
If you find any issues or have feedback at all please [make an issue](https://github.com/BuilderIO/html-to-figma/issues/new)
3752

38-
## Todo
53+
## TODO
3954

40-
- Chrome extension
55+
- Support code import from [JSX Lite](https://github.com/BuilderIO/jsx-lite)
56+
- Support Figma components
4157

42-
<br />
4358
<br />
4459
<p align="center">
4560
Made with ❤️ by <a target="_blank" href="https://builder.io/">Builder.io</a>

‎chrome-extension/README.md

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
# HTML to Figma Chrome Extension
1+
# HTML <> Figma Chrome Extension
22

33
> Chrome extension to import the current page HTML to Figma
44
55
## Usage
66

7-
Coming soon!
7+
1) Install the Then the [chrome extension](https://chrome.google.com/webstore/detail/efjcmgblfpkhbjpkpopkgeomfkokpaim)
8+
9+
2) Go to a page, click the extension icon, and choose "capture current page"
10+
11+
3) Open figma and be sure you have the [figma plugin](https://www.figma.com/c/plugin/747985167520967365/HTML-To-Figma) installed
12+
13+
4) Hit command + / and type "html figma" and hit enter
14+
15+
5) Choose "upload here" and upload the file downloaded by the extension
16+
17+
<img src="https://imgur.com/ARz16KC.gif" alt="Chrome extension demo" width="480" />
818

919
## Building
1020

‎chrome-extension/assets/logo.png

25.1 KB
Loading

‎chrome-extension/dist.zip

339 KB
Binary file not shown.

‎chrome-extension/info/manifest.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"manifest_version": 2,
33

4-
"name": "HTML to Figma",
4+
"name": "HTML <> Figma",
55
"description": "Import a web page to Figma layers",
6-
"version": "0.0.1",
6+
"version": "0.0.5",
77

88
"browser_action": {
99
"default_icon": "icon16.png",
@@ -21,5 +21,5 @@
2121
"128": "icon128.png"
2222
},
2323

24-
"permissions": ["activeTab", "tabs", "http://*/*", "https://*/*", "*://*/*"]
24+
"permissions": ["activeTab"]
2525
}

‎chrome-extension/info/popup.html

+72-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,81 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>HTML to Figma</title>
4+
<title>HTML &lt;&gt; Figma</title>
55
<script src="js/popup.js"></script>
6+
<style>
7+
body {
8+
min-width: 340px;
9+
min-height: 210px;
10+
background-color: #f8f8f8
11+
}
12+
13+
/* Loading animation */
14+
.lds-ellipsis {
15+
display: inline-block;
16+
margin: auto;
17+
position: relative;
18+
width: 64px;
19+
height: 48px;
20+
background-color: rgb(28, 151, 204);
21+
}
22+
.lds-ellipsis div {
23+
position: absolute;
24+
top: 27px;
25+
width: 8px;
26+
height: 8px;
27+
border-radius: 50%;
28+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
29+
}
30+
.lds-ellipsis div:nth-child(1) {
31+
left: 6px;
32+
animation: lds-ellipsis1 0.6s infinite;
33+
}
34+
.lds-ellipsis div:nth-child(2) {
35+
left: 6px;
36+
animation: lds-ellipsis2 0.6s infinite;
37+
}
38+
.lds-ellipsis div:nth-child(3) {
39+
left: 26px;
40+
animation: lds-ellipsis2 0.6s infinite;
41+
}
42+
.lds-ellipsis div:nth-child(4) {
43+
left: 45px;
44+
animation: lds-ellipsis3 0.6s infinite;
45+
}
46+
@keyframes lds-ellipsis1 {
47+
0% {
48+
transform: scale(0);
49+
}
50+
100% {
51+
transform: scale(1);
52+
}
53+
}
54+
@keyframes lds-ellipsis3 {
55+
0% {
56+
transform: scale(1);
57+
}
58+
100% {
59+
transform: scale(0);
60+
}
61+
}
62+
@keyframes lds-ellipsis2 {
63+
0% {
64+
transform: translate(0, 0);
65+
}
66+
100% {
67+
transform: translate(19px, 0);
68+
}
69+
}
70+
71+
</style>
672
</head>
773

874
<body>
9-
<div id="popup"></div>
75+
<div id="popup">
76+
<div style="margin: 0 auto" class="lds-ellipsis">
77+
<div /> <div /> <div /><div />
78+
</div>
79+
</div>
1080
</body>
1181
</html>

0 commit comments

Comments
 (0)