Skip to content

10up/embed-block-figma

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Embed Block for Figma

Figma Block

Support Level Required PHP Version Required WP Version WordPress tested up to version GPLv2 License Dependency Review PHP Compatibility PHP Linting JS Linting WordPress Playground Demo

A Figma Block for the WordPress block editor (Gutenberg).

Features

  • Embed a Figma file using a block in the WordPress editor.
  • Paste a Figma URL on a new line in the Block Editor to automatically convert it to a Figma Embed block.
  • Block settings allow for altering margins of rendered Figma file embed

Screenshot of the rendered Figma Embed block in the editor / admin

Requirements

Installation

  • You can install the plugin manually by downloading a zip file from GitHub.
  • You then need to upload the zip file to your WordPress site by going to WP-Admin > Plugins > Add New > Upload Plugin and selecting the zip file from your computer.

Screenshot of the Figma Embed block settings prior to rendering in the editor / admin

Getting Started

Once the plugin is installed and activated, you should see a new Figma Embed block. Insert this block into your content and enter the URL of the Figma file you want to embed.

Screenshot of Figma Embed block with sample URL pre-embed

Assuming it's a valid URL, the block will automatically fetch the Figma file and display it in the editor. Once saved, this will also display on the front-end.

Screenshot of the front-end rendering of the Figma Embed block

Support Level

Beta: This project is quite new and we're not sure what our ongoing support level for this will be. Bug reports, feature requests, questions, and pull requests are welcome. If you like this project please let us know, but be cautious using this in a Production environment!

Changelog

A complete listing of all notable changes to Embed Block for Figma are documented in CHANGELOG.md.

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct, CONTRIBUTING.md for details on the process for submitting pull requests to us, and CREDITS.md for a listing of maintainers, contributors, and libraries for Embed Block for Figma.

Like what you see?

Work with us at 10up