New Illustrations for Creating and Importing Projects
Purpose
We need icon illustrations to represent the different ways to create a project:
- Create new project
- Create project from template
- Import project
- Run CI/CD pipelines for external repositories
Concept
-
Create new project
- The illustration needs to represent creating a blank project from scratch. -
Create project from template
- The illustration needs to represent creating a project and prepopulating it with data from a template. -
Import project
- Transfer an external project to GitLab. The illustration needs to represent a one-way flow. -
Run CI/CD pipelines for external repositories
- Create a project with only CI/CD enabled to run pipelines for an external repository. The illustration needs to represent a connection between the external repo and the GitLab project.
Figma file
Illustrations for Creating and Importing Projects
Final illustrations
Create a blank project | Create a project from a template | Import a project | Run CI/CD pipelines for external repositories |
---|---|---|---|
Checklists
Complete all items in both checklists before closing the issue. All items are the responsibility of the author, unless otherwise noted.
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 svg
to add the illustration to the library in the /dist folder. -
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, 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 Jeremy Elder