Figma Tutorials - Revision history

Maytals: /* Tutorials for Basic Functions */

2024-05-16T14:37:43Z

Tutorials for Basic Functions

← Older revision		Revision as of 14:37, 16 May 2024
Line 31:		Line 31:
	* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]		* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]
	* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]		* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]
			* [https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma fixed position]
	* ''Components'' and ''Instances'' - [https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma create a consistent design]		* ''Components'' and ''Instances'' - [https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma create a consistent design]

Maytals: /* Tutorials for Basic Functions */

2024-05-16T14:29:38Z

Tutorials for Basic Functions

← Older revision		Revision as of 14:29, 16 May 2024
Line 31:		Line 31:
	* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]		* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]
	* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]		* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]
	* [~~[components and instances\|~~https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma~~]] -~~ create a consistent design		* ''Components'' and ''Instances'' - [https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma create a consistent design]

	== Tutorials for Advanced Functions ==		== Tutorials for Advanced Functions ==

Maytals: /* Tutorials for Basic Functions */

2024-05-16T14:28:31Z

Tutorials for Basic Functions

← Older revision		Revision as of 14:28, 16 May 2024
Line 31:		Line 31:
	* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]		* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]
	* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]		* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]
			* [[components and instances\|https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma]] - create a consistent design

	== Tutorials for Advanced Functions ==		== Tutorials for Advanced Functions ==

Maytals: /* Tutorials for Advanced Functions */

2024-05-16T14:23:32Z

Tutorials for Advanced Functions

