Difference between revisions of "Figma Tutorials"

From Publication Station
 
(9 intermediate revisions by the same user not shown)
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>


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|400px]]<br>
Then, select the ''action'' that will ''trigger'' the change (swipe/ hover/ click etc.).<br>
[[File:Action.png|400px]]
[[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>
[[File:InteractionOption.png|400px]]<br>


== CSS Flexbox ==
* http://flexboxfroggy.com/


== CSS Grid ==
== Tutorials for Basic Functions ==
* [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid
* [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://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://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files Add Images and Videos]
* [https://cssgridgarden.com/ CSS Grid Garden] is a fun CSS grid game
* [https://help.figma.com/hc/en-us/articles/16118297069463-Create-a-photo-gallery-prototype Create a Photo Gallery]
* [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Tricks] has a good reference article on CSS Grid
* [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]


== 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?v=izyyWf6Ukmo building a drop-down menu]
* https://www.youtube.com/watch?t=360s&utm_source=pocket_mylist&v=1UStbvRnwmQ
* https://www.youtube.com/watch?v=TNQsmPf24go

Latest revision as of 14:37, 16 May 2024

Figma is an online platform allowing designers to create digital prototypes for apps and websites.
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!

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

Introduction to the Workspace

Creating a Frame. choose your own phone size for the prototype.
Each frame wil be one visualisation state of your app. For another state, you will design another frame.
You will be able to check your prototype on your phone with the Figma mobile app.

FigmaFrame.png

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

FigmaCircleOptions.png FigmaTextOptions.png

Add Interactivity. First, switch from "design" to "prototype" on the top right.
PrototypeToggle.png
Then, select the action that will trigger the change (swipe/ hover/ click etc.).
Action.png ActionOptions.png

Select the desired interaction (navigate to, open overlay etc.) and its way op appearing (delay, fade-in etc.).
InteractionOption.png


Tutorials for Basic Functions

Tutorials for Advanced Functions