Giter Club home page Giter Club logo

figma-to-google-slides's Introduction

Figma to Google Slides

Demo
Convert Figma frames into a Google Slides presentation, as showcased here ๐Ÿ“ฝ๏ธ

The order of the slides is determined by the frame hierarchy in Figma, from top to bottom in the Chrome Extension, but reversed in the Minified Version.

Made by Alyssa X

Installation (for the Minified Version)

  1. Import the Google API PHP Library! โœจ If you import it without composer, make sure that the path on the first line matches where the library is hosted in your server. Otherwise, you can replace that line from the code.
  2. Create a service API key in the Google API Console. You can follow the same steps described in the second section of my guide on using the Google Sheets API ๐Ÿ“– . Import it to your server and replace the path in the code.
  3. Go to your Google Slides presentation, click on "Share" and enter the previously generated email address (your service API email address) into the "People" field with edit permissions ๐Ÿ”‘
  4. Replace the Google Slides presentation ID and Figma file ID from the code ๐Ÿ”—
  5. Find your personal Figma access token by going to the API documentation ๐Ÿค–, scrolling down to the "Access Tokens" section, and clicking on "Get personal access token" on the right. Replace it in the code.
  6. Run the script & enjoy! Every time you run the script you will update the slides with the different frames from Figma ๐Ÿญ

Installation (for the Chrome Extension)

  1. Create a Chrome extension with the files in the Chrome Extension folder (you can follow this guide) ๐Ÿ“–
  2. Generate a OAuth 2.0 client ID in the Google API Console. Select "Chrome App", and insert your App ID (which is generated when you create the extension).
  3. In the manifest.json, replace "google_client_id" with your previously generated OAuth 2.0 client ID.
  4. Generate an API key, leave it as unrestricted, and replace "google_api_key" in the background.js with the generated API key ๐Ÿ”‘
  5. Install the extension in your browser and enjoy!

Feel free to reach out to me through email at [email protected] or on Twitter if you have any questions or feedback! Hope you find this useful ๐Ÿ’œ

figma-to-google-slides's People

Contributors

alyssaxuu avatar

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.