Figma contributions
This page outlines the process for contributing to the CivicTheme Figma UI Kit.
Last updated
This page outlines the process for contributing to the CivicTheme Figma UI Kit.
Last updated
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.
Once you've established the type of contribution you wish to make, submit your design idea via GitHub to ensure transparency and community discussion.
Create a GitHub account (if you don’t have one).
Go to the CivicTheme UI Kit Project and check for existing issues related to your idea.
If your idea isn't listed, create a new issue, using the relevant specification, and we’ll review it.
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.
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 via GitHub:
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."
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”
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.
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).
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.
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 Slack channel and chat to us there, or contact us via email!