Introduction

Being accustomed to implementing designs on frontendmentor.io where all assets are usually provided, I was astounded to be presented with designs without assets clearly provided.

The first time I was made to implement Figma design in code I simply zoomed to unsplash.com where developers get astonishing images free of charge, I used the images to replace the images on the design. But I knew this wasn't the best way to go, I needed to implement the design exactly as it was. Learning to export Figma images is far easier than I thought and would love to share my experience.

In this piece, we'll be looking at the following.

• Selecting Figma images.

• Changing the default settings.

• Fetching codes.

• Exporting the images.

Selecting An Image

To have maximum access to information on the design you must first Sign-Up/Sign-In to Figma account and use a provided link from the UI designers to view the design to be implemented.

Once you have Signed-in and got an image/file to be exported, click on it. Here let's take a background image for example.

Click on any part of the image, then move to the side navigation bar where the name of the image is located with its parent container as a heading to the file, click on the parent container to access the full image.

Changing the default settings

Here some of the parameters could be changed depending on your need, click on the export button at the top right of the page, click on the plus(+) button in front of the file name to see its properties. This includes the size, and type of the file which may be PNG, JPG, SVG.

Fetching codes.

Figma is such an awesome tool that it allows files code to be inspected and copied for easy implementation. To see the CSS code of a file, click inspect button at the top right of the dashboard and view codes for the file, the codes are presented in both table form, and in CSS, choose as appropriate.

Exporting the images

To export images to your work area, click on the export button close to inspect button at the top right of the dashboard, then click the plus button in front of the file name to see other properties. At this point, you could preview the file to see how it looks before exporting. Finally, click the export button above the preview button and choose the location to save your file.

Yep, we are done exporting files from Figma for implementation in codes, Note that for a single file you do not need to click the parent container before exporting as we did for the background image.

Thank you, do well to leave a comment and share.