UI Style Guides are part of a "Design system" and are design standards for UI elements and interactions. They:
Ensure product consistency
Help designers and developers communicate and collaborate better
Include standards for typography, layouts, color palettes, buttons, fonts, logos, icons, alerts, loaders, and sliders, etc.
Open Finder
On the left side, scroll down to "Locations" and click "Google Drive" (NOT "My Drive")
Click "Shared drives" > "Graphic Design 2 Templates"
Double-Click "Style Guide Practice.ai" to open.
Go to "File" > "Save As..."
Click "Save to Creative Cloud"
Click "Save"
Choose one of the 4 apps with screenshots on the template.
Drag it over to the empty box on the artboard.
HEX numbers, which use the RGB color space, are used for coded designs such as websites and apps.
Select the first black square under the "Color Palette" area
Click on the "Eyedropper" tool.
Click on a color in the app. This will change the color of the square.
Go to the "Properties" tab and click on the "Fill" color swatch.
Click the three lines in the right corner and make sure "RGB" is selected.
Copy the HEX #
Paste the HEX # into the text box under the square.
Repeat for 5 more colors used in the app.
Use the eyedropper tool to copy the color of the buttons and the text color used in the buttons.
If the button shapes are not corners, adjust them to align with the shape:
Click on the button.
White circles should show up inside of each corner.
Drag the white circles in to create more rounded corners.
Because your file is saved on Creative Cloud, it will be a ".aic" file - this means Illustrator saves your file every 5 minutes.
If you see an asterisk (*), that means there are unsaved changes.
To save, in the top menu, click "File" > "Save"
If "Save" is grayed out, it means your file has already been automatically saved.
Go to "File" > "Save As..."
Click "Save on your computer"
Click the down arrow to the right of "Where"
Choose "My Drive" > "Graphic Design 2" > "4 - UI Design"
Change the Format to "Adobe PDF (pdf)"
Click "Save"
Click "Save PDF"
In Finder:
Right-click on "Graphic Design 2" and click "Copy link to clipboard"
Paste the link in Canvas.