figma-htmlFigma to HTML, CSS, React, Vue, and more!
Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via JSX Lite
How does it work
Export designs to code
- Install the plugin
- Ensure all layers you want to import use autolayout as described here
- Click the "get code" button to launch into the Builder.io editor
- Make any final adjustments, and click "get code" at the top of Builder to view code output, or copy and paste it to content of a Builder account to publish live
Import webpages to Figma designs
- Install the plugin
- In Figma, open a new or existing document, then hit cmd+/ and search "html figma" and hit enter
- Enter a URL you want to import
Why?
- Instantly convert designs into live webpages and code
- Easily import real live site styles for a starting point for designs and prototypes
- Quickly turn real site components into design components
- Easy import from storybook, etc
Chrome Extension
Want to capture a page behind an auth wall, or in a specific state you need to navigate to? Then the chrome extension is for you!
Using the library
// npm install @builder.io/html-to-figma
import { htmlToFigma } from "@builder.io/html-to-figma";
const layers = htmlToFigma(document.body);
// E.g. send these to the REST API, or generate a .figma.json file that can be uploaded through the Figma plugin
Limitations
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)
- all fonts have to be uploaded to Figma or a best effort fallback will be used
If you find any issues or have feedback at all please make an issue
TODO
- Support code import from JSX Lite
- Support Figma components
Made with
评论
ThinkCSS(X)HTML/CSS 框架
TC(”ThinkCSS”)是一个(X)HTML/CSS框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网
ThinkCSS(X)HTML/CSS 框架
0
Hyper.jsJS / HTML/ CSS 终端工具
Hyper™ 是一款JS/HTML/CSS终端工具。该项目旨在为用户创建一个美观的、易于扩展的命令行接口工具,并且构建一个开放式web标准。在保证速度和稳定性的同时,Hyper希望给用户提供一些API
Hyper.jsJS / HTML/ CSS 终端工具
0