More changes based on feedback

Author: josh-umahi

building-header.md

@@ -22,7 +22,7 @@ Before you begin, take a look at the **final result** you’ll be working toward
 The logo will be a **text-based brand name** positioned at the center of the header. Follow these steps:  
 
 1. Select the **"Home" Frame** in the **Layers Panel** to ensure you are working within the correct space.  
-2. Press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
+2. On your keyboard, press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
 <img src="images/text-icon.png" style="width:100%;">  
 3. Click anywhere near the **top center** of the frame and type: **"Evelyne"** (or customize by using your own first name).  
 4. In the **Layers Panel**, click on the new text layer to ensure it's fully selected.  
@@ -47,17 +47,17 @@ The logo will be a **text-based brand name** positioned at the center of the hea
 
 Next, we’ll add text links on the left side of the header.  
 
-1. Press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
+1. On your keyboard, press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
 2. Click on any spot close to the top left of the frame and type **"Home"**  
 3. In the **Layers Panel**, ensure the text layer is selected.  
 4. In the **Right Sidebar**, set the following properties:  
    - **Font Family:** Noto Serif JP  
    - **Font Size:** 16  
-   - **Font Style:** Roman *(this is selected via the dropdown to the left of the font size input)*  
+   - **Font Style:** Regular *(this is selected via the dropdown to the left of the font size input)*  
    - **Text Alignment:** Left  
 <img src="images/notoserif.png" style="width:300px">  
 5. Repeat the  steps to create two more text layers for **"About Me"** and **"Portfolio"**.  
-6. Drag and position the text layers **side by side** in a horizontal row.  
+6. Drag and position the **text layers** side by side in a horizontal row.  
 7. Hold down the **Shift key** and click on each of the three text layers (**Home**, **About Me**, and **Portfolio**) to select them all.  
 8. Release the **Shift key** while keeping the text layers selected. **Right-click** on the selection and choose **Add Auto Layout** from the list (Shortcut: Press **Shift + A**).  
    - The text items should now be evenly spaced horizontally.  
@@ -75,12 +75,12 @@ Next, we’ll add text links on the left side of the header.
 
 Now that the navigation links are properly aligned and spaced, we'll move on to designing the **"Contact Me"** link.
 
-1. Press **T** to create a new text layer and type: **"Contact Me"**  
+1. On your keyboard, press **T** to create a new text layer and type: **"Contact Me"**  
 
 2. In the **Right Sidebar**, set the following properties:  
-   - **Font Family:** Iowan Old Style  
+   - **Font Family:** Noto Serif JP  
    - **Font Size:** 16  
-   - **Font Style:** Roman  
+   - **Font Style:** Regular  
    - **Text Alignment:** Right  
 
 3. To add an **underline**, follow these steps:  

create-design-file.md

@@ -5,6 +5,9 @@ nav_order: 2
 parent: Workshop Activities
 ---
 
