Protyping with Figma

Adding Images

1. Make sure you save the image you would like to use on your Desktop

2. Open your project in Figma

3. Using the shaping tool, and select “Place image/video…”

   

4. Select the image that you downloaded on your desktop

5. The image should now be available on your page in figma

Using Components

1. Go to Figma.com and make sure you are logged in

2. Next, open a seperate tab on your desktop and go to https://www.figma.com/community/file/885791511781717756. You should see an image similar to the one below

   

3. Click the blue “Open in Figma” button

4. Once the page has opened, over on the left side of the screen, you will see a list of pages in the figma app. We will be focusing on the Ionicons and Ionic Components pages as seen in the image below

   

Customizing Icons

1. Start by select the Ionicons page and zooming in to see the available icons as seen in the image below. Remember you can zoom in by pressing “Command + +” or zoom out by pressing “Command + -“. Alternatively, you can click the menu bar in the top left corner then click the View and select “Zoom in” or “Zoom Out” at the bottom of the menu.

2. Next select the “Selection colors” option to pull up a list of color

Instructions for Copying Icons

1. First let start by select the Ionicons page and zooming in to see the available icons as seen in the image below. Remember you can zoom in by pressing “Command + +” or zoom out by pressing “Command + -“. Alternatively, you can click the menu bar in the top left corner then click the View and select “Zoom in” or “Zoom Out” at the bottom of the menu.

   

2. If you would like to use an icon in your project, select the icon and make sure a purble border shows up around the icon and then use “Command + C” to copy the icon. Then, open your project in another tab and paste it where you would like it to go using “Command + V”

   

Instructions for Copying Components

1. Start by selecting the Ionic Components page on the left

   

2. You should then see a page like the one below:

   

3. Start by zooming in to see the available components. Remember you can zoom in by pressing “Command + +” or zoom out by pressing “Command + -“. Alternatively, you can click the menu bar in the top left corner then click the View and select “Zoom in” or “Zoom Out” at the bottom of the menu.

1. When you find the component you want to use, select it and make sure you a purple box is highlighted around the component like the image below. Remember, if the purple box is not covering all of the component that you want to use, then it will not copy and paste correctly

   

2. Next, use “Command + C” to copy the icon. Then, open your project in another tab and paste it where you would like it to go using “Command + V

Using iOS Design Kit

1. Go to https://www.figma.com/community/file/1121065701252736567. You should see a web page similar to the one below

   

2. Select “Open in Figma” on right side of the page

3. Once the page has opened, select either “Components” or “Templates” on the left side of the page

   

4. You will then see a list of components and/or templates that you can zoom in and select for your project

   

   

5. Start by zooming in to see the available components. Remember you can zoom in by pressing “Command + +” or zoom out by pressing “Command + -“. Alternatively, you can click the menu bar in the top left corner then click the View and select “Zoom in” or “Zoom Out” at the bottom of the menu.

6. If you would like to use an object in your project, select the icon and make sure a purble border shows up around the object and then use “Command + C” to copy the object. Then, open your project in another tab and paste it where you would like it to go using “Command + V” Remember, if the purple box is not covering all of the component that you want to use, then it will not copy and paste correctly