← Older revision		Revision as of 14:23, 16 May 2024
Line 35:		Line 35:
	* [https://www.youtube.com/watch?v=ya2jkJBQA8Y Create an image gallery with sliders]		* [https://www.youtube.com/watch?v=ya2jkJBQA8Y Create an image gallery with sliders]
	* [https://www.youtube.com/watch?v=_Ggq4cnk_EY Automatic Horizontal scrolling]		* [https://www.youtube.com/watch?v=_Ggq4cnk_EY Automatic Horizontal scrolling]
			* [https://www.youtube.com/watch?v=izyyWf6Ukmo building a drop-down menu]

Maytals: /* Tutorials for Basic Functions */

2024-05-16T14:22:42Z

Tutorials for Basic Functions

← Older revision		Revision as of 14:22, 16 May 2024
Line 30:		Line 30:
	* [https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]		* [https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]
	* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]		* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]
			* [https://www.figma.com/design/1kL14MdI1XlE6ljFzFj5es/Carousel-(Community)?node-id=3-99&t=MS3OOTzVxvwmz0iN-0 image carousel preset from Figma Community]

	== Tutorials for Advanced Functions ==		== Tutorials for Advanced Functions ==
	* [https://www.youtube.com/watch?v=ya2jkJBQA8Y Create an image gallery with sliders]		* [https://www.youtube.com/watch?v=ya2jkJBQA8Y Create an image gallery with sliders]
	* [https://www.youtube.com/watch?v=_Ggq4cnk_EY Automatic Horizontal scrolling]		* [https://www.youtube.com/watch?v=_Ggq4cnk_EY Automatic Horizontal scrolling]

Maytals at 14:11, 16 May 2024

2024-05-16T14:11:30Z

← Older revision		Revision as of 14:11, 16 May 2024
Line 18:		Line 18:

	'''Add Interactivity.''' First, switch from "design" to "prototype" on the top right.<br>		'''Add Interactivity.''' First, switch from "design" to "prototype" on the top right.<br>
	[[File:PrototypeToggle.png\|~~500px~~]]<br>		[[File:PrototypeToggle.png\|400px]]<br>
	Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>		Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>
	[[File:Action.png\|~~700px~~]]		[[File:Action.png\|400px]]
	[[File:ActionOptions.png\|~~700px~~]]<br><br>		[[File:ActionOptions.png\|400px]]<br><br>
	Select the desired ''interaction'' (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).<br>		Select the desired ''interaction'' (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).<br>
	[[File:InteractionOption.png\|~~700px~~]]<br>		[[File:InteractionOption.png\|400px]]<br>

Maytals at 11:10, 16 May 2024

2024-05-16T11:10:43Z

← Older revision		Revision as of 11:10, 16 May 2024
Line 29:		Line 29:
	* [https://help.figma.com/hc/en-us/articles/360039956474-Create-and-edit-text#:~:text=When%20the%20text%20tool%20is,also%20known%20as%20area%20text. Adding and creating Text]		* [https://help.figma.com/hc/en-us/articles/360039956474-Create-and-edit-text#:~:text=When%20the%20text%20tool%20is,also%20known%20as%20area%20text. Adding and creating Text]
	* [https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]		* [https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]
			* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]

	~~== CSS Grid ==~~
	* [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid
	* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout MDN Web Docs] has a good introduction to CSS Grid
	* [https://cssgridgarden.com/ CSS Grid Garden] is a fun CSS grid game
	* [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Tricks] has a good reference article on CSS Grid

	== ~~The Internet~~ ==		== Tutorials for Advanced Functions ==
	* ~~https://www.vox.com/a/internet-maps~~		* [https://www.youtube.com/watch?v=ya2jkJBQA8Y Create an image gallery with sliders]
	* https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:web-protocols/a/domain-name-system-dns		* [https://www.youtube.com/watch?v=_Ggq4cnk_EY Automatic Horizontal scrolling]
	* https://www.submarinecablemap.com
	* https://www.youtube.com/watch?~~t=360s&utm_source=pocket_mylist&~~v=~~1UStbvRnwmQ~~
	* https://www.youtube.com/watch?v=~~TNQsmPf24go~~

Maytals at 10:12, 16 May 2024

2024-05-16T10:12:26Z

← Older revision		Revision as of 10:12, 16 May 2024
Line 26:		Line 26:


	== ~~CSS Flexbox~~ ==		== Tutorials for Basic Functions ==
	* ~~http~~://~~flexboxfroggy~~.com/		* [https://help.figma.com/hc/en-us/articles/360039956474-Create-and-edit-text#:~:text=When%20the%20text%20tool%20is,also%20known%20as%20area%20text. Adding and creating Text]
			* [https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]

	== CSS Grid ==		== CSS Grid ==

Maytals at 09:52, 16 May 2024

2024-05-16T09:52:08Z

← Older revision		Revision as of 09:52, 16 May 2024
Line 1:		Line 1:
	Figma is an online platform allowing designers to create digital prototypes for apps and websites.		Figma is an online platform allowing designers to create digital prototypes for apps and websites.<br>
	Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!<br><br>		Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!<br><br>

Line 21:		Line 21:
	Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>		Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>
	[[File:Action.png\|700px]]		[[File:Action.png\|700px]]
	[[File:ActionOptions.png\|700px]]<br>		[[File:ActionOptions.png\|700px]]<br><br>
	Select the desired ''interaction'' (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).<br>		Select the desired ''interaction'' (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).<br>
	[[File:InteractionOption.png\|700px]]<br>		[[File:InteractionOption.png\|700px]]<br>

Maytals at 09:50, 16 May 2024

2024-05-16T09:50:16Z

← Older revision		Revision as of 09:50, 16 May 2024
Line 2:		Line 2:
	Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!<br><br>		Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!<br><br>

	TIP! Figma doesn't work well on Safari, please use Chrome or Firefox.<br>		TIP#1! Have a clear sketch of your design = know what you want to happen.<br>
			TIP#2! Figma doesn't work well on Safari, please use Chrome or Firefox.<br>

	== Introduction to the Workspace ==		== Introduction to the Workspace ==
Line 9:		Line 10:
	You will be able to check your prototype on your phone with the Figma mobile app.<br>		You will be able to check your prototype on your phone with the Figma mobile app.<br>

	[[File:FigmaFrame.png\|~~800px~~]]<br>		[[File:FigmaFrame.png\|700px]]<br>

	'''Selection's Options.''' Each time you select an element in Figma, you will have its editing options on the right side of the screen.<br>		'''Selection's Options.''' Each time you select an element in Figma, you will have its editing options on the right side of the screen.<br>

	[[File:FigmaCircleOptions.png\|700px]]		[[File:FigmaCircleOptions.png\|700px]]
	[[File:FigmaTextOptions.png\|700px]]		[[File:FigmaTextOptions.png\|700px]]<br>

			'''Add Interactivity.''' First, switch from "design" to "prototype" on the top right.<br>
			[[File:PrototypeToggle.png\|500px]]<br>
			Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>
			[[File:Action.png\|700px]]
			[[File:ActionOptions.png\|700px]]<br>
			Select the desired ''interaction'' (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).<br>
			[[File:InteractionOption.png\|700px]]<br>