{"id":144,"date":"2021-01-04T09:37:55","date_gmt":"2021-01-04T08:37:55","guid":{"rendered":"https:\/\/blog.respresso.io\/?p=144"},"modified":"2021-01-05T07:49:35","modified_gmt":"2021-01-05T06:49:35","slug":"import-design-assets-from-figma-into-respresso-within-a-few-seconds","status":"publish","type":"post","link":"https:\/\/blog.respresso.io\/index.php\/2021\/01\/04\/import-design-assets-from-figma-into-respresso-within-a-few-seconds\/","title":{"rendered":"Import design assets from Figma into Respresso within a few seconds"},"content":{"rendered":"\n

Hey folks, I am pretty excited because of our announcement. I\u2019m pleased to say we published Respresso integration client for Figma. ?
<\/p>\n\n\n\n

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\u2019 or Mac\u2019s Figma desktop app to install the Respresso plugin.
<\/p>\n\n\n\n

Install Figma plugin<\/h1>\n\n\n\n
\"\"\/
Search Respresso plugin among Figma plugins<\/figcaption><\/figure><\/div>\n\n\n\n

First of all download and install the desktop application (https:\/\/www.figma.com\/downloads\/<\/a>) 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<\/em> into the search field and install it.<\/p>\n\n\n\n

Get your integration token<\/h1>\n\n\n\n

If you are new at Respresso please read our previous post about the concept<\/a>. A project\u2019s 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\/<\/a>) or Log in (https:\/\/app.respresso.io\/login<\/a>) to Respresso. Create a New Project or simply choose an existing one and click Project settings<\/em> on the top right side of the browser. Open Integration options<\/em> and click on the token to copy it. (If you can\u2019t see that please ask editor permission from an admin.)<\/p>\n\n\n\n

Team and Project<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Project token vs. Integration token<\/h2>\n\n\n\n

One important thing before we import assets from Figma. You, dear reader, may notice another token on the project\u2019s 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.<\/p>\n\n\n\n

Let\u2019s integrate<\/h1>\n\n\n\n

Open Figma and go to Plugins and select Respresso.
<\/p>\n\n\n\n

\"\"\/
Find Respresso plugin among installed plugins<\/figcaption><\/figure>\n\n\n\n

.<\/p>\n\n\n\n

Once you click \u201cRespresso\u201d the integration will be started. You only need to fill the server address <\/em>and integration token<\/em> fields once, the plugin will memorize them. Paste the integration token into the Integration token\u2019s field. The server address is in your browser, copy it from the URL section and paste it to the plugin\u2019s server address field. Attention, don\u2019t use the \u201c\/\u201d symbol at the end of the URL! <\/p>\n\n\n\n

Sample syntax: https:\/\/app.respresso.io<\/strong><\/a><\/p>\n\n\n\n

Export mode<\/strong><\/p>\n\n\n\n

This is a comfortable toggle for designers. Choose the preferred option among them. <\/p>\n\n\n\n

All artboards<\/em> 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.<\/p>\n\n\n\n

Another option is the Selected only<\/em>, which means that the plugin will send only selected items from the project.
<\/p>\n\n\n\n

Localization<\/strong><\/p>\n\n\n\n

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<\/em> tab and click on a textbox to check and modify it. Find the text with a T symbol on the left in the Layers<\/em> window. Finally, click twice on the text view to modify the key. This key will be displayed in Respresso as the text\u2019s 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<\/em> in the text’s key field.
<\/p>\n\n\n\n

Image<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/
Export an image<\/figcaption><\/figure><\/div>\n\n\n\n
?<\/td>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.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Color<\/strong><\/p>\n\n\n\n

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\u2019t 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.<\/p>\n\n\n\n

App icon<\/strong><\/p>\n\n\n\n

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:<\/p>\n\n\n\n