Illustration for the trigger job page
Purpose
We're creating a page for trigger jobs in GitLab CI. Trigger jobs are special kinds of jobs that trigger a downstream pipeline. They don't run automated tasks like a job usually would. Instead their sole purpose is to create a new pipeline that will branch off from your main pipeline.
Up until now, they didn't have a dedicated page, unlike normal jobs. The new trigger job page won't have job logs, and instead we want to use the space on the page to communicate that it's a special kind of job, a trigger job, and that it creates a downstream pipeline.
Concept
Illustration in the context of the page | ![]() |
Illustration | ![]() |
We already have illustrations that are related to different job and pipeline concepts. I relied on the existing metaphors to create an illustration that represents a "job that triggers a pipeline".
Existing related illustrations:
Checklists
Design
-
Duplicate the Illustration template and move the copy to your Drafts folder in Figma. Update the file name and cover thumbnail with relevant issue information. -
Share your draft file with a FE/UX Foundation designer to review, and make sure they have view permissions in Figma. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer. -
Reviewer: Review the illustration in the author’s draft file. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status. Once approved, assign to a Figma maintainer for final review. -
Maintainer: Add the illustration to the Illustrations file under the appropriate page and category. The illustration should be in a frame with the bounds set to the artwork. The frame name should match the exported file name (without the extension). -
Author: Move your draft file to the Component archive Figma project.
Library addition
-
Create a new merge request (MR) from this issue. -
Checkout the new branch locally. -
Export the illustration from the Illustrations file (in Figma) to the /illustrations folder in your local instance of the repo. The file name should be lowercase, and use hyphens as a separator between terms. If necessary, place the illustration in one of the sub-directories. -
In a terminal window, run yarn run dev
to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately. -
After you’ve committed the changes and the pipeline passes, double-check your icon in the review app and test that it matches your expectations. -
Assign the MR to a review by a maintainer, and proceed with any changes.
If you run into any problems, ensure that all other steps in the project README have been followed.