Community forum for knowledge and support

Updated 9 months ago

Updating the style guide in figma

At a glance

The community member is working on their first project using the Figma library and is having trouble updating the style guide to apply typography and colours in one go. The other community members suggest posting a screenshot of the pages panel, re-applying the text styles, and using the "How to use the Style Guide" feature in the Layers tab. There is no explicitly marked answer, but the community members provide suggestions on how to proceed with the project workflow and updating the style guide in Figma.

Hello! I'm working on my first project using the Figma library and I can't understand how to update the style guide so all the typography and colours are applied in one go. Can someone help me? πŸ™

B
A
5 comments

Post a screenshot of your pages panel in Figma

Hi , thanks for your help! As you can see I've added the Figma kit to the libraries. When I started designing the page, I unlinked all the text styles as I wanted to have some freedom to experiment with font weights and sizes. What's the best way to proceed now? Should I set up all the text styles again from scratch?

Good question.

Nice one, I love the message of the site you're designing. We definitely need more peace in today's world.

I guess the question is what are you going to do next in terms of your workflow.

Example: if you are getting sign off and then building in Webflow then does it really matter if you reapply the styles for the style guide and update it?

In that example it seems easier to just import your relume pages and components into Webflow and then update the Draft style guide page in Webflow.

Does that answer your original question?

The other answer is to go to the style guide page in Figma and yes update and reapply the styles to your design. Again that might not be valuable at this point assuming your next step is to build in Webflow.

There are probably better answers than these out there 😊 but hope that is helpful.

Thanks a lot ! Yeah, P4P is a really cool nonprofit. I've been trying to help them refresh their messaging and look and feel as they tend to be quite dry and academic!

Re workflow, I'm actually not going to go into Webflow for this one. I'll be handing off the Figma files to a developer who'll be developing the site in Wordpress. I still wanted to take the opportunity to use Relume and the Figma kit though!

As I'm still a newbie, can you help me understand how to apply the style guide page? I don't see a 'Style guide' page under Pages. Do I need to import it? Or do I simply create the styles from scratch using the Local Styles side panel (see screenshot)?

πŸ™

  1. Go to Layers tab in the left panel
  2. Select Style Guide
  3. Click "How to use the Style Guide" or just start changing styles

Add a reply
Sign up and join the conversation on Slack