Best Practices for post-processing of your figma assets


Figma to HTML: Best Practices for Post-Processing of your Figma Assets

This article is the first in a series that will cover how to take your assets from Figma and get them ready to be used on the web. I will cover techniques that help you work more efficiently by bringing together the best practices in Sketch, Photoshop, and Illustrator into one workflow. These techniques also give you a single source of truth for your design system.

This article covers what we call “Post-Processing” of your assets. This is the process of taking your designs and making them suitable for use directly in code. We will not be discussing how to write code in this article, rather we will focus on how to prepare our designs for handing off to developers.

There is a great deal of overlap between the different design tools out there when it comes to preparing assets for handoff. I will detail some best practices from each tool, what their strengths and weaknesses are, and how they fit into an overall workflow.

The key to a good front-end experience is well thought out assets. You’re only as good as your tools, and with the advent of design systems like figma, we are provided with even more opportunities of creating modular and well constructed UI elements.

I have used many design systems and have found that in most cases, you will find yourself post processing the assets to make them web ready — I do this by hand, but that is not always necessary. In this article I will go over my best practices for taking your figma assets and getting them ready to be used on the web.

When it comes to taking your figma design and getting it ready for the web you have a few options. In this article I will talk about two of the most common ones:

– Using CSS stylesheets

– Generate CSS from figma plugin

Using CSS stylesheets is a great way to go if you are only working on your frontend. You can use Figma plugin to generate a CSS stylesheet and just paste it into your codebase. The downside is that you need to change/edit it manually and make sure that the classes match up with what you have in your codebase. This is not ideal if you are using react, angular or any other frameworks since the class names are generated by those frameworks and not what you have in the figma file.

The other option is to use the figma plugin, which allows you to take your assets and generate HTML with css directly from them. This works well if you are using react, svelte or any other frameworks that allow you to write JSX (or similar). The downside here is that you end up with large amounts of HTML in your codebase which can be difficult to maintain over time. If designers want to make an update they need to work directly

Post-processing is the most underrated part of the design process.

In this article I’ll share with you my best practices for post-processing your assets and getting them ready to be used on the web.

In order to do this, we’re going to use a real case study.

The Case Study: Figma to HTML

We’ve recently started building a new platform at Lovingly called Project Manager. It’s a tool that helps wedding vendors manage their clients and orders. We hired an amazing designer, Luiza Dias, who did a fantastic job creating it in Figma.

Once you have your Figma asset ready, you might want to post-process it to make it ready for the web. In this article, we will look at some of the best practices for post-processing Figma assets for the web.

It is important to note that the following are guidelines only and not rules. You can always decide to deviate from them if you have a valid reason to do so.

Let’s go through them one by one:

One of the most important aspects of taking your asset from figma to html is post-processing. If a designer makes a change to an asset and it can be automatically propagated through all files, then you have won half the battle.

One example of this is having a single image that can be transformed into different sizes. You want to get into the habit of thinking in terms of ratios. If an element has a width of 75% and a height of 50% then no matter what size you need that element for, you can just multiply its width by 1.5 and its height by 2 and it will be exactly what you need.

You can also have images that are responsible for their own padding/margin. If your image has a bottom margin of 15px, then no matter what size it is, it will always have 15px between the bottom of the image, and whatever comes after it. This is especially useful for srcset images (images that show different sizes depending on screen size) where each image needs its own ratio.

Responsible images allow for greater consistency in your design system, which allows designers to make changes to assets knowing they will propagate throughout the website without them having to worry about any issues that might arise due to inconsistent or incorrect

How to make figma design into html:

-Step 1: Download your Figma file.

-Step 2: Open the zip file in your favorite code editor.

-Step 3: Convert all images to base64 and save them as inline images in your CSS file.

-Step 4: Copy all of the text styles from the CSS file into a new CSS file.

-Step 5: Copy all of your Figma classes into new ID’s in a new HTML file.

-Step 6: Repeat steps 3 and 4 for each of your pages in Figma.

-Step 7: Link to the new CSS files from your HTML files.

-Step 8: Add any additional HTML or CSS that you need for your project.


Leave a Reply

Your email address will not be published. Required fields are marked *