CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • Contributing in Figma
  • Contribution criteria
  • How to contribute
  • Contribution formats
  • Working with Figma
  • Submitting your design contributions
  • Feedback

Was this helpful?

Edit on GitHub
Export as PDF
  1. Contributing

Figma contributions

This page outlines the process for contributing to the CivicTheme Figma UI Kit.

PreviousCode of conductNextComponent list

Last updated 12 days ago

Was this helpful?

Contributing in Figma

See the latest Figma file:

Contribution criteria

The CivicTheme atomic design system is built on a set of UI building blocks. All of the CivicTheme components, patterns, icons and solutions are:

  • Compliant with Australian Government design system

  • Built with WCAG 2.2 AA compliance in mind to meet accessibility standards

  • Adaptable with GovCMS Drupal 10 out-of-the box

  • Responsive

Consider the criteria below before submitting your contribution for consideration:


  • Purpose: New designs should address specific needs, enhance user experience, and add value. They should either extend existing patterns or create new ones.

  • User researched and tested: Your contribution should be backed by user research and testing.

  • Accessibility tested: Your design should meet WCAG 2.2 AA accessibility standards or higher.

  • Atomic design: Contributions should comply with atomic design principles to maintain consistency and modularity whilst aligning to existing design direction.


How to contribute

Once you've established the type of contribution you wish to make, submit your design idea via GitHub to ensure transparency and community discussion.

Contribution formats

Ideally, design contributions should be supplied as fully realised Figma files and submitted via GitHub; however, we know this is not always possible, so there are other options.

With that in mind, the CivicTheme team will consider contributions in many formats:

  • Figma file: A copy of the full CivicTheme Figma file, or a stand-alone file that we can merge into the main file.

  • Illustration file: If you are adding illustrations or iconography to the UI kit, please provide an illustration file (.svg, .png, or .jpg).

  • Wireframe or sketches: This can be a photo of that napkin you sketched your ideas on when inspiration hit.


Working with Figma

If you’re working with a copy of the CivicTheme Figma file, once you’ve finished making changes, you need to export the file in .fig format. To do this, go to "File" and select "Save as .fig." This will save the file on your local drive.

When saving the file, please use the prefix CivicTheme_Design_ then add your name to the end of the file name as shown below.

Example: CivicTheme_Design_[YourName].fig


Submitting your design contributions

Submitting via GitHub:

  1. Select contribution type:

    • If it’s a small contribution, such as minor tweaks or updates, select "Bug" or "Minor enhancement" as the issue type.

    • For medium or major contributions, select "Feature request."

  2. Title:

    • Include "Design contribution" in the title, along with the specific focus of your contribution. For example:

      • “Design contribution - Template - Homepage - Mobile” or,

      • “Design contribution - Navigation component - Desktop”

  3. User story:

    • Fill out the "User Story" section in the issue template to describe the context and reasoning for your contribution. Be clear about the problem you're addressing and the proposed solution.

  4. Description:

    • Provide a detailed description of your contribution. Include:

      • Page and name: Reference the page and component name from the Figma file where changes have been made. For example:

        • Page 05 Mobile Templates | Template - Homepage - Mobile.

      • Rationale: Explain the reasoning behind your change. Why is it necessary? How does it improve CivicTheme's design system?

      • Supporting evidence: If your contribution is research-backed (e.g., user testing, accessibility standards), provide relevant links or documentation.

      • Testing: Indicate whether the change has been tested and provide results if applicable (e.g., design QA, browser/device testing).

  5. Contribution type:

    • For small contributions, provide a brief summary of changes.

    • For medium contributions, specify if the component can be reused or extended.

    • For major contributions, ensure the description aligns with the broader CivicTheme design principles and can be applied across multiple contexts.


Feedback

Create a account (if you don’t have one).

Go to the and check for existing issues related to your idea.

If your idea isn't listed, , using the relevant specification, and we’ll review it.

We're always looking at ways to improve our model for contributions, and rely on your feedback to ensure an enjoyable contribution experience. The best way to give us feedback is to join our and chat to us there, or contact us via !

GitHub
CivicTheme UI Kit Project
create a new issue
Slack channel
email
CivicTheme v1.10 Figma