{"id":268728,"date":"2018-03-23T06:50:03","date_gmt":"2018-03-23T13:50:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=268728"},"modified":"2018-03-27T08:48:57","modified_gmt":"2018-03-27T15:48:57","slug":"figma-web-api","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/figma-web-api\/","title":{"rendered":"Figma Web API"},"content":{"rendered":"

Figma launched their Web Platform API which allows developers to build on top of and extend the features of their web-based design tool. They also published a quick post<\/a> about the release that showcases how design teams at Uber and GitHub are starting to use the API but they also dig into a few public extensions that are available to use today.<\/p>\n

AirBnB is also all over it<\/a>. No surprise as they seem to be leading the industry in creating, extending, and integrating design tooling. <\/p>\n

\n

Our friends at Figma recently opened up the first layer of their API to the public. Their cloud-based, multiplayer-by-default design tool is the perfect environment for considering Design Intelligence as an agent that, much like a colleague, could truly exist alongside us.<\/p>\n

We\u2019ve been having fun playing with it for the past few months, building workflow tools we once only dreamed of.\n<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Figma launched their Web Platform API which allows developers to build on top of and extend the features of their web-based design tool. They also published a quick post about the release that showcases how design teams at Uber and GitHub are starting to use the API but they also dig into a few public […]<\/p>\n","protected":false},"author":223806,"featured_media":268779,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/figma.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":372991,"url":"https:\/\/css-tricks.com\/building-interactive-figma-widgets\/","url_meta":{"origin":268728,"position":0},"title":"Building Interactive Figma Widgets","date":"September 12, 2022","format":false,"excerpt":"Figma has always\u00a0encouraged collaboration\u00a0between developers and designers. It strives on an endless treasury of community-made plugins. Need\u00a03D elements?\u00a0There\u2019s a plugin for that.\u00a0Need\u00a0abstract SVGs?\u00a0There\u2019s a plugin for that, too. That said, the design part of Figma has always been relatively static \u2014 always working with unmovable rectangles connected to each other\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/figma-widgets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303798,"url":"https:\/\/css-tricks.com\/tools-for-optimizing-svg\/","url_meta":{"origin":268728,"position":1},"title":"Tools for Optimizing SVG","date":"March 17, 2020","format":false,"excerpt":"This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/svg-services.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359201,"url":"https:\/\/css-tricks.com\/build-great-apps-designer-and-developer-collaboration-just-got-easier\/","url_meta":{"origin":268728,"position":2},"title":"Build Great Apps: Designer and Developer Collaboration Just Got Easier","date":"December 20, 2021","format":false,"excerpt":"We're going to go over details on how designer \u2194\ufe0f developer collaboration in AWS Amplify Studio can make app building easier, but let's cover one of those things right at the top here. Say your designer (or you!) like to work in Figma, the predominant tool in UI design these\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/featured-amplify.png?fit=1200%2C790&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351697,"url":"https:\/\/css-tricks.com\/eyedropper-api-dropped\/","url_meta":{"origin":268728,"position":3},"title":"EyeDropper API Dropped","date":"September 10, 2021","format":false,"excerpt":"I had no idea this was coming but it's pretty neat! Chrome has shipped the EyeDropper API in v95 (Canary, as I write). https:\/\/twitter.com\/tomayac\/status\/1432969851811794944 https:\/\/twitter.com\/matanbobi\/status\/1432681072790171656 I like how it can grab a color from anywhere on the screen, not just within the browser window. Maybe Figma can make use of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/preview.png?fit=961%2C676&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333643,"url":"https:\/\/css-tricks.com\/figma-crash-course\/","url_meta":{"origin":268728,"position":4},"title":"Figma Crash Course","date":"February 1, 2021","format":false,"excerpt":"Totally free course from Pablo Stanley. Can't beat that. Figma is just blowing up, and for good reason. It's good software aligned with what digital designers need. It's fast. It's on the web, so you can't lose stuff and don't need to figure out a storage strategy. It's useful beyond\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-29-at-10.11.26-AM.png?fit=1200%2C561&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279030,"url":"https:\/\/css-tricks.com\/nesting-components-in-figma\/","url_meta":{"origin":268728,"position":5},"title":"Nesting Components in Figma","date":"November 30, 2018","format":false,"excerpt":"For the past couple of weeks, I\u2019ve been building our UI Kit at Gusto, where I work, and this is a Figma document that contains all of our design patterns and components so that designers on our team can hop in, go shopping for a component that they need, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/figma.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/figma.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268728"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=268728"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268728\/revisions"}],"predecessor-version":[{"id":268954,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268728\/revisions\/268954"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/268779"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=268728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=268728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=268728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}