{"id":1180,"date":"2025-02-26T12:10:00","date_gmt":"2025-02-26T04:10:00","guid":{"rendered":"https:\/\/hsiehchengyi.com\/?post_type=blog&#038;p=1180"},"modified":"2025-08-12T17:28:16","modified_gmt":"2025-08-12T09:28:16","slug":"essential-tips-for-building-style-guides-in-figma-en","status":"publish","type":"blog","link":"https:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-en\/","title":{"rendered":"Essential tips for building style guides in figma"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg\" alt=\"Essential tips for building style guides in figma\" class=\"wp-image-1170\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover-300x169.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover-768x432.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover-1536x864.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover-1160x653.jpg 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Style guides are formal or informal documents that outline the details of different aspects of a design system, such as colors, typography, or effects. Building style guides ensures the quality and consistency of the design, providing a single source of truth and therefore speeding up both the design and development processes.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When to use style guides<\/h2>\n\n\n\n<p>The timing of using style guides can vary. On one hand, design teams usually have internal style guides that evolve alongside design decisions. These style guides are usually simple, loosely defined, and sometimes even conflict with each other because they are often created in a relatively short amount of time. However, the main benefit of building them is to visualize the scope and scale of the design system, helping designers easily review and refine each guide later.<\/p>\n\n\n\n<p>On the other hand, design teams often compile another version of style guides for external sharing. These style guides are usually well-detailed, precise, and stable. Their main goal is to provide a well-structured, comprehensive, and polished reference for both internal and external stakeholders, such as developers, marketing teams, and external collaborators.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What should be included<\/h2>\n\n\n\n<p>Building well-structured style guides can be frustrating, as there are many details to include, and they can easily be overlooked. Below is a suggestion of elements you should include when creating style guides:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Essentials<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Time created<\/li>\n\n\n\n<li>Title (For organizing multiple style guides)<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For color style guides<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Style name<\/li>\n\n\n\n<li>Color value (Hex\/ RGB\/ RGBA\/ HSL\/ OKLCH)<\/li>\n\n\n\n<li>Modes (If applicable)<\/li>\n\n\n\n<li>Alias variable (If applicable)<\/li>\n\n\n\n<li>A short text to explain style usage<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For typography style guides<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Style name<\/li>\n\n\n\n<li>Font name<\/li>\n\n\n\n<li>Font size<\/li>\n\n\n\n<li>Line Height<\/li>\n\n\n\n<li>Letter spacing<\/li>\n\n\n\n<li>Paragraph spacing<\/li>\n\n\n\n<li>A short text to explain style usage<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For effect style guides<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Style name<\/li>\n\n\n\n<li>Drop shadow properties (Color, Opacity, X, Y, Blur, Spread)<\/li>\n\n\n\n<li>Blur value (If applicable)<\/li>\n\n\n\n<li>A short text to explain style usage<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugins that automate style guides creation<\/h2>\n\n\n\n<p>Building style guides from scratch takes a significant amount of time and effort\u2014not to mention the ongoing work of regularly checking and updating them. This is where plugins come into play, helping streamline the process and reduce manual effort. Below are the plugins that aims at automate the style guides creation process:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\">Spaciiing<\/a> (Paid)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1.jpg\" alt=\"Figma plugin spaciiing \u529f\u80fd\u4ecb\u7d39\" class=\"wp-image-903\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1-300x169.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1-768x432.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1-1536x864.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2024\/07\/promotional-image-1-1160x653.jpg 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1.jpg\" alt=\"\" class=\"wp-image-1172\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-1-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The &#8220;Catalogue&#8221; feature inside this plugin helps you create a style guide with a single click. Moreover, its recent update allows users to sync notes on style guides back to Figma for future regeneration, making the style guides truly interactive.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> Support the creation of style guides for Figma styles and variables, covering a wide range of types, including colors, typography, effects, and numbers.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> The output is not designed for presentation formats such as a 16:9 or 4:3 ratio. Additionally, it is a paid plugin costing $3 per month, but free users can access this feature after a 30-second wait.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <a href=\"https:\/\/www.figma.com\/community\/plugin\/838622388628773312\/automatic-style-guides\">Automatic Style Guides<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"960\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138.png\" alt=\"\" class=\"wp-image-1188\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138-300x150.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138-768x384.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138-1536x768.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/1709db19cc1635a012954549ef4f59ccf10f7138-1160x580.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2.jpg\" alt=\"\" class=\"wp-image-1173\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-2-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you to transform your existing styles into beautifully crafted documents.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> The output can be exported directly as a PDF for sharing purposes. Additionally, the generated results can be updated with dedicated command, which is really convenient.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> This plugin does not allow users to specify which parts of the styles should be generated as style guides. Therefore when used in a large file, it may become laggy.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1270740078273146018\/variable-color-style-guide\">Variable Color Style Guide<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"960\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6.png\" alt=\"\" class=\"wp-image-1189\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6-300x150.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6-768x384.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6-1536x768.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/d67ef8d09c7b9590555ea6170f320d577f6fa5a6-1160x580.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3.jpg\" alt=\"\" class=\"wp-image-1174\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-3-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you create style guides for your figma color variables.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> You can choose to output the result as either a card or a table. Additionally, it automatically generates a link that allows you to quickly jump to a specific section. Description writes on figma native field is also supported.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> This plugin separate documents based on variable mode when &#8220;card&#8221; output style is selected, making it hard to find and compare value for a single variable.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1264487790204417601\/color-variables-style-guide\">Color variables style guide<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"960\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a.png\" alt=\"\" class=\"wp-image-1190\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a-300x150.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a-768x384.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a-1536x768.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/e3812b96b4e91f5e97198dcff6f4687418145a2a-1160x580.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4.jpg\" alt=\"\" class=\"wp-image-1175\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-4-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you create style guides for your figma color variables. Description writes on figma native field is also supported.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> You can choose to output the result as either a card or a table.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> It seems that the plugin does not support alias variables. When attempting to generate them, the plugin skips the generation and displays an error alert.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1349082257648855815\/color-variables-style-guide-generator\">Color Variable Style Guide Generator<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69.png\" alt=\"\" class=\"wp-image-1181\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69-300x169.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69-768x432.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69-1536x864.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/da6f762c49cc520f2ba86486ce7718d43859ca69-1160x653.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5.jpg\" alt=\"\" class=\"wp-image-1176\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-5-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you create style guides for your figma color variables.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> The output document is beautiful and elegant, best suit for designer who prefer simple design style.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> This plugin does not allow users to specify which parts of the styles should be generated as style guides. In addition, it only support color value to be presented as HEX format.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1209900339618349575\/typography-style-guide-generator\">Typography Style Guide Generator<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb.png\" alt=\"\" class=\"wp-image-1182\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb-300x169.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb-768x432.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb-1536x864.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/384136aa13eba96e75b4e677d90f980b5a8e0fcb-1160x653.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6.jpg\" alt=\"\" class=\"wp-image-1177\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-6-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you create style guides for your figma typography style.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> The output document is beautiful and elegant, best suit for designer who prefer simple design style.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> Some of the properties such as font size, line spacing, letter spacing and text case are generated without title, making it confusing and hard to read.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. <a href=\"https:\/\/www.figma.com\/community\/plugin\/941680506965181089\/color-style-guide\">Color Style Guide<\/a> (Free)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"960\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940.png\" alt=\"\" class=\"wp-image-1183\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940-300x150.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940-768x384.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940-1536x768.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/a44940ea9ff607ab05225583b4f04bbd64bbc940-1160x580.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7.jpg\" alt=\"\" class=\"wp-image-1178\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-7-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin helps you create style guides for your figma color styles.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> This plugin is simple to use, description writes on figma native field is also supported. It allows to display HEX, RGB and HSL at the same time.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> This plugin does not allow users to specify which parts of the styles should be generated as style guides.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. <a href=\"https:\/\/www.figma.com\/community\/plugin\/1419534771797244519\/print-style-guide\">Print Style Guide<\/a> (Paid)<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2.jpg\" alt=\"\" class=\"wp-image-1184\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2-300x169.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2-768x432.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2-1536x864.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/acd0382c3b378c42d20604d4dfeba41298d3c3a2-1160x653.jpg 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8.jpg\" alt=\"\" class=\"wp-image-1179\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8-300x225.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8-768x576.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8-1536x1152.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/exclusive-tips-ep4-8-880x660.jpg 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Result of the generated style guides.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This plugin provides comprehensive options to create style guides based on your figma styles and variables.<\/p>\n\n\n\n<p><strong>Pros:<\/strong> Comprehensive customize options.<\/p>\n\n\n\n<p><strong>Cons:<\/strong> This plugin does not allow users to specify which parts of the styles or variables should be generated as style guides. When creating style guides, this plugin will overwrite existing one instead of creating a new one. This might be unwanted behavior for designer who wants to track modifications on guides. Additionally, it is a paid plugin which cost $15 one time payment.<\/p>","protected":false},"featured_media":1170,"comment_status":"closed","ping_status":"closed","template":"","blog_category":[33],"blog_tags":[],"class_list":["post-1180","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-design-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-en\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"og:description\" content=\"Style guides are formal or informal documents that outline the details of different aspects of a design system [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-en\/\" \/>\n<meta property=\"og:site_name\" content=\"Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-12T09:28:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"5\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/\",\"name\":\"Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg\",\"datePublished\":\"2025-02-26T04:10:00+00:00\",\"dateModified\":\"2025-08-12T09:28:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Essential tips for building style guides in figma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/en\\\/blog\\\/essential-tips-for-building-style-guides-in-figma-en\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Essential tips for building style guides in figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\",\"name\":\"Hsieh Cheng Yi | UIUX Designer\",\"description\":\"\u64c1\u62b1\u8a2d\u8a08\u8207\u958b\u767c\u96d9\u8996\u89d2\u7684\u8a2d\u8a08\u5e2b\",\"publisher\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\",\"name\":\"Hsieh Cheng-Yi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"width\":512,\"height\":512,\"caption\":\"Hsieh Cheng-Yi\"},\"logo\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer","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:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-en\/","og_locale":"ja_JP","og_type":"article","og_title":"Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer","og_description":"Style guides are formal or informal documents that outline the details of different aspects of a design system [&hellip;]","og_url":"https:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-en\/","og_site_name":"Hsieh Cheng Yi | UIUX Designer","article_modified_time":"2025-08-12T09:28:16+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"5\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/","url":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/","name":"Essential tips for building style guides in figma - Hsieh Cheng Yi | UIUX Designer","isPartOf":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/#primaryimage"},"image":{"@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/#primaryimage"},"thumbnailUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg","datePublished":"2025-02-26T04:10:00+00:00","dateModified":"2025-08-12T09:28:16+00:00","breadcrumb":{"@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/#primaryimage","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-en-cover.jpg","width":1920,"height":1080,"caption":"Essential tips for building style guides in figma"},{"@type":"BreadcrumbList","@id":"https:\/\/hsiehchengyi.com\/en\/blog\/essential-tips-for-building-style-guides-in-figma-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/hsiehchengyi.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/hsiehchengyi.com\/ja\/blog\/"},{"@type":"ListItem","position":3,"name":"Essential tips for building style guides in figma"}]},{"@type":"WebSite","@id":"https:\/\/hsiehchengyi.com\/ja\/#website","url":"https:\/\/hsiehchengyi.com\/ja\/","name":"Hsieh Cheng Yi | UIUX Designer","description":"\u30c7\u30b6\u30a4\u30f3\u3068\u958b\u767a\u306e\u30c0\u30d6\u30eb\u8996\u70b9\u3092\u6301\u3064\u30c7\u30b6\u30a4\u30ca\u30fc","publisher":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hsiehchengyi.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":["Person","Organization"],"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214","name":"Hsieh Cheng-Yi","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","width":512,"height":512,"caption":"Hsieh Cheng-Yi"},"logo":{"@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg"}}]}},"_links":{"self":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog\/1180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/types\/blog"}],"replies":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/comments?post=1180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media\/1170"}],"wp:attachment":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media?parent=1180"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_category?post=1180"},{"taxonomy":"blog_tags","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_tags?post=1180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}