Figma Guide: How to Update Typography and Colors Efficiently

Arturo R. · 2024-04-13T16:59:09.807Z

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? :pray:

5 comments

· Sorted by Oldest

Blair
·
Post a screenshot of your pages panel in Figma
Arturo R.
·
Hi Blair, 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?
Blair
·
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.
Arturo R.
·
Thanks a lot Blair! 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)? 🙏
Blair
·
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

Figma Guide: How to Update Typography and Colors Efficiently | Relume Community

Blair
·
Post a screenshot of your pages panel in Figma
Arturo R.
·
Hi Blair, 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?
Blair
·
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.
Arturo R.
·
Thanks a lot Blair! 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)? 🙏
Blair
·
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