UX contribution guide (mockups)

This is a collection of docs, links and design resources for UX as it relates to the CiviForm project.
If you haven't already, please read our code of conduct.
Join the conversation in the Civiform Slack Workspace.

Background and research



  • Use the channel #product-ux on the team slack for UX discussion & updates.
  • Miro: is our main interface for design output and collaboration (comments, mockups etc.). Use the cvf-flow project to create boards, add screenshots/images/links to mockups/prototypes and for comments. Anything that can be translated here through a screenshot should, but if you link out to a prototype or mockup, please make sure it's publicly accessible.
  • Tasks are listed as Github under the UX label here. We do try to keep some labeled as good first issue, which are great for first-time contributors. Feel free to ask in Slack if you don't see any good first time issues to tackle.
  • There's a Design & UX Folder in the team Google Drive that can be used to store any source assets.

New method from Holly Li

Hi team,
TL;DR: Can everyone join this Figma file and take a stab at making their mocks in the right files (Admin/TI/Applicant) and using the components/styles we've built?
In order to streamline all of the fantastic work everyone's been doing, I'd like to propose two new process additions:
  1. 1.
    Working off of the same Figma file (yay for standardized components and styles!) and
  2. 2.
    Signing up for specific screen mocks in this sheet here -- this way, folks know who to comment @ each other in the Figma files for feedback/who to Slack with for collaboration.
To illustrate how to use the Figma file: (I'll use you, @Becky, as an example!)
  1. 1.
    Becky signs up for "Civiform admin; Main page (list of all programs)" in the sheet of screens by putting her name down in column C.
  2. 2.
    She then goes to the "Admin" file within the Figma file and starts designing. For convenience, she can go to the 'Applicant" design file and copy and paste a few mobile and desktop screens into her Admin file -- this will port over the same components, and make sure her mobile and desktop designs are the same size as everyone else's designs across the board.
  3. 3.
    If you simply want to use a component (say a radio button, or a dropdown menu), you can A) copy and paste them from another design, or B) access them in your designs by clicking on "Assets" on the left hand side, and dragging and dropping components into your designs.
  4. 4.
    If you would like to design a whole NEW component, components are built/designed in the "Component and team library" design file in Figma. I've found it's easiest to design with both Figma files open as tabs so I can switch back and forth. Once you're done with a new component (or have made edits to an existing one), Figma will offer you a popup to publish these changes to the team library. Once you do so, any other Figma file in the entire project using that component will see a popup to accept these changes, and any instance of the component will auto-update. In other words, the "Component and team library" design file is the source of truth, so if you're designing anything that requires the same text/box/input/color/button over and over, make sure it's a component so that A) making updates to it in the future will be easy and B) other people can easily use it.
  5. 5.
    For ease, I've also codified the CiviForm color palette in the "Component and team library" design file (right hand side), and it's been published project-wide, meaning that when you want to add color to a button or text, the palette of blues and grays is already suggested when you click on the four dots labeled "Style" in the Design column.
  6. 6.
    We review in the UX Office Hours on Friday!
The goal is for there to be ONE design file for Applicant screens (if you click on that design file, you can see WIP mocks for mobile and desktop); ONE design file for Admin screens (also with mobile and desktop); and ONE design file for TI screens. Please refer to the components built in the "Components and team library" file when building out your screens.
I know this is a lot, so please @ me or ping me with questions, and I'll also do another walk through of this in UX Office hours this week.