Skip to content

Design: Illustration for the global CI/CD Catalog

Purpose

We are aiming to have a single-view global catalog and need some more illustrations!

Concept

We need a generic illustration for the empty states in the global catalog.

  • Get started with the CI/CD catalog (empty states)
  • No metadata available on the component details page (empty states)

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 Sunjung Park