Streamline Your Design Workflow with Figma and Gatsby

Streamline Your Design Workflow with Figma and Gatsby

Table of Contents

  1. Introduction
  2. Gatsby CMS Starters
    • WordPress Starter
    • Drupal Starter
    • Datto Starter
    • Contentful Starter
  3. Designing Content with Figma
    • Accessing the Design Files
    • Using Figma for Designing
    • Making Changes to the Starter
  4. Updating the Logo
  5. Changing the Theme Colors
  6. Editing the Heading Content
  7. Swapping the Heading Font
  8. Implementing Changes in the Starter Code
    • Installing Fonts
    • Updating Logo Markup
    • Changing Color Styles
    • Editing Heading Styles
    • Updating Contentful Data
  9. Conclusion

Building Custom Gatsby CMS Starters with Contentful and Figma

Gatsby DX team has created a variety of CMS starters that demonstrate how to integrate your preferred CMS with Gatsby framework. In this article, we will focus on the Contentful starter and explore how to make custom changes using Figma for designing content before implementing those changes in the Gatsby starter code.

1. Introduction

Introducing the CMS starters powered by Gatsby, Molly and Alex from the Gatsby DX team discusses the availability of CMS starters for WordPress, Drupal, Datto, and Contentful. They highlight the flexibility of using Figma for designing content before translating it into code with Gatsby.

2. Gatsby CMS Starters

Gatsby provides CMS starters for popular content management systems. The available starters include:

2.1 WordPress Starter

The WordPress starter allows You to use WordPress as your CMS with Gatsby. It provides a seamless integration between the two platforms.

2.2 Drupal Starter

The Drupal starter enables you to leverage the power of Drupal as your CMS while benefiting from the fast and optimized performance of Gatsby.

2.3 Datto Starter

With the Datto starter, you can combine the simplicity of Datto CMS with the blazing-fast Gatsby framework to Create dynamic and responsive websites.

2.4 Contentful Starter

The Contentful starter focuses on integrating Contentful, a content management platform, with Gatsby. This starter will be our main focus in this article.

3. Designing Content with Figma

Before diving into the technical implementation, Molly and Alex emphasize the importance of utilizing Figma for designing content. They explain how Figma allows you to experiment with different layouts and elements before committing to the actual code.

3.1 Accessing the Design Files

Molly shares the link to access the publicly available design files in Figma. The design files contain various components and pages for each CMS starter, providing a valuable resource for customizing the design.

3.2 Using Figma for Designing

Molly guides the audience through the Figma interface, explaining how to navigate between pages, access design components, and utilize global styles. She emphasizes the importance of paying Attention to the design documentation created by the team's designer, Flo.

3.3 Making Changes to the Starter

To demonstrate how the design changes are implemented, Molly walks through four specific changes that will be made to the Contentful starter. These changes include replacing the logo, updating theme colors, editing heading content, and changing the heading font. She mentions that the changes will first be made in Figma and then handed over to Alex for implementation.

4. Updating the Logo

Molly demonstrates the process of updating the logo in Figma. Using the logo component, she selects the desired logo variant (in this case, Acme) and applies it to the design. Molly mentions that uploading your own logo in Figma is straightforward and provides resources for learning how to do so.

5. Changing the Theme Colors

Next, Molly moves on to changing the theme colors of the Contentful starter. She explains how to navigate to the color styles in Figma and modify the base color styles for the starter. Molly showcases the changes she wants to Apply, including a black and white color scheme with slight variations for contrast.

6. Editing the Heading Content

One of the essential aspects of customization is editing the heading content to match the company's brand. Molly modifies the heading content of the starter, replacing the default title with "Hot Content from Acme Corporation." She emphasizes the significance of aligning the text with the company's branding and the impact it has on the overall design.

7. Swapping the Heading Font

To ensure consistency in design, Molly updates the heading font to match the Acme logo's style. She walks through the process of selecting the heading element, accessing the text styles in Figma, and updating the font to "Anton" to maintain visual coherence.

8. Implementing Changes in the Starter Code

With the design changes finalized in Figma, Alex takes over to implement those changes in the Gatsby starter code for Contentful. He provides insights into the technical aspects involved in the implementation process.

8.1 Installing Fonts

Alex explains the usage of font source to source out the desired fonts for the starter. He demonstrates the installation process of the new font, Anton, and updates the Gatsby browser file to incorporate the new font.

8.2 Updating Logo Markup

Using the exported SVG markup from Figma, Alex replaces the existing Gatsby Contentful logo with the new Acme logo in the brand logo component. He ensures that the fill and stroke values take AdVantage of the Current color styling in the starter.

8.3 Changing Color Styles

Moving on to the color styles, Alex modifies the CSS file responsible for handling the colors in the starter code. He updates the background, text, primary, muted, and active colors to match the changes made in Figma.

8.4 Editing Heading Styles

Alex updates the heading styles in the theme file to reflect the changes made in Figma. He replaces the default font face with "Anton" to create visual consistency between the logo and headings.

8.5 Updating Contentful Data

Finally, Alex updates the content stored in the Contentful space to match the edited heading content. He ensures that the new content is correctly published and reflects the desired changes in the Gatsby starter.

9. Conclusion

In conclusion, Molly and Alex provide a comprehensive walkthrough of customizing a Gatsby CMS starter using Contentful and Figma. They highlight the seamless integration between the design and development processes, showcasing how the design changes were made in Figma and then implemented in the Gatsby starter code. By following their instructions, users can create highly customized and visually appealing websites using their preferred CMS and Gatsby framework.

Highlights

  • Gatsby CMS Starters showcase the integration of preferred CMS with Gatsby.
  • Figma allows for designing content before implementing changes in code.
  • Customizing the logo, theme colors, heading content, and font enhances the Website's branding and design.
  • Implementation involves updating the Gatsby starter code with the changes made in Figma.
  • The seamless integration between design and development creates visually appealing and personalized websites.

Frequently Asked Questions

Q: Can I use a different CMS with Gatsby instead of the ones mentioned in the article?

A: Yes, Gatsby is highly flexible and can be used with a variety of content management systems. The Mentioned CMS starters are just examples of popular options.

Q: How can I upload my own logo in Figma?

A: Uploading your own logo in Figma is straightforward. You can create a component using your logo file or add it as an image within the design.

Q: Are the changes made in Figma automatically reflected in the Gatsby starter code?

A: No, the changes made in Figma need to be manually implemented in the Gatsby starter code. Figma is used as a design tool, and the changes need to be translated into code by a developer.

Most people like

Find AI tools in Toolify

Join TOOLIFY to find the ai tools

Get started

Sign Up
App rating
4.9
AI Tools
20k+
Trusted Users
5000+
No complicated
No difficulty
Free forever
Browse More Content