[cmdlhz’s 2019 Self-leaching Story] Series
[JavaScript]
🌱 Net Ninja - JavaScript ES6
🌱 Net Ninja - Asynchronous JavaScript
🌱 Net Ninja - Object Oriented JavaScript
🌱 Coding Train - JavaScript ES6-ES8 (Part1, Part2)[Regular Expressions]
🌱 Coding Train - Programming with Text[Vue]
🌱 Net Ninja - Vue CLI3
🌱 Net Ninja - Vue JS2
🌱 Net Ninja - Vuex
🌱 Net Ninja - Vuetify (Part1, Part2, Part3)[Python/Django]
🌱 Net Ninja - Python3
🌱 Net Ninja - Django[Figma]
🌱 Design Course
🌱 Figma (Part1, Part2, Part3, Part4, Part5)[Illustrator]
🌱 TastyTuts (Part1, Part2, Part3)[SQL]
🌱 freeCodeCamp
🌱 Figma Tutorial by DesignCourse on YouTube.
1) Intro
2) Design - The Landing Page
3) Design - The Main Page
4) Design - Side Navigation Menu
5) Prototype
6) Comment
7) Code[ 1. Intro ]
I spent half an hour to try to find out why I couldn’t create a frame in the canvas. It turned out that I had to configure my browser for Figma.
> “Use hardware acceleration when available” was not on. So, I turned it on.
The detailed instruction can be found here:
[ 2. Design — The Landing Page ]
2–1. Curve a rectangle
Double click the rectangle> Click the pen icon > Click a point > Escape> Click the bend tool > Band> To move multiple points at once, drag the mouse
2–2. Duplicate the rectangle:
⌘ + D2–3. Bring a rectangle forward or backward
⌘ + ] Bring Forward⌘ + [ Send Backward
2–4. Rotate a rectangle
To rotate, place the mouse cursor at a corner of a rectangle.
2–5. Make a rectangle be a part of a frame
Drag the rectangle to a frame.
2–6. Control the lightness of a rectangle
Change the percentage of the fill
2–7. Insert a SVG file
Download a svg file. I downloaded one from the Material Icons website.
Next, drag the icon to a canvas.
> We automatically get vectors for the image itself and the background.
> We can change the color and the size of the icon.
2–9. Change the radius of corners of a rectangle
> Drag the circle to change the radius.
2–10. Set a drop shadow
2–11. Group items
> Click things we want to group with ⌘ to select them together
> Press ⌘ + G
2–12. Make visual hierarchy between buttons
- Click the rectangle
>> Click the eye button in the fill section to hide the fill
>> Add a stroke in the stroke section
2. Click the text
>> Change the color to white
>> Change the font weight from bold to regular
[ 3. Design — The Main Page ]
3–1. Duplicate the canvas:
⌘ + D3–2. Change the size of an icon proportionally
> Click this chain icon.
3–3. Filter images by usage rights on Google
> Drag the selected image to a canvas.
>Zoom out and resize the image.
> Put a rectangle over the image and send the rectangle backward
> Make the image layer setting as multiply and adjust the percentage.
[ 4. Design — Side Navigation Menu ]
4–1. Blur the existing elements
> Group everything and apply “Layer Blur” effect to it.
4–2. Create a component
> You can right click element(s) and create a component.
> When we edit an element in a component with ❖ (master component), the same type of elements in all components are affected at the same time.
> When we edit an element in a component with ◇, the same type of elements in other components are affected at the same time.
[ 5. Prototype ]
5–1. Make a connection
> Drag the circle on the middle of the right side of what we clicked to connect it to where we want to go next.
5–2. Adjust the transition setting
5–3. Test the prototype
> It’s located at the right-top corner of the browser window.
5–4. Advanced prototyping techniques
[ 6. Comment ]
> We can place a comment wherever we want and collaborate with others..
[ 7. Code ]
> We can click an element to get the code of the element.
Thanks for reading! 🎵 If you like this blog post, please clap👏
