
Figma is a popular [no-code](https://kissflow.com/low-code/no-code/no-code-overview/) tool used by designers and creators to prototype websites. In Figma, you can layout your entire design down to the exact pixel. This tool is great for crafting unique web designs that break the mold of boring website templates. 

The problem with using [Figma](http://figma.com) is that you can spend hours creating the perfect web design but you still  don't have a working website. Now you must spend even more time building or outsourcing the development of your website design.

**With [Figment](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) you can build your website directly from a Figma design, without coding.** Here's how it works:

## 1. Create A Design in Figma

The first step to creating your new website is designing it in Figma. If you are already familiar with Figma this should be a breeze. Even if Figma is new to you, it's easy to learn. 

To speed up the process, there are tons of [free Figma templates](https://www.figma.com/community/web_design) available online. You can grab one of these and customize the design or start fresh and bring your vision to life.

### Design For Both Mobile and Desktop

While you are busy creating your design, consider if you plan to support both mobile and desktop users. Mobile users make up a [large portion of internet traffic](https://www.theguardian.com/technology/2016/nov/02/mobile-web-browsing-desktop-smartphones-tablets), so it is likely that you will have both mobile and desktop visitors. This means you need to create a design for each screen size. 

Don't worry, in Figma it is easy to copy components so you can easily duplicate your design for the other size screen. You can also make use of the [screen frames in Figma](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma) to make your design the perfect size.

## 2. Install the Figment Plugin

When your design is complete, it is time to generate your website. To do this, [install the Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) from the Figma Community page. On the Figment plugin page, click 'Install' in the upper right corner.

Now you have everything you need to create your website from Figma.

## 3. Launch the Figment Plugin

With the Figment plugin installed, go ahead and open up your design in Figma. Next, launch the Figment plugin. To do this, right click on your design and select Plugins and then click the Figment plugin. 

![Launch Figment Plugin](/blog/launch-figment-plugin.png)

This will launch the Figment plugin window inside the Figma app. Figma plugins work in both the browser and desktop version of Figma so you can use the Figment plugin on either platform.

You've just opened up the Figment plugin with your design. You now have everything you need to add hover effects, animations, links, and media to your design before publishing it to your live website. 

To get started let's walk through the layout of the Figment plugin and how to use it.

### Figment Plugin Layout Tour

The Figment plugin provides the ability to fully customize your Figma design before turning it into a website. With the plugin window open, you will notice 3 sections. 

![Figment Plugin Layout](/blog/figment-plugin-screen.png)

The top of the window contains the plugin menu bar. You can use this to navigate the plugin and get quick links to resources.

The main area contains the element editor. This will display the name of the Figma node that you currently have selected and are editing, along with a preview of what that element looks like. This is handy for keeping track of which element you are customizing while using the plugin and letting you see your changes in real time. 

Below that is a list of effects that you can add to any element. Click on one of the rows to select that effect and a new menu will open. Inside this menu you can customize the effect you add to the element and preview it in the editor before adding it.

Each effect type let's you quickly add an effect with default settings or you can customize the effect to your needs.

At the bottom are buttons to publish your site or export the code. You will want to come back to these so you can publish after you finish customizing your design with effects.

## 4. Publish your website

When you are done putting the final touches and are ready to publish your website, Figment makes it so easy to do. Navigate back to the home screen and look for the **Publish to website** or **Export code** buttons at the bottom. 

These give you two options for how you can turn your design into a website.

### Publish Figma Design to a Website

Click **Publish to website** to open the publish menu and you will see a screen like this:

![Figment Plugin Publish Website Screen](/blog/figment-plugin-publish-website-screen.png)

Here you can select the frame you want to export as a website. (**Hint:** To publish multiple frames, place them inside a single frame container)

Next you can view the domain that your new website will be hosted on. If you are on a hobby plan, a domain will be generated for you. If you are on a Pro or Team plan, you can connect your own custom domain by clicking **Use Custom Domain**.

To add metadata to your webpage for SEO purposes, fill in the page title and description. You can even see the Google preview for your webpage.

When you are ready to launch, press **Build & Publish!** and watch your site appear before your eyes. When your site is done building, click the button again to view your new gorgeous website in the browser.

Your website is now officially launched 🚀  and ready for the world to see. Start sharing the URL to show off your new master piece.

### Export Figma Design to HTML and CSS Code

Alternatively, if you want to host your website yourself, Figment let's you export the code for your design. On the home screen, click **Export Code** to open the export code page. 

![Figment Plugin Export Code Screen](/blog/figment-plugin-export-code-screen.png)

You instantly have access to the CSS code for any element you click inside your design. You can copy the code from the code window right below the previewed element. 

To export the full code for the website you will need a Pro or Team plan. Click **Export full page** at the bottom of the screen to get the full HTML and CSS code for your design.


## You're All Set 😆

And with that you are good to go! [Figment](/) makes it easy to build a website from Figma with no coding required. The time to create a website using Figma is cut in half so you can spend more time designing and less time coding.

Host your website with Figment and keep making updates to your site. Make changes in your Figma design and use the plugin to upload your design again. Make any changes in the editor and publish the updated version to your domain. 

Figment is your one stop shop for designing and deploying websites without code. We are excited to see the wonderful things you create with Figment!

The problem with using Figma is that you spend hours creating the perfect web design but you still don't have a working website. With Figment you can build your website directly from a Figma design, without coding.

Transform your Figma Design into a website without coding. Our Figma plugin allows you to export your design as a live website.

How to Turn a Figma Design into a Website - Figment

How to Create a Website with Figma


Figma power users spend hours at a time working in the Figma app to craft their imaginative designs. One easy way to save time, is adding keyboard shortcuts to your Figma workspace.

If you spend lots of time in Figma, speeding up your workflow is essential to maximizing your efficiency. Moving your hands from the keyboard to the mouse to find the menubar and plugin is slow. Keyboard shortcuts are one of the simplest ways to speedup your workflow. 

Shortcuts can take a little bit of time to get used to until you memorize them. Once they become muscle-memory (or finger-tip memory), you will be lightning fast while working in Figma. 

In this article, I'll show you how you can create a keyboard shortcut in the Figma Mac app. I'll be using the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) for this example but you can do this with any [Figma community plugin](https://www.figma.com/community/explore).

![Figment Plugin Homepage](/blog/figment-plugin-homepage.png)

## 1. Install a Figma Plugin

Go to the plugin page and click install in the upper right corner (leave a ❤️ for your favorite plugins). 

With the plugin installed, open up any Figma file to start.

To use a plugin, right click on the screen. In the cursor menu go to plugins and choose your plugin to run it.

![Figment Plugin Right-click Menu](/blog/figma-plugin-menu.png)

Figma plugins can also be accessed in the menubar at the top of the screen. 

![Figment Plugin Menubar](/blog/figma-plugin-menubar.png)

## 2. Open System Preferences

With your plugin installed, it is time to create the keyboard shortcut. MacOS allows you to create custom keyboard shortcuts for actions inside of apps installed on your computer.

To start open System Preferences (⌘ + spacebar to open spotlight and search 'System Preferences'). In System Preferences, go to Keyboard then click the Shortcuts tab at the top, and choose App Shortcuts in the side menu.

![MacOS System Preferences Keyboard Shortcuts](/blog/system-preferences-keyboard-shortcuts.png)

## 3. Create a Mac Keyboard Shortcut

To add the keyboard shortcut, press the + button. In the pop up, choose Figma from the Application drop down menu. 

In menu title, enter the name of the plugin from the menubar exactly as it appears. In our example, the menubar reads "Figment.so", so I'll enter that in the menu title field.

Next, you need to choose the shortcut on the keyboard. It is important to choose a keyboard combination that will not interfere with any other existing keyboard shortcuts. 

Using a combination of ⌘ Command,⇧ Shift, ⌥ Option (or Alt), or ⌃ Control (or Ctrl) is a good idea. Choose two of those and a letter. 

I choose to use ⌘ Command + ⌥ Option + F, for my shortcut. With the popup menu open, type your shortcut and click Add.

![Figment Keyboard Shortcut Setting](/blog/figment-keyboard-shortcut.png)

I checked that this would not interfere with any existing shortcuts by opening the Figma app and pressing this shortcut before I added it. If the shortcut was already in use, I would need to choose another one.

Now that the shortcut is added, let's make sure it worked. Go back to Figma and open the plugins menu from the menubar. The shortcut I just created now appears next to the plugin in the menubar. Success!

![Figment Keyboard Shortcut in Menubar](/blog/figma-plugin-keyboard-shortcut-menubar.png)

To test that our keyboard shortcut works, select an element and run the plugin by pressing ⌘ Command + ⌥ Option + F. Sweet, the plugin works!

## Check out the Figment Plugin

Keyboard shortcuts are great for saving time and so is [Figment](/). We built Figment to save you time when creating a website. Designing your webpages in Figma and then coding them or handing your design to a developer is a slow process. 

With Figment, you can design in Figma and create your website without coding. 

Read our post about [how to use Figment](/blog/how-to-create-website-figma) or [install the Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) right now to see for yourself. Figment is easy to use and in seconds you can turn a Figma design into a website.

Keyboard shortcuts are an awesome way to speed up efficiency when working in Figma. Adding a few keyboard shortcuts for your favorite Figma plugins saves you tons of time.

Add a keyboard shortcut for a Figma plugin in the Figma Mac App to improve your Figma workflow.

How to Make a Figma Plugin Keyboard Shortcut



The Figment affiliate program is designed for influencers, educators, bloggers, and others to get paid for the designers and developers they refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer they refer to Figment.

We at Figment love our affiliate partners, no matter where they are or how they're allowed to take payments. In this guide we'll go over how to take full advantage of our program.

#### Read in this guide

 * [Getting Started](#getting-started)
    * [Affiliate Link](#affiliate-link)
 * [Affiliate Commission](#affiliate-commission)
 * [Affiliate Window](#affiliate-window)
 * [Taking Payments](#taking-payments)
    * [PayPal](#paypal)
    * [Stripe](#stripe)
    * [Fiverr/Upwork](#fiverr-upwork)

## Getting Started
To become a Figment affiliate partner, please fill out the form here: https://share.hsforms.com/1ors4ANG8Rb6aLYj-meze6wc0m3b.

We are in touch with new applicants within 2-3 business days. 

### Affiliate Link
Once approved, we will send you an email with a special link that will be your affiliate link. This link will be unique to you. This link will send users to a specific page where we will register them as referred by you. See eligibility details in the [affiliate window](#affiliate-window) section.

## Affiliate Commission
The commission for affiliates is 50% of subscription payments for the first 24 months – for each subscription made within the [affiliate window](#affiliate-window), or until the subscription(s) is canceled. Each time a customer you referred subscribes to an account or site plan, a Figment team member will review the conversion, and once approved you’ll receive an email confirmation.

## Affiliate Window
Your [affiliate referral link](#affiliate-link) has a 90-day tracking cookie. That means that any person who clicks on your [affiliate link](#affiliate-link), will be tagged as referred by you with a tracking cookie. From the moment they are tagged, you will be commissioned for all subscriptions made until that cookie window expires on day 90. The subscriptions made within those 90 days will be paid out for the defined 24 months, or until those subscriptions are canceled.

## Taking Payments
Affiliate earnings will be paid out on the 15th of each month, or more often in some cases. If you did not receive a payment that you believe you should have, please contact us.

### PayPal
PayPal is temporarily disabled while we work through some issues with our integration. On-demand payments via PayPal can still be requested.

### Stripe
Taking payments with Stripe is the most straightforward payout method. You can simply link your Stripe account in your affiliate dashboard, and we will handle the rest. You will get emails when each payment comes through. 

### Fiverr/Upwork
For our affiliates over at Fiverr or Upwork, we schedule payouts each month with the native subscription feature of both platforms. The set up for this will be handled directly by one of our team members through the Fiverr/Upwork platform directly.

## Advertising guidelines
As a Figment affiliate, the FTC requires that you tell your audience you are using affiliate links. You can make the disclosure within the content itself, or you can provide a page to your audience where they can read a full disclosure.

_Please make sure to review the [FTC guidelines](https://www.ftc.gov/tips-advice/business-center/advertising-and-marketing/endorsements) regarding affiliate links._

------

Contact us if you have any questions regarding our affiliate program.

The Figment affiliate program allows you to get paid for the designers and developers you refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer referred.

The Figment affiliate program is designed for influencers, educators, bloggers, and others to get paid for the designers and developers they refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer they refer to Figment.

Figment.so

How to Create a Website with Figma

3/5/2022 • Tyler Kennedy

How to Make a Figma Plugin Keyboard Shortcut

9/18/2021 • Tyler Kennedy

Figment | Become an Affiliate

9/1/2021 • Nikita Jerschow

Figment.so