Generate Style Guide in Figma Automatically

hello it's Nick and today I want to show you how to automatically create a style guide for your project you can export your style guide as PDF document and share it with your team first we need to create Styles let's select a segmented control and use its color to generate our first color style click on a four dot icon in the Field section click plus and give it a name primary we will generate another style this time select a background color and follow the same procedure give it a name background now let's create two text Styles select the title and in the text section click four dot icon give it a name header one select a header for one of your posts and create another text style called header 2 now we need to apply our Styles let's start with the text Styles select all other headers in the post section and click four dot icon in the text section select header two style from the list now we can apply color styles select text photos and in a fi section click four dot icon choose the primary color style and follow the same approach for the icon and the bottom top bar now we can modify the style and the changes will apply to the layers automatically for example click on the properties of the primary style and change color to any other color as you can see the color applies to layers in real time the same thing works for text layers if you select H1 and change the font weight from semi bolt to thin we will see that the screen title has a new font weight now we can generate our style guide I will use a plugin called automatic style guides once we click generate style guide the plug-in will generate a new page in our document with the style guides created based on the fonts and color styles the name of the style guide is the same as the name of our figma file which is my wonderful app the style guide is not a static document it means that we can modify Styles and the document will be updated based on our changes but there is a catch if we change say a color style we will see that the color preview changes in real time but a text section with rgba and Hax colors doesn't change of course we can modify it manually or we can use the same plugin for that simply choose update mustach text and a plugin will update the text section with new information now both colors and hex codes are correct let's move to the typography section as you can see it contains our text Styles and the order in which the plugin generate the Styles is the same as the order in the right panel all the properties of the Tex styles are displayed in this style guide let's change the point weight for the heading one from Bold to thin again Tex stle is applied to the preview section but the text information is outdated we need to run update most Das tags now we can select all our frames in this document and click expert to PDF we have a PDF style guide that we can share with our team let me know what you think about this approach thank you

Channel: Nick Babich

Views: 4,037

Keywords: style guide in figma, styleguide in figma, generate styleguide in figma, create style guide in figma, generate style guide in figma fast, generate style guides in figma, how to generate style guide in figma, how to create style guide in figma

Id: oHTaB7aT7XU

Length: 3min 17sec (197 seconds)

Published: Mon Nov 27 2023