Illustration for artifacts

Purpose

To be used in the new pipeline canvas left side panel.

Screenshot 2025-12-01 at 8.52.54 PM.png

Concept

What are artifacts? Sometimes pipeline jobs output files and directories. These are made available for users to download and feed another process with.

We'll show users an empty state when no artifact is generated by a pipeline.

Checklists

After all of the following tasks are complete you can close this issue:

Assignee tasks

See tasks:
  1. Start with a branch of the GitLab Illustration file in Figma. Prefix the branch name with the issue number, and add your GitLab username as the suffix. For example, #120-feature-illustration-jelder.
  2. Choose/copy a grid frame from the Grid page. Work on your illustration in the appropriate component or library page. A small illustration that can be used as a standalone "spot" illustration, or as a reusable element in a larger illustration can be added in the Components page, while all others can be added to the library page that makes the most sense.
  3. Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines.
  4. Request a review from a FE/UX Foundation designer for your Figma branch. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.

Reviewer tasks

See tasks:
  1. Review the illustration. 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 tasks

See tasks:
  1. Either merge the branch and publish library changes, or copy/paste the illustration from a draft file to the illustration file under the appropriate page and category. The frame name should match the exported file name (without the extension).

Library addition tasks

Once the Reviewer or Maintainer has approved your illustration, consider the following tasks to add it to the gitlab-svgs library.

See tasks:
  1. Create a new merge request (MR) from this issue.
  2. Checkout the new branch locally.
  3. Export the illustration from the illustration 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.
  4. In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately.
  5. After you’ve committed the changes and the pipeline passes, double-check your illustration in the review app and test that it matches your expectations.
  6. 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.

Links / references

Edited by Veethika Mishra