Giter Club home page Giter Club logo

respresso / respresso-figma Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 77 KB

Save development time! Respresso automatically transforms and delivers your digital assets into your projects https://respresso.io

Home Page: https://www.figma.com/community/plugin/748148555375738597/Respresso

License: Apache License 2.0

developer-tool figm figma-plugin figmadesign collaboration collaborate designer resource-management resource-manager resources

respresso-figma's Introduction

๐Ÿ›‘ Docs out-of-date notice! ๐Ÿ›‘

This documentation is not updated anymore. All documentation of Respresso moved to https://respresso.io/docs.

โœ”๏ธ Up-to-date docs of the Figma plugin is here:

Content Link
Installation + Usage https://respresso.io/docs/integration-figma-plugin
Config options https://respresso.io/docs/integration-introduction
Localization specific options https://respresso.io/docs/localization/figma-plugin
Image specific options https://respresso.io/docs/image/figma-plugin
Color specific options https://respresso.io/docs/color/figma-plugin
App icon specific options https://respresso.io/docs/app-icon/figma-plugin

Seriously, ๐Ÿ›‘ stop ๐Ÿ›‘ here and go to the new docs!


Export assets from Figma with Respresso Figma plugin Tweet

Introduction

Respresso is a digital asset handler, which automatically transforms and delivers assets into your project. Digital assets, such as: localization strings, images, colors, app icons. Now, we created an integration tool for you to easily export your assets from Figma to Respresso. Attention, you cannot import these assets from Respresso to Figma. OK, let's see how to use it.

Integration settings

Server address

Basically, it is https://app.respresso.io. Change this address if you have an own Respresso server.

Integration token

Respresso has an integration token for importing data from outside tools. This token isn't the same with your project token. You will find this token in the path of Project settings/Integration options.

Export mode

This is a simple option to choose a comfortable way of exportation. You can export all of your artboards or only the selected items.

Localization

Plugin will export your localization texts if you leave the tick in the rect. These texts have a key and value pair inside Figma. Value is a simple text that you can write into a textbox. Key is more complicated than value. You will find this under the Layers tab. Click on the textbox and check the Layer tab. In that you can modify the key with a double click on the textview with a T symbol. Respresso suggests a key usage like these:

  • section.name_of_the_function.name_of_element (main.menu.log_out)
  • section_name_of_the_function_name_of_element (main_menu_log_out)
  • connected_to.function_name_of_element (user.log_out)
  • etc.

Sometimes designers have to modify localization inside the designer tool. We are motivated to help you and for developers that is why you can reimport all of your localization texts. Let see how can we handle it:

  1. Modifying the value is the simplest case. Respresso will follow the modification.
  2. Key modification not acceptable function through export. Respresso will skip this request.
  3. Remove isn't acceptable as well (through export process).

Sometimes you would like to skip some texts. In that case add this command: #respresso-ignore to the text's key field.

Color

Respresso plugin can export your colors from Color Styles. Export all of your colors from artboards not an option, please use Color Styles. 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. You can modify the key of the color with double click on the color under Local Styles/Color Style section.

Respresso supports the modification of the color. Change the value and reimport the project. Key modification isn't supported. If you leave the key of the color blanket or you try to import a color with existing key (into Respresso) Respresso can change the name of the key. Our small AI makes a prediction to determine the name of the color.

Image

You can export images with a simple solution. Select an image and add an export option under Design section. Inside the export you can choose a zoom option (0.5x, 1x, 2x etc.), suffix and file format. Respresso supports all file formats from Figma but we would like to suggest svg type. Images have keys as well and you can modify it after a double click on the image. After that Figma opens a Layer window and selects the item. Suffix value will place the end of the key.

Sometimes an image is splitted by an 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 at the Design tab. Image modification is fully supported.

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 add an export option under Design section and use specific keys for images.

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

Modification is supported as well.

Integration config

Configuration windows show basic information about a team and project. You can select a version for each digital asset, which was selected previously.

Change Log

Change log contains all modifications (create or update) about the project. This may help you to follow the import process.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.