How to publish your designs inside Figma

Using Auto Layout, Components and Variants.

In this article, I will show you how you can use Figma as your publishing tool. No more hand-off to developers or recreate your designs in Webflow or Wix. This approach allows you also to make your sites responsive without ever touching one line of code.

Responsive demo of a site designed and published inside Figma

Introduction

Figma is a vector graphics editor that allows us to build several digital assets. These can be illustrations, icons, NFTs or user interfaces and design systems. And that is because of the latest that Figma has customers like Airbnb and Netflix paying top dollars to create, organize and collaborate on their interface designs.

On top of this, Figma has powerful prototyping features to allow you to create interactive flows that explore how a user may interact with your designs. Prototypes are great to: preview interactions and user flows. Share and iterate on ideas.

However, how wonderful would it be to have a button to publish your sites without leaving Figma?

Today, I’ll teach you how you can do it.

Tutorial

We will build a simple personal site — fully responsive — with a hero and a testimonials section.

The first step I like to take is to set my own styles. Specifically, Text Styles and Color Styles.

Text and Color Styles for our site

From here, we can create our buttons. Let’s build two versions: primary and transparent. Each version will have a hover state interaction. Notice the subtle difference from the buttons below:

To create these buttons, we will need to learn about Components and Variants. This is super easy:

• Components: reusable elements across your design (e.g. buttons)
• Variants: group and organize similar components into a single container (e.g. primary and transparent buttons)

Buttons

Let’s create a button from scratch. Let’s type the letter “T” and write “BUTTON”. Then, hold “SHIFT” and hit the letter “A” to create an auto layout frame from the text “BUTTON”.

Create a button using only the Keyboard

Now, let’s center our button’s content, give it top and bottom padding and add a black background color.

Let’s style our button with the help of auto layout

Woo-hoo, we have done our primary button! Now, we need to turn this button into a component and add a new version for the hover state. Let’s duplicate it and create multiple components from while selecting both buttons.

Duplicate button and turn them into components

From here, let’s create the hover interaction. For that, we need to group our button components as Variants. Select both buttons and click “Combine as variants” in Variants row. Next, style the hover state with background color and shadow. Finally, switch to Prototype, and add a new hover interaction.

Create a Variants group with a default and a hover state

Ufff, this was intense. We've learned so much from this one button, right?

• From Text to Auto Layout
• From Auto Layout to Component
• From Components to Variants
• From Variants to Hover Interaction

The good news is: this is all you need to know to publish sites directly in Figma.

Let’s rename this Variant to “BRAND_BUTTONS” and create a transparent button using the same techniques. Were you able to do it? If not, comment here, and I’ll help you as much as I can :)

Here’s how my final Variants looks like:

Variants for Brand Buttons

Hero

The hero section has two columns. On the left we have text content with buttons in the end; and on the right we have a beautiful picture of you. This is how the structure of this section looks like:

Hero section structure

Every section is grouped by an Auto Layout frame to make it easy to edit spacing and responsive. The image is added using the Fill property. Don’t worry if this looks too complicated, you’ll get the hang of Auto Layout in no time.

If we present our design (i.e. click the play button in the top right corner of Figma UI) we will notice the hover state, but of course, it’s not a functional nor responsive site (yet).

The presentation mode for the Prototype in Figma

Testimonials

The testimonials' section will have three testimonials. Each testimonial card is a component (because it’s a reusable element).

Testimonial’s card component

Again, this component heavily uses Auto Layout to ensure the best experience possible. It basically has a header and a content. Inside the header we have the media object (with the avatar, name and job of the person) and a quote icon.

If we add three of these testimonials card components into a horizontal Auto Layout frame, we will have a testimonials' section that looks like this:

Testimonials’ section

Final touches

To finish this exercise, we can add a navigation bar and a footer to have a simple site that can be the base of your updated or new portfolio.

Simple portfolio site design using Figma

Publishing

If we want to publish this simple site we have to duplicate its design in a platform like Webflow, Squarespace or Wix. Or if we know how to code, we can lose a few hours (or days, depending on your programming skills) to convert this into a functional site. Or, the last resort could be to pay a programmer or an agency to take the Figma file and publishing it for you.

Publishing Plugin for Figma

In practice, it’s impossible to publish your design using only Figma. We, Figma users, are dependent on developers or on third party tools where we have to duplicate our work. Because of this, I created a Figma plugin to publish your designs without you ever leaving Figma.

Here’s a quick demo:

makers.so: a website builder inside Figma

With this Plugin, we can take the design we did and publish it with one click. The first thing to do after opening the Plugin is to add a new page (special frame created by the Plugin that represents a web page).

Create a new page from the makers.so Plugin

The Plugin has already a collection of pre-built components (similar to other website builders). Let’s add a navigation bar and a footer from the list to ensure they are responsive out of the box.

After adding the pre-built navigation bar and footer, we can easily convert them to our own design.

For the hero and testimonials sections, because we already have a design, we can just add the pre-built component “Columns”. After adding two of these, we can simply add our content inside each column.

Add the pre-build component called “Columns” and insert our design content inside the respective column

Let’s check how this looks in the browser by clicking “Preview”.

Going from Figma to site with one click using makers.so

Wow, this was fast! We have a live site, you can check it here.

Responsiveness

For the pre-built components, responsiveness comes out of the box. However, if you noticed on the previous video, the hero title is too large on mobile and the testimonials' section isn’t centered on mobile. We can fix this by having two versions: a desktop and a mobile. The desktop version will be hidden on “Tablet” and “Phone” and the mobile version will be hidden on “Desktop”.

Control your designs according to the screen size

Accessibility

To help with accessibility, this Plugin allows you to define an alt text description to every image and to assign an HTML tag to text. Making it possible to assign H1, H2 or P according to your needs.

Assign HTML tags to text node and add an alt description for each image

Conclusion

Figma is brilliant! And it’s mostly used to create user interfaces, but the process of turning its designs into a working site is tedious and time-consuming. This Plugin makes you, the designer, fully independent of external tools and gives you powers that you can use to stand out from the competition.

Hope this is helpful for you. If so, I’ve prepared a collection of templates to help you get started with makers.so.

If you read thus far, thank you! I’d love to hear your thoughts on this. I’m happy to answer any questions about it, feel free to comment below.

Thank you,

John

For a bit of context, John is a solo-founder and started makers.so after sharing his idea on the Figma subreddit about how awesome it would be to have a button in Figma to publish my designs. A good amount of people seemed to agree, and that was enough to start working on it. This is turning out to be a super fun project, and John has been working full-time for the last two months.