Code Monkey home page Code Monkey logo

fxa's Introduction

fxa โœจ figma export for android (as it should be)


GitHub tag (latest by date) GitHub license

A multi-platform tool for exporting resources from Figma to an Android project.

Features

  • ๐Ÿฅ‘ fxa convert images to WEBP and icons to Android Vector Drawable XML.

  • ๐Ÿฅฐ fxa works on macOS, Windows and Linux. One small executable for each platform.

  • ๐Ÿš€ No external dependencies. No webp package, no java and no vd-tool required.

  • ๐Ÿค– Figma-export-like api. Similar YAML config file, similar CLI arguments.

  • ๐Ÿงญ Good error description. There will always be a clear explanation after the inscription Error.


How to install?

Installation via package managers will be available later.

Installation on MacOS and Ubuntu

Just run on terminal:

curl -o- https://raw.githubusercontent.com/tonykolomeytsev/fxa/master/install.sh | bash

Or download suitable executable from the latest release and install it manually.

Installation on Windows

Download the zip archive for windows from the latest release, unzip it and run the installer fxa.msi. Allow the installer to add the program to PATH so that it is available to run in the terminal.

Build source code

Install Rust compiler: https://www.rust-lang.org/tools/install

And then clone and build the project with cargo:

cargo build --release

And then take the compiled program {project_root}/target/release/fxa

How to use?

Use fxa --help for help :)

Settings for the utility are passed not only through command line arguments, but also using a YAML file. If you don't have this YAML file yet, you can generate it yourself and fill in the required fields in it. To generate the file, run:

fxa config config.yaml

And then fill config.yaml with your data. Required fields:

  • figma.fileId โ€” Identifier of the Figma file. To obtain a file id, open the file in the browser. The file id will be present in the URL after the word file and before the file name.

  • android.mainRes โ€” Relative or absolute path to the main/res folder of your android module. This field is required, but if you store icons and images in different Gradle modules, do not specify this parameter, specify the following:

    • android.images.mainRes โ€” Path to the main/res folder of your Gradle module with images.

    • android.icons.mainRes โ€” Path to the main/res folder of your Gradle module with icons.

You also need to provide Figma personal access token for the app to export resources from Figma.

How to get personal access token: https://www.figma.com/developers/api#access-tokens

Personal access token is passed as a command line argument when running the images and icons commands:

Like this: fxa images -t TOKEN -c config.yaml <image names...>

And this: fxa icons -t TOKEN -c config.yaml <icon names...>

BUT! You can DO NOT write the token in command line arguments if you specify the token in the FIGMA_PERSONAL_TOKEN environment variable.

Setup completed, what's next?

Export images

Pictures will be loaded into their drawable-XXXX directories. Moreover, to each directory in its own scale, which is specified in the YAML config, in android.images.scales field:

# default values, but you can change them
scales:
    mdpi: 1.0    # for drawable-mdpi
    hdpi: 1.5    # for drawable-hdpi
    xhdpi: 2     # and so on
    xxhdpi: 3    # etc.

You can specify the format for the exported image with field android.images.format. The format can be png, webp, svg. Default if webp. Webp compression level can be specified in parameter android.images.webpOptions.quality. Default quality is 85 (%).

To export run:

fxa images -c config.yaml img_lol "img_kek" ...

Export icons

Icons will be loaded into drawable directory. You can specify the format for the exported icon with field android.icons.format. The format can be svg or xml (Android Vector Drawable). Default if xml.

To export run:

fxa icons -c config.yaml ic_24/icon1 ic_16/icon2 ...

What else should I know?

The utility loads temporary files into the .fxa/ directory. For example, it caches json with the structure of Figma documents that were previously exported. The cache files have the following names: cache_<FIGMA_FILE_ID>.json.

This is done because accessing the file through the Figma API can take a very long time, and if you suddenly misspelled the name of the image/icon, you might not have to reload the whole Figma document.

But if something has been updated in the original Figma document, then you won't see those changes because of the cache. Therefore, here is the command that clears the cache:

fxa cleanup

Limitations

At the moment, the utility is guaranteed to correctly convert SVG icons to XML only if the icons do not have gradient fills and all elements (such as <rect>) have already been converted to <path>.

Project status

The project is in progress and is being developed just for fun. Additional features will be added in the future.

fxa's People

Contributors

tonykolomeytsev avatar

Watchers

 avatar

fxa's Issues

Add support for theme suffixes

If the image is not found in the list of frames, check if there are images with the same names, but with the suffixes _light, _dark.

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.