Hello, hello, hello ! I'm taking a pivot from coding and taking a free visual design course to learn more about UI design. The free course I am taking is through pathunboundCheck it out!
Goal: To blog at the end of each week as a review.
_
Week 1:Visual Design Tools - Starting with Figma!
Visual Design improves a digital product by focusing on images, typography, layout, and color allowing the user to easily navigate the product. The overall design should be based on the user's needs.
*Figma *
Frames are art boards with preset dimensions of a desktop, different models of iPhones and Androids. You can create your own frame and set your own dimensions as well.
Effects consist of a drop shadow, inner shadow, layer blur, and background blur. Layer Blur affects the layer you have selected like an image and you can set the level of blur. Background blur affects what is directly behind a shape and not the layer.
Components are used to create a shape that you will displayed multiple times on an app or website. An example would be a button that will be used in several places. Creating a component and using it instances will make it easier if there needs to be a change made to all of them. The change will be made to the component and all of its instances will update. You can create different components(example, different versions of a button) and use a slash naming scheme (button/small/secondary/icon/disabled/). All the button components can be selected and combined into a variant.
Variants(Component sets)
Steps to create a variant:
- Create a shape
- Add properties to it
- Name it using the slash naming scheme: button/checked/small/
- Click the component button
- Create a variant from the right panel
- Select the new variant and rename
- Rename the property to describe the variant options
Example, state(property), unchecked(variant), checked(variant). You are allowed to toggle between the two variants.
Vectors allow you to see all the nodes on a shape or text so you can make more detailed adjustments. CMD + E allows you to see the vector.
Boolean Operators are four formulas used to combine shapes. Intersect only includes what overlaps, exclude doesn't include what overlaps on both sides, union doesn't include the center that overlaps and subtract only shows the bottom layer of the two shapes combined.
Until next time!
Top comments (0)