Create and publish your portfolio entirely with Figma

ℹ️ This blog post is an English translation of an original article written by product designer Judit Salvadó on her blog, and published here with her permission.

A portfolio website made exclusively with Figma?

Yes! You read correctly 🤭 The latest version of my portfolio was created exclusively with Figma (and a single Figma plugin). Take a look at it here: juditsalvado.figweb.site

Alright, but… What’s the catch?

The answer is none other than a Figma plugin called figma.to.website, created by the same team who made html.to.design.

It’s a relatively new plugin (it was launched at the beginning of the year and is constantly improving with almost daily updates), so keep in mind that there could still be a few bugs or things that will get better with time.

Nevertheless, let’s see what we can achieve with this plugin 👇

Design and publish a website without leaving Figma! No code, no other tools required.

Use all of your favorite Figma features: auto-layout, components, interactions, variables, breakpoints for responsive design…
Generate optimized code stored on a global CDN.
Automatic image optimization.
SEO-friendly: Automatically-generated sitemap, configurable Open Graph data, notifications to search engines when new content is published.
Integration with your analytics, forms, videos, custom HTML…

Plus, it comes with different subscription plans, one of them free which is great for smaller projects or trying out the tool.

Who is it for?

Don’t skip this part! 🚨

It’s important to know if this plugin is for you, so I’ve created this diagram to help you decide:

Ok, now let’s see how it works 🙌

The truth is, there isn’t much mystery to using the plugin. What will take a little more time is creating the different responsive versions of your designs, so they work correctly as webpages, and building some basic animations the plugin allows (if we want any).

So here’s a list of important things to keep in mind to make the most of the plugin and which I had to learn based on trial and error:

In order to achieve a responsive website that works, everything in your designs needs to be using auto layout

To create webpages, you’ll need to put all responsive versions of a design grouped within a Figma section. To customize the URLs of your website, simply add the text you want after a “/” as the title of each section. Here are a few examples 👇

If you want to add animations, you’ll need to create components with their variants and apply the animation using Figma’s prototype features. Try to keep the animations simple, as not everything that you can do in Figma is supported by the plugin (yet).
Even if you don’t need any animations, I also recommend creating components for the elements you’re going to repeat several times throughout your website, such as the footer or the menu. When creating the components, take advantage and add interactions such as links to other webpages or external sites directly in the component; that way you save having to do it in each page or responsive version.

The Free plan only allows for 100 images and we need to keep in mind that if we have 3 responsive versions (desktop, tablet, mobile), each image counts x3. So here are some tips to avoid reaching the 100 images too quickly:

Only create the desktop and mobile version. Adding the min and max widths should be enough with these two versions.
Use font icons as opposed to graphic icons in .svg or .png formats, that way the icons will count as text instead of images.

Last but not least, here’s an explanation of how to publish a website which only requires two simple steps:

STEP 1: Open the plugin and add all your sections as webpages

STEP 2: Go to Settings and personalize the favicon, meta descriptions, domain and add a tag for Google Analytics or other analytics tools if you use them

And you’re done! 🎉 Not much mystery to it. The most difficult parts are getting your animations to work smoothly, and ensuring that all frames are properly created with auto layout in order for responsiveness to work.

Keep in mind that there may be a few bugs or small issues along the way, as the plugin is still new and the team are continually working on it.

If you’re still not 100% clear about how to use it, I recommend watching this video from Raúl Marín who explains the full process in under 15 minutes.

*****

The original post was written in Spanish by Judit Salvadó on Substack. It has been translated and reposted here by the figma.to.website team with her full permission.