Hey folks, I am pretty excited because of our announcement. I’m pleased to say we published Respresso integration client for Figma. ?

Figma is a design tool like Sketch and designers really like it. Figma has a very similar concept to Respresso, you merely need a browser to work efficiently and they solve every other task. However, every designer must use Windows’ or Mac’s Figma desktop app to install the Respresso plugin.

Install Figma plugin

First of all download and install the desktop application (https://www.figma.com/downloads/) and create an account or log in. Find the Plugins menu option on the left in the desktop app. Click it and use Browse all plugins. Type Respresso into the search field and install it.

Get your integration token

If you are new at Respresso please read our previous post about the concept. A project’s life cycle can start with designers. They have the possibility to upload design assets into Respresso during the design period or at the end of the work. Assets updating during the whole project lifecycle is fully supported.
Designers need an integration token to upload assets from Figma. To get this token designers have to Registrate (https://app.respresso.io/registration/) or Log in (https://app.respresso.io/login) to Respresso. Create a New Project or simply choose an existing one and click Project settings on the top right side of the browser. Open Integration options and click on the token to copy it. (If you can’t see that please ask editor permission from an admin.)

Team and Project

A team defines a group of teammates, who can work with each other in Respresso. They can create projects and share those among team members. A project may contain localization texts, images, colors, fonts, and app icons which are part of the work. The system creates a 1.0.0 version for each asset type by default, however, at localization the designer has to create the default language. This language is the preferred one for the project.

Project token vs. Integration token

One important thing before we import assets from Figma. You, dear reader, may notice another token on the project’s main page. That token is the project token. Attention, project token, and integration token are different. The project token is for developers to sync assets from Respresso into their source code directly and the integration token is for designers to import the design assets from a designer tool. Attention, the integration token expires day by day.

Let’s integrate

Open Figma and go to Plugins and select Respresso.

.

Once you click “Respresso” the integration will be started. You only need to fill the server address and integration token fields once, the plugin will memorize them. Paste the integration token into the Integration token’s field. The server address is in your browser, copy it from the URL section and paste it to the plugin’s server address field. Attention, don’t use the “/” symbol at the end of the URL! 

Sample syntax: https://app.respresso.io

Export mode

This is a comfortable toggle for designers. Choose the preferred option among them. 

All artboards mean that the integration plugin will send all the allowed and pinned for export assets from Figma into a project. No matter how many artboards are in, the plugin will send all of the available design assets.

Another option is the Selected only, which means that the plugin will send only selected items from the project.

Localization

Plugin exports texts from available artboards without any other adjustment. These texts have a key and value pair in Figma where value is a simple text that you can write into a textbox. Key is a more complicated field than value. Open Layers tab and click on a textbox to check and modify it. Find the text with a T symbol on the left in the Layers window. Finally, click twice on the text view to modify the key. This key will be displayed in Respresso as the text’s key.
To improve the convenience we offer a chance to skip irrelevant localization texts. This means that a designer has to use a special key or key member to ignore one or more text exporting. Please write this keyword #respresso-ignore in the text’s key field.

Image

Export images with a pretty simple solution. Select an image and add an export option under the Design section. Inside the export, you can choose a zoom (0.5x, 1x, 2x, etc.), suffix, and file format. Respresso supports all file formats from Figma but we would like to suggest SVG type. Respresso will generate platform-specific vector images from SVG. This means that every platform will receive size optimized files.
Images have keys as well and you can modify them. Figma will open a Layer window and select the item after a double click on the image. After that, double click on the selected item and write a key for the image.

?

Sometimes an image is splitted by the edge of the artboard inside your design. Respresso will get the original image instead of the splitted one. To avoid this situation, use the Clip content possibility among artboard Frame settings. To find this option select the artboard and look for it in the Design tab.

Color

Respresso plugin can export colors from Color Styles. Color Styles is a color palette where designers store individual colors, it is the colors declaration zone. Respresso plugin doesn’t mine colors from artboards because color palette usage is the recommended color handling option. Respresso supports solid and gradient colors, although gradient colors will split by parts of colors and Respresso exports them like solid colors. Local Styles support key and value pairs as well. You can modify the key of the color with a double click on the color under the Local Styles/Color Style section. Be careful, you cannot update any color key from Figma if you uploaded it previously.

App icon

Create your app’s icon(s) in Figma. Respresso plugin supports Simple and Background – Foreground icons. To import app icons into Respresso you have to adjust an exportation mode under Design/Export section on the right and use specific keys for images. Key renaming is mandatory in this situation as we mentioned in the images section. Please use these keys:

• Single icon key: App icon single
• Background icon: App icon background
• Foreground icon: App icon foreground

We are motivated to help designers and developers collaborate, that is why we made updates via reimport possible for all of the assets mentioned above. This possibility concerns only the value field, key modification isn’t enabled from the designer tool. This restriction is needed because developers can modify the key in Respresso and they may use it in a developed source code. This means that developers have chances to use even dummy images and texts during the design process. They will get the updates after designers update one or more of them.

Configure the export

The plugin will show the chosen team and project name based on the pasted token. Check it carefully before you click next! The next section contains the available category versions and languages from the project. Please follow our blog, we will have a deep dive in a later post about versions. Choose the preferred ones from them and click next.

Changelog

The changelog contains all the modifications in the projects. We hope that this small feature will help to supervise the import process. 

Respresso will now export all the necessary images, colors, localization texts, and so on with different scales and formats from the Figma project. 

• • •

Since this is the first version of Respresso plugin, please let us know at info@respresso.io if you’re experiencing any trouble or have ideas about improvements.