+### Download the Assets
+If you haven’t already, go ahead and [download the resources](https://uviclibraries.github.io/figma-intro/resources/figma-intro-resources.zip) we’ll be using in this workshop. It includes icons and images to help us build our prototype. Once it’s downloaded, just unzip the file to access everything. Feel free to use your own images too if you want to add a personal touch to your design.
+
 ### Section Preview  
 
 Before you begin, take a look at the **final result** you’ll be working towards in this section:  
@@ -19,9 +22,10 @@ Before you begin, take a look at the **final result** you’ll be working toward
 
 1. Open **Figma** in your web browser [using this link](https://www.figma.com) or launch the **Figma Desktop App**.  
 2. Log in with your Figma account. If you don’t have one, create a free account.  
-3. On the **Figma Home** screen, click on the **New Design File** button.  
-4. A blank Figma file will open in a new tab.  
-5. Right now, your file doesn’t have a name. Click on **"Untitled"** in the top left corner, type **"Figma Intro Workshop"**, and press **Enter** to save this as the filename.
+3. On the **Figma Home** screen, click on the **Create** button on the top right.  
+4. Then in the dropdown that appears, select **Design File**.  
+5. A blank Figma file will open in a new tab.  
+6. Right now, your file doesn’t have a name. Click on **"Untitled"** in the top left corner, type **"Figma Intro Workshop"**, and press **Enter** to save this as the filename.
 
     <button onclick="toggle('gif1')">Show/Hide Animation</button>
     <div id="gif1">

home-page.md

@@ -29,7 +29,7 @@ To begin designing the **home page**, we will start by adding the main image. Al
    - **Width:** 481  
    - **Height:** 722<br> 
 <img src="images/center-img-dim.png" style="width:250px">
-7. If the image seems to disappear, but if you zoom out, you may find it near the top left of your Figma file. Manually drag it back to center it within the Home frame.
+7. If the image seems to disappear: zoom out and you will likely find it near the top left of your Figma file. Manually drag it back to center it within the Home frame.
 
    <button onclick="toggle('gif5')">Show/Hide Animation</button>
     <div id="gif5">
@@ -58,7 +58,7 @@ Now, we will add the main **headline text** to the home page and style it to mat
 ### Adding the Text  
 
 1. Ensure the **Home Frame** is selected in the **Layers Panel**.  
-2. Press **T** to activate the **Text Tool**, or click on the **Text** icon in the bottom toolbar.  
+2. On your keyboard, press **T** to activate the **Text Tool**, or click on the **Text** icon in the bottom toolbar.  
 3. Click inside the **Home Frame** and type the following text:  
 
 ```
@@ -95,10 +95,10 @@ With the text selected, go to the **Right Sidebar** under **Typography** and set
 
 Now, let’s create the **"My Portfolio"** button with an arrow icon.  
 
-#### Creating the Button Shape  
+### Creating the Button Shape  
 
 1. Ensure the **Home Frame** is selected.  
-2. Press **O** to activate the **Ellipse Tool**, or click on the **Ellipse** icon from the bottom toolbar.  
+2. On your keyboard, press **O** to activate the **Ellipse Tool**, or click on the **Ellipse** icon from the bottom toolbar.  
 <img src="images/ellipse-tool.png" style="width:400px">
 3. Click and **drag** to create a perfect circle.  
 4. In the **Right Sidebar**, set the **exact dimensions**:  
@@ -111,9 +111,9 @@ Now, let’s create the **"My Portfolio"** button with an arrow icon.
     <img src="images/home-ellipse.gif">
     </div>
 
-#### Adding the Arrow Icon  
+### Adding the Arrow Icon  
 
-1. Press **Shift + L** to activate the **Arrow Tool**, or click on the **Arrow** icon from the bottom toolbar.  
+1. On your keyboard, press **Shift + L** to activate the **Arrow Tool**, or click on the **Arrow** icon from the bottom toolbar.  
 <img src="images/arrow-tool.png" style="width:400px">
 
 2. In the **Right Sidebar**, set the **exact dimensions**:  
@@ -127,19 +127,19 @@ Now, let’s create the **"My Portfolio"** button with an arrow icon.
     <img src="images/arrow-home.gif">
     </div>
 
-#### Adding the Button Label  
+### Adding the Button Label  
 
-1. Press **T** to create a new text layer below the button.  
+1. On your keyboard, press **T** to create a new text layer below the button.  
 2. Type **"My Portfolio"**.  
 3. In the **Right Sidebar**, adjust the text properties:  
 - **Font Family:** Noto Serif JP  
 - **Font Size:** 22  
-- **Font Weight:** Roman  
+- **Font Weight:** Regular  
 - **Text Color:** White (#FFFFFF)  
 - **Text Alignment:** Center  
 4. Drag the text **below the button**, ensuring it's properly aligned using the **red guidelines**.  
 
-#### Grouping and Positioning  
+### Grouping and Positioning  
 
 1. Select the **circle, arrow, and text** together.  
 2. **Right-click** and select **Group Selection** to keep them as one unit.  
@@ -150,7 +150,7 @@ Now, let’s create the **"My Portfolio"** button with an arrow icon.
     <img src="images/button-home.gif">
     </div>
 
-#### Creating the Auto Layout for Social Icons  
+### Creating the Auto Layout for Social Icons  
 
 All the social media icons required are already provided in the assets you downloaded in step 2 of the **Pre-Workshop Activities**.  
 

linking-across-pages.md

@@ -42,9 +42,11 @@ Linking pages in Figma allows you to create a **clickable prototype** that simul
 ## 4. Testing Your Prototype  
 
 1. Click the **Present** button (▶) in the top-right corner of Figma.  
-2. Navigate through the links by clicking on the buttons we just added prototype bahaviors to.  
+2. Navigate through the links by clicking on the buttons we just added prototype behaviors to.  
 3. Observe the **Smart Animate** transitions and confirm the navigation flow feels smooth.  
 
+> **Note:** When you launch the prototype, it will open in a new window. You might need to resize it to fit your full screen for the best viewing experience — or click the **fullscreen icon** in the top-right corner of the prototype window.
+
 
 Now that your pages are linked with smooth **Smart Animate transitions**, the next step is designing the **About Me Page**, where we will introduce Evelyne with structured sections and interactive elements.  
 

portfolio-page.md

@@ -29,7 +29,7 @@ The **Portfolio Page** showcases featured projects in a clean and structured lay
 To separate the navigation from the portfolio content, we will add a **thin white line** below the header.  
 
 1. Select the **Portfolio Frame**.  
-2. Press **L** to activate the **Line Tool**, or click the **Line** icon from the bottom toolbar.  
+2. On your keyboard, press **L** to activate the **Line Tool**, or click the **Line** icon from the bottom toolbar.  
 3. Click and **drag** to draw a horizontal line under the header.  
 4. In the **Right Sidebar**, adjust the line properties:  
    - **Color:** White (#FFFFFF)  
@@ -59,12 +59,12 @@ To keep the header and the new divider aligned properly, we will apply **Auto La
 Now, we will add a **title** to introduce the portfolio section.  
 
 1. Ensure the **Portfolio Frame** is selected in the **Layers Panel**.  
-2. Press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
+2. On your keyboard, press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
 3. Click inside the **Portfolio Frame** and type: "My Portfolio"  
 4. In the **Right Sidebar**, set the typography properties:  
 - **Font Family:** Noto Serif JP  
 - **Font Size:** 48  
-- **Font Weight:** Roman
+- **Font Weight:** Regular
 - **Text Color:** White (#FFFFFF)  
 - **Text Alignment:** Center  
 5. Position the title **below the divider**, ensuring it is centered using the **alignment guides**.  
@@ -76,18 +76,18 @@ In our design, a **Project Card** consists of an image, a title, and a short des
 
 ### Creating the Card Structure  
 
-1. Press **R** to activate the **Rectangle Tool**, or click the **Rectangle** icon in the bottom toolbar.  
+1. On your keyboard, press **R** to activate the **Rectangle Tool**, or click the **Rectangle** icon in the bottom toolbar.  
 2. Click and **drag** to create a rectangle that will serve as the **image container**.  
 3. In the **Right Sidebar**, set the image dimensions to:  
 - **Width:** 519  
 - **Height:** 338  
 4. In the **Fill** section of the right sidebar, click the **color box**, then select the **Image** icon and upload the image that is titled "people-fashion-show".  
 <img src="images/rect-image.png" style="width:100%;">  
-5. Press **T** to add a text layer below the image and type a **project title**, such as: "Paris Fashion Week"
+5. On your keyboard, press **T** to add a text layer below the image and type a **project title**, such as: "Paris Fashion Week"
 6. Adjust the text properties:  
 - **Font Family:** Noto Serif JP 
 - **Font Size:** 20  
-- **Font Weight:** Roman  
+- **Font Weight:** Regular  
 - **Text Color:** White (#FFFFFF) 
 - **Text Case:** Uppercase  
 
@@ -122,16 +122,16 @@ Ensure that all project descriptions fit into **two lines max** for consistency.
 
 Now, let’s add a fashion-related quote after the second project card.
 
-1. Press **T** to create a new text layer.  
+1. On your keyboard, press **T** to create a new text layer.  
 2. Type the following quote:  
   ```
 “Style is a way to say who you are without having to speak.” – Rachel Zoe
   ```
 
 3. In the **Right Sidebar**, set the typography properties:  
-- **Font Family:** Noto Serif SP
+- **Font Family:** Noto Serif JP
 - **Font Size:** 16  
-- **Font Weight:** Roman  
+- **Font Weight:** Regular  
 - **Text Color:** White (#FFFFFF)  
 - **Text Alignment:** Left  
 4. Adjust the width of the text layer to 214 so that it fits into about three lines
@@ -189,24 +189,24 @@ To complete the **Portfolio Page**, we will add a simple footer with a copyright
 ### Copying the Header Line  
 
 1. Select the **Portfolio Frame**.  
-2. Press **L** to activate the **Line Tool**, or click the **Line** icon from the bottom toolbar.  
+2. On your keyboard, press **L** to activate the **Line Tool**, or click the **Line** icon from the bottom toolbar.  
 3. Near the bottom of the frame, click and **drag** to draw a horizontal line. Ensure that the line **stretches across the same width** as the one in the header.
 4. In the **Right Sidebar**, adjust the line properties:  
    - **Color:** White (#FFFFFF)  
    - **Stroke Weight:** 1px  
 
 ### Adding the Copyright Text  
 
-1. Press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
+1. On your keyboard, press **T** to activate the **Text Tool**, or click the **Text** icon in the bottom toolbar.  
 2. Click below the newly placed line and type:  
 ```
  © Copyright <insert current year> - Evelyne Stark
 ```
 
 3. In the **Right Sidebar**, set the typography properties:  
-- **Font Family:** Noto Serif SP 
+- **Font Family:** Noto Serif JP 
 - **Font Size:** 16  
-- **Font Weight:** Roman  
+- **Font Weight:** Regular  
 - **Text Color:** White (#FFFFFF)  
 - **Text Alignment:** Center  
 <img src="images/copyright.png" style="width:100%;">