Convert Figma to HTML and CSS
Your First Figma to HTML and CSS Export
Easily convert Figma to HTML and CSS with support for multiple pages, custom styles and dynamic elements. You can use your current Figma design or any Figma Template found online to get started.
TIP: Learn How to use Export Kit with Figma and start to experience awesome in seconds.
You can export (a) a single Frame, or (b) all Frames as individual HTML pages. If you export a single Frame then you will get an individual .css file per export. If you export all Frames, you will get individual .html files with a single .css file for easy caching.
HTML Web Forms and Input Elements
Create unlimited HTML Web Forms with dynamic Input elements directly from your Figma design using our ${form} tag. Web Forms allow users to provide information which can then be handled by the client or server back-end.
EXAMPLE: ${form|post:email_form.php} my contact form
All web forms require Input elements to process data on the server. You can add unlimited input items to your webform using our Input Tag.
IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.
TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules.
Input Tags work with Form Tags to provide customization support for web forms. Input Tags will allow you to define many input elements and export them directly in your HTML5 webpage.
- checkbox
- file
- hidden
- password
- radio
- reset
- text
- textarea
- submit
EXAMPLE: ${input:password} user_passwordCustom CSS Input Element Styles
CSS class styles apply directly to any element regardless of the Figma layer type. This makes it easy to fully customize the final output of all projects to match any design specification.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
CSS and JavaScript Lightbox Popup
Create custom dynamic content such as Popups and JavaScript Lightboxes directly using your Figma layers along with ${class} and ${code} tags. You can create any native HTML element or run-time script within Figma.
TIP: Learn more about Class Tag and Code Tag to create native HTML elements.
You can further customize your output with any HTML5 element using our Class Tag with your folders. All elements support custom properties so you can map them any way you like.
IMPORTANT: When creating empty elements (eg. <div />) with Class Tag, you must include an empty argument (eg. ${class|div: }).You can create ANY element including iframe, canvas and object, the following are just examples. Note that Class tag only works with Folders.
HTML Tag | Usage |
<div> | ${class|div: } |
<img> | ${class|img: } |
<span> | ${class|span: } |
<form> | ${class|form:action=”/path/to/script.php”} |
<input> | ${class|input:type=”textarea”} |
<p> | ${class|p: } |
<a> | ${class|a:href=”//google.com” title=”google link”} |
<textarea> | ${class|textarea:rows=”5″} |
<ul> | ${class|ul:class=”menu nav”} |
<ol> | ${class|ol:class=”menu footer”} |
<li> | ${class|li:class=”nav nav-item”} |
<section> | ${class|section:role=”content” data=”val1″} |
<header> | ${class|header:id=”page_content_header”} |
<footer> | ${class|footer:id=”page_content_footer”} |
CSS Rollover and Hover Buttons
Figma to CSS is even easier with Export Kit. You can map any custom CSS style to Figma layers and manipulate any property at run-time. Rollovers and Hovers support text, images, shapes and folders; with a few layer tags you can customize the look and feel of elements with any native CSS state.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
Create pseudo selectors to the full extent of CSS3. You only need to change the layer names to reflect your desired output.
EXAMPLE: my_style:first-child
You can add direct selectors to each layer in styles folder to native HTML elements. You will have to use ">>" (without space) when adding selectors.
EXAMPLE: my_style>>span
You can use any valid CSS3 selector with Export Kit to define your custom classes.
EXAMPLE: my_style>>a[href$=".pdf"]
NOTE: When you create your custom CSS classes, don’t worry about the size, position or content of the layer. Only the styles and effeccts will convert in your output.
CSS styles also support Hidden Layers which will allow you make layers visible/hidden only when required or triggered by the user. Hidden layers can be used to create dropdown menus, steppers, and more – only limit is your imagination!
CSS and JavaScript Animations
Apply any custom CSS or JavaScript animation to any element inside your Figma document. You can embed custom styles and scripts, or load any external file to apply interactivity at run-time.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.
Animated CSS Hover Buttons
CSS and JavaScript animations can apply to any element including buttons, to further enhance your creative design. You can reuse multiple styles and effects to create custom transitions for your HTML export.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.
JavaScript Photo Slideshows
Depending on your slideshow needs, you may want to Google “free javascript slideshow script” and download a free JavaScript slideshow script to get you started with your slideshow.
NOTE: You will need to have a general understanding of HTML and JavaScript to create your own custom slideshow or modify an existing one.
The setup of your JavaScript file is important because the HTML elements the script looks for, are the same Figma layer elements you are required to create. Export Kit makes it easy to map your JavaScript elements to any Figma layer element, you only need to know the name, or the class to include in your PSD.
Website Navigation Menus
Nav Menus are a group of anchor links used to direct users to both internal and external pages. Nav Menus are involved in all common designs for both websites and applications.
TIP: Learn more about Link Tag for individual layers.
TIP: Learn more about Class Tag for groups and folders.
IMPORTANT: You must design your menus to reflect the number of navigation items you require. Eg. if you need 4 nav links, then you must create 4 individual elements in your design.
NOTE: Consider a nav menu will require individual buttons to navigate to each page link. You will need an individual text layer per button to correctly place links and organize your content.
CSS Hover Menus
Add interactivity to navigation menus with custom CSS styles and effects. Each menu item can reuse the same CSS style or have individual styles for custom items.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
Fixed and Static Menus
Take control of your Figma to HTML export with dynamic objects such as fixed and static menus. You can personalize the complete look and feel of your project to provide the best user experience.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.
Website Wireframe Templates
Explore your creative potential and learn how to convert your current design into 100s of sub-designs with a few simple steps. With a single design, you can provide multiple themed layouts to both clients and end-users.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
External CSS and JavaScript Libraries
Load any external CSS or JavaScript library directly into your Figma to HTML export, to include all functionality and effects. You can reuse any CSS style or JavaScript method as required in your project to enhance the end-user experience.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.
Optimize Reusable Images
Your project may contain repeated images which you may not require for your final release. You can reuse images as required with custom CSS styles to save both bandwidth and project size.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
Responsive HTML and CSS
Create Figma to Responsive HTML5 and CSS3 websites using any Figma file. You can define multiple screen sizes to support any number of devices inlcuding desktop, tablet and mobile.
You can set the screen size to any custom size, but generally here are a few common sizes:
- default (required)
- 320 (mobile)
- 768 (tablet)
- 1280 (desktop)
EXAMPLE: ${css|screen:default} default (required)
EXAMPLE: ${css|screen:1280} desktop
Export Kit will not assume you want an element in a particular position or size when you output your responsive css screen. Your design is just that – your design! Export Kit allows you to customize each target screen so you can personalize your Output for that screen.
IMPORTANT: You need 1 screen folder per target screen, if you have 3 target screens – eg. Desktop, Mobile and Tablet, then you will need 3 css screen folders to support the design.
Each responsive css screen folder allows you to change the look and feel of your Output to target the user screen size. You can change the element size, position and effects for each individual css screen folder.
IMPORTANT: DO NOT change the layer names in your css screen folder.
We recommend you start with the LARGEST responsive target screen size and work-down in size when creating css screen folders. This will save you lots of time when creating additional css screens.
NOTE: CSS3 has strict rules when rendering responsive designs, you need to have the smaller target screen rendered before larger ones. Because the Export Process is a bottom-up process, you need to place your smaller screen folders below the larger ones in your Frame.
TIP: You should always add a base or minimum target screen along with your default to prevent display errors, eg. ${css|screen:320} will target most common devices and display on any screen as long as the device is wider than 320px.Responsive Navigation Menus
Further enhance your responsive design with custom layouts for navigation menus. Each responsive screen can contain an individual design with JavaScript code, making it easy to design mobile and 4k menus.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.
