{"id":33591,"date":"2024-04-29T07:00:00","date_gmt":"2024-04-29T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=33591"},"modified":"2025-01-23T18:48:25","modified_gmt":"2025-01-24T02:48:25","slug":"custom-figma-designs-wordpress-blocks","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks","title":{"rendered":"Creating Custom Figma Designs for WordPress Blocks With Cloudinary"},"content":{"rendered":"\n<p>Figma is a cloud-based design tool that enables users to create, collaborate on, and share interface and graphic designs. It provides features for UI\/UX design, such as vector graphics creation, prototyping, and code generation, and is known for its real-time collaboration capabilities, allowing multiple users to work on the same project simultaneously. Its browser-based nature means that it&#8217;s accessible from various devices and platforms, facilitating a seamless design workflow for individuals and teams.<\/p>\n\n\n\n<p>In this blog post, we\u2019ll walk through setting up Figma, creating a custom button image on it, uploading those into Cloudinary, and using the WordPress block editor to help edit and render that image on the frontend.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Figma<\/h2>\n\n\n\n<p>Creating a Figma account is straightforward.&nbsp;<\/p>\n\n\n\n<p>&nbsp;Figma&#8217;s website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <a href=\"https:\/\/www.figma.com\">https:\/\/www.figma.com<\/a>.<\/li>\n\n\n\n<li>Click on the <strong>Get started for free<\/strong> button, located in the top right corner of the homepage.<\/li>\n\n\n\n<li>Choose your sign-up method via Google or email and password creation.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;Set up your profile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once your email is verified and your method of account creation is finished, log in to your Figma account.<\/li>\n\n\n\n<li>Navigate to your profile settings to add more details like your name, profile picture, and job title.<\/li>\n<\/ul>\n\n\n\n<p>Choose your plan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma offers different plans, including a free tier and various paid options.<\/li>\n<\/ul>\n\n\n\n<p>For this blog post, choose the free plan if you don\u2019t already have one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating New Designs<\/h3>\n\n\n\n<p>Now that you have a Figma account, let&#8217;s create a button image to export into Cloudinary.<\/p>\n\n\n\n<p>Creating UI elements and custom illustrations in Figma is a fundamental skill for designers. This step-by-step guide will walk you through the process of designing a button UI element.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open Figma<\/strong>. Start by launching Figma. You can use the web version or the desktop app.<\/li>\n\n\n\n<li><strong>Create a new file<\/strong>. Click the <strong>+<\/strong> icon or select <strong>New File<\/strong> to start a new design project.<\/li>\n\n\n\n<li><strong>Draw the button shape<\/strong>. Select the <strong>Rectangle<\/strong> tool from the toolbar or press <strong>R<\/strong> on your keyboard. Click and drag on the canvas to draw a rectangle. This will be your button&#8217;s base.<\/li>\n\n\n\n<li><strong>Style the button:<\/strong>\n<ol class=\"wp-block-list\">\n<li><strong>Fill.<\/strong> With the rectangle selected, choose a fill color from the right-hand panel.<\/li>\n\n\n\n<li><strong>Rounded corners:<\/strong> Adjust the corner radius to make the corners rounded, giving it a more button-like appearance.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Add text<\/strong>. Select the <strong>Text<\/strong> tool or press <strong>T<\/strong>, click the canvas, and type your button label (e.g., <strong>Submit<\/strong>). Position the text over your button shape.<\/li>\n\n\n\n<li><strong>Adjust text properties<\/strong>. Customize your text&#8217;s font, size, and color from the right-hand panel to match your design.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Group the elements<\/strong>. Select both the text and the rectangle by holding <strong>Shift<\/strong> and clicking both. Right-click and select <strong>Group<\/strong> or press <strong>Ctrl + G<\/strong> (Windows) or <strong>Cmd + G<\/strong> (Mac). This makes the button one cohesive element.<\/li>\n\n\n\n<li><strong>Create a component<\/strong>: With the group selected, click the <strong>Create Component<\/strong> button in the toolbar or press <strong>Ctrl + Alt + K<\/strong> (Windows) or <strong>Cmd + Opt + K<\/strong> (Mac). This allows you to reuse the button across your designs.<\/li>\n<\/ol>\n\n\n\n<p>You should have a Figma page that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Exporting Graphics&nbsp;<\/h3>\n\n\n\n<p>Exporting a graphic in Figma is a straightforward process, designed to give you control over the format and quality of the output file. Here&#8217;s how to do it:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Select Your Graphic<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, navigate to your Figma canvas and click on the graphic, component, or design element you want to export. You can select multiple layers or objects by holding the Shift key and clicking on them.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Open the Export Panel<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With your graphic selected, look for the <strong>Export<\/strong> panel in the right-side properties panel. If it&#8217;s not immediately visible, scroll down in the properties panel until you find it.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Choose Export Settings<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button to add a new export setting if none exists. Figma allows you to export your selection in several formats, including PNG, JPG, SVG, and PDF.<\/li>\n\n\n\n<li>Choose the format that best suits your needs. For web graphics, PNG and SVG are commonly used; PNG for raster images and SVG for vectors.<\/li>\n\n\n\n<li>You can also adjust additional settings such as the scale (e.g., 1x, 2x, or 3x for higher resolution) and suffix (to automatically name files based on their scale or format).<\/li>\n<\/ul>\n\n\n\n<p>For optimal web images, we\u2019ll choose the SVG option in this article.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Export Your Graphic<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once you&#8217;ve configured your export settings, click the <strong>Export<\/strong> button at the bottom of the Export panel. If you selected multiple objects, it would say <strong>Export [number] layers<\/strong>.<\/li>\n\n\n\n<li>Choose where you want to save the file on your computer in the dialog that appears and click <strong>Save<\/strong>.&nbsp; In this blog post, choose downloads.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Cloudinary<\/h2>\n\n\n\n<p>Setting up a Cloudinary account is easy. Go to their website and at the top of the main landing page, click the <strong>Sign up for free<\/strong> button. Once you click that, you have an option to create an account via email and password or OAuth via social login with GitHub or Google.<\/p>\n\n\n\n<p>Once you sign up, navigate to your Media Library page, which will show what media you have in Cloudinary:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-2.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Installation<\/h2>\n\n\n\n<p>You can use any WordPress server and host. Because setting up a local environment to develop a website can be a needlessly extensive process, I chose <a href=\"https:\/\/localwp.com\/\">Local by WP Engine<\/a>, a free program that allows you to easily set up a WordPress environment on your local computer, regardless of your skill level or experience. Local is supported on Windows, Mac, and Linux systems.&nbsp;<\/p>\n\n\n\n<p>Please refer to your WordPress host docs for any special installation instructions.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cloudinary Plugin<\/h3>\n\n\n\n<p>Now that we have a WordPress server installed, let&#8217;s set up the connection between WordPress and Cloudinary. Search for Cloudinary in the <strong>Plugins<\/strong> directory page. Install and activate it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-3.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now that we have it installed in our WP Admin, after you follow the setup wizard, you should have a main dashboard that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>The major value add of using the Cloudinary plugin is how easy it is. Once downloaded, the default settings and media sync is automatic. Your media items are now offloaded to an optimized media CDN!&nbsp;&nbsp;<\/p>\n\n\n\n<p>If you go to your <strong>Media<\/strong> option on the side menu of your WP Admin and start loading in images, the Cloudinary plugin will automatically sync your images to the Cloudinary CDN as well as your dashboard:<\/p>\n\n\n\n<p>The green cloud icon indicates that the sync is successful between your WordPress backend and your Cloudinary account.<\/p>\n\n\n\n<p>The next setting is setting up the Cloudinary DAM option. Navigate back to your <strong>Cloudinary<\/strong> option on the left-hand menu and on the bottom-right part of the screen. Toggle the button to <strong>On<\/strong>. It will give you access to your media library and the features that you similarly have in your Cloudinary console. This is awesome as it eliminates having to switch back and forth from WP admin to your Cloudinary console.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-5.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Custom Image Icon With the Block Editor<\/h2>\n\n\n\n<p>We now have our Cloudinary and WordPress installation all setup and synced together.&nbsp; Let\u2019s use the Block Editor in WordPress.<\/p>\n\n\n\n<p>Navigate to the Posts option and click on any posts you have in there or make a new one and populate it with data.&nbsp; By default, the block editor in WordPress will show a placeholder text, which says <strong>Type \/ to choose a block<\/strong>, and marks the start of a new block as well as the plus sign next to it. Click on that plus sign and select button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-6.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Once selected, click the downward pointing arrow at the end of the selection bar. When clicked, this will give you a menu and option of putting an inline image into the button block. Go ahead and choose that.&nbsp; When you choose that, it will show you the images available to you in WordPress and it will also have a tab available to you for your Cloudinary account due to the plugin that are all being optimized by Cloudinary.&nbsp;<\/p>\n\n\n\n<p>Go to the Cloudinary tab, click&nbsp; the <strong>Upload<\/strong> button and select the button image you created in Figma. This will upload your button image while you are still in the WordPress admin via Cloudinary. This will upload the button image into Cloudinary. Go ahead and choose it by selecting the blank box to check it off.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-7.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Once you check and select the button image, click import. This tells Cloudinary to import this image into your WordPress media library. Now select that image and hit the <strong>Select<\/strong> button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>With a few clicks, we were able to upload an image from our local machine, into Cloudinary then import it into WordPress without having to leave the WP Admin.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This is what you should see once the image is chosen in the button block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-9.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Notice that the button comes with a default background color. This doesn\u2019t look great. In order to change the styling around the button block, navigate to <strong>Block <\/strong>&gt;<strong> Styles <\/strong>&gt; <strong>Background <\/strong>in the left-hand Block settings menu.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This is what your screen should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-10.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>You can modify the color background here. Let\u2019s check no background color so that it takes the color of the post page\u2019s background. Once you choose that, click outside of the box to hide the color choice widget. Then hit the update button at the top.&nbsp;&nbsp;<\/p>\n\n\n\n<p>You should see the button image on your frontend when you visit your WordPress site\u2019s URL like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1712616308\/Blog-Creating_Custom_Figma_Designs_for_WordPress_Blocks_With_Cloudinary-11.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>We now have a clickable functional custom button block element in WordPress, with the image being optimized by Cloudinary that we made in Figma.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This was a simple example to get you started but you can go even further by customizing its appearance, and linking it to any URL. You can customize the text, background color, text color, and add more border radius to make the button more rounded if desired. Additionally, you can align the button, adjust its width, and apply various styles provided by your theme or create custom styles. Please refer to <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/button\/\">the docs here<\/a> if you want further information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion&nbsp;<\/h2>\n\n\n\n<p>I hope this blog post provided a better understanding for you in using the Cloudinary WordPress plugin with the WordPress Gutenberg Block editor and creating custom images in Figma. <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up for a free account<\/a> today to try Cloudinary for yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Figma is a cloud-based design tool that enables users to create, collaborate on, and share interface and graphic designs. It provides features for UI\/UX design, such as vector graphics creation, prototyping, and code generation, and is known for its real-time collaboration capabilities, allowing multiple users to work on the same project simultaneously. Its browser-based nature [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":33690,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,328],"class_list":["post-33591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Streamline Design Workflow: Figma, Cloudinary &amp; WordPress Integration<\/title>\n<meta name=\"description\" content=\"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Custom Figma Designs for WordPress Blocks With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-29T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T02:48:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Creating Custom Figma Designs for WordPress Blocks With Cloudinary\",\"datePublished\":\"2024-04-29T14:00:00+00:00\",\"dateModified\":\"2025-01-24T02:48:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\"},\"wordCount\":1742,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"WordPress\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\",\"url\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\",\"name\":\"Streamline Design Workflow: Figma, Cloudinary & WordPress Integration\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA\",\"datePublished\":\"2024-04-29T14:00:00+00:00\",\"dateModified\":\"2025-01-24T02:48:25+00:00\",\"description\":\"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Custom Figma Designs for WordPress Blocks With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Streamline Design Workflow: Figma, Cloudinary & WordPress Integration","description":"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks","og_locale":"en_US","og_type":"article","og_title":"Creating Custom Figma Designs for WordPress Blocks With Cloudinary","og_description":"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.","og_url":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks","og_site_name":"Cloudinary Blog","article_published_time":"2024-04-29T14:00:00+00:00","article_modified_time":"2025-01-24T02:48:25+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Creating Custom Figma Designs for WordPress Blocks With Cloudinary","datePublished":"2024-04-29T14:00:00+00:00","dateModified":"2025-01-24T02:48:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks"},"wordCount":1742,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA","keywords":["Guest Post","WordPress"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks","url":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks","name":"Streamline Design Workflow: Figma, Cloudinary & WordPress Integration","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA","datePublished":"2024-04-29T14:00:00+00:00","dateModified":"2025-01-24T02:48:25+00:00","description":"Check out this step-by-step guide to integrating Figma, Cloudinary, and WordPress to enhance your design workflow.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/custom-figma-designs-wordpress-blocks#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Custom Figma Designs for WordPress Blocks With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1714499851\/Web_Assets\/blog\/figma_wordpress-blog\/figma_wordpress-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/33591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=33591"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/33591\/revisions"}],"predecessor-version":[{"id":36632,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/33591\/revisions\/36632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/33690"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=33591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=33591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=33591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}