Evento da comunidade {{communityTitle}}

Nome do evento

Título do anfitrião

Entre na comunidade {{communityTitle}} para ver este post

Pesquisar por título do post

Título*

Você não pode acessar este conteúdo ou produtos no momento

Mastering the basics of Figma Step-by-Step.

Learn Figma and elevate your UX/UI skills—whether you're new or an experienced designer.

Michael Fridman

Free

Paid

Figma Pro

Mastering the basics of Figma Step-by-Step.

Learn Figma and elevate your UX/UI skills—whether you're new or an experienced designer.

This course includes videos and a workbook to keep track of your progress as well as offering you a resource to always look back on as well as a bonus section with a ton of goodies!

Private events

Welcome to the course!

Course Format:
This course is designed to be interactive and action-based. We want you to actively engage with the content and apply the lessons to your own digital design journey.

Interactive Learning:
Take advantage of the interactive features in this document, such as filling out blanks and completing action items. This will help you internalize the concepts and apply them to your own digital design business or brand.

Pay Attention and Take Action:
Success of your goals comes from actively learning and implementing what you learn. Stay focused, commit to the course, and take action on the strategies and techniques presented.

How To Get Your Copy of The Course Workbook
Make a copy so you have your very own workbook for the course.

Click the link: Course Workbook

Hover near the title in the left-hand corner where the outline is until you see 3 dots appear (...).

Click the three dots (...) right next to the title of the document on the left hand corner.

There will be an option (the 8th option to be exact) that says “Copy” simply click here.

Then simply add your name to the workbook and select “My Docs” for the location of the copy. This means it will only be able to ever be seen by you.

There you have it! Now your personal workbook copy is ready to go you can fill in every single action item as you move through the course, and it will be your guide and motivation!

Action Items
Join the Community! Open link
Create a copy of the Course Workbook

Introduction

Link

1. Figma Vocabulary and Frames
Figma Frames (Equivalent to Artboards in Photoshop/Illustrator)

Frames act as containers for your designs, similar to Artboards in Photoshop and Illustrator.

2. Essential Tools in Figma
Move Tool: Used to move and position objects in your design.
Text Tool: Allows you to add and edit text within your designs.
Pen Tool: Used to create custom shapes and paths, just like in Photoshop and Illustrator.
Rectangles, Shapes, Lines: Tools for creating various geometric shapes.

These tools have similar functionalities to their counterparts in Photoshop and Illustrator.

3. Properties Panel
The Properties Panel in Figma is where you can adjust the properties of selected objects, such as width, height, rounded corners, colors, and text formatting.

It shares many similarities with the properties panels in Photoshop and Illustrator.

4. Alignments
Figma provides alignment options like center, left, and bottom alignment, which are similar to Photoshop and Illustrator.

5. Effects Panel
Figma has a more basic Effects Panel where you can add drop shadows, blur effects, and adjust backgrounds.

This panel is comparable to the Effects menu in Photoshop and Illustrator.

6. Layers Panel and Grouping
The Layers Panel in Figma, located on the left side, allows you to manage and organize layers in your design.

You can easily drag and drop layers and group them together for better organization.

Figma also supports multiple pages, which you can rename according to their content (e.g., emails, social media).

A window will display all your pages for convenient navigation.

7. Assets Tab
Figma includes an Assets Tab that lets you organize reusable design elements or components separately.

You can create and store assets that can be reused across your designs, promoting consistency and efficiency.

8. Similarities with Photoshop and Illustrator
Figma, Photoshop, and Illustrator are all vector-based design tools.

Similar to Photoshop and Illustrator, Figma allows you to manipulate paths and anchor points created using the Pen Tool.

Figma supports plugins that extend its functionality, similar to how Photoshop has various ready-to-use plugins, like the 2D to 3D converter.

Photoshop has actions, which can be either purchased or created to automate repetitive tasks.

9. Differences between Figma, Photoshop, and Illustrator
Figma is a cloud-based design tool, while Photoshop and Illustrator are desktop applications.

Figma enables real-time collaboration and sharing, making it easier for teams to work together remotely.

Photoshop and Illustrator have more advanced photo editing and illustration capabilities, respectively, compared to Figma.

Figma's focus is on interface design, prototyping, and web-based projects, whereas Photoshop is primarily used for photo manipulation and graphic design, and Illustrator excels in creating scalable vector illustrations.

Figma has a more intuitive and user-friendly interface, making it easier for beginners to learn and use compared to the complex interfaces of Photoshop and Illustrator.

Figma offers a range of built-in design libraries and UI kits, simplifying the process of designing user interfaces.

Unlike Photoshop and Illustrator, Figma does not require software installation or updates, as it runs entirely in the browser.

Figma's pricing model is based on subscription plans, while Photoshop and Illustrator can be purchased with a one-time payment or through a subscription.

Action Items
Create a FREE Figma Account here: https://www.figma.com
Complete the action items using the Figma Master Workbook

Figma-Pro-Module-01

What is Figma?

1. Generating Ideas and Gathering References
Idea Generation: Start by writing down your ideas and concepts.
Consider the goals and requirements of your project.

Reference Gathering: Use Google Images to search for references related to your project.

Import relevant images into Figma to have them readily available while you work.

Mood Board Creation: Create a mood board in Figma where you can compile visual examples and references.

Drag and drop the images you find into the mood board for easy reference.

2. Getting Started with Project Ideas
Use Ready-Made Examples: When starting a project, search for examples of similar projects on platforms like Dribbble and Behance.

Search for Simplicity and Slick Design: Look for ad examples or designs related to your project. Import 2-3 relevant examples into Figma.

Create Frames/Artboards: Set up a frame or artboard in Figma based on the size and dimensions required for your project. This prepares you to start designing.

3. Seeking Inspiration and Ideas from Design Platforms
Explore High-Quality Designs: Use platforms like Dribbble and Behance to find inspiring designs created by professional designers.

https://dribbble.com/
https://www.behance.net/

Stay Updated on Current Trends and Standards: Search for trending topics and design styles that align with your project. Look for elements that make high-quality designs stand out.

Walkthrough of Good Elements: Analyze and understand the design elements used in high-quality designs to gain insights into what you can implement and improve in your own work.

4. Understanding Implementation and Improvement
Examples of High-Quality and Low-Quality Designs: Analyze both high-quality and low-quality design examples to better understand the characteristics that distinguish them.

Identify Areas for Improvement: Learn from the shortcomings of low-quality designs and identify areas where you can enhance your own designs.

Action Items
We will use the project prompt below throughout the course to help you learn by doing with an individual example. (You can also use a project that you already have in mind if you would like.)
Keeping this project prompt in mind, search the internet (Google, Dribble, Behance, Pinterest, etc) to find inspiration for your project.
Use the table to organize the inspiration and examples you find!
Complete the action items using the Workbook- Figma Freak- Course.

Figma-Pro-Module-02

Groundwork & Fundamentals

Drawing and Creative Process

For Ads:
In the case of ad designs, you can directly create them in Figma since they are typically more contained and focused.

For Web Development/Design:
It is beneficial to start with pen and paper to sketch out your ideas.
This allows for more creative freedom and quick iterations.

Scan or Import Sketches:
After sketching your design on paper, you can scan it or take a picture with your phone and import it into Figma.

Alternatively, you can use basic shapes in Figma to create low-fidelity designs that resemble your sketches.

Basic Shapes for Sketching:
Utilize simple four-sided shapes (squares, rectangles) and lines in Figma to create a generalized layout.

This helps you visualize where elements like text and images should be placed.

Focus on General Layout:
The purpose of sketching is to establish a generalized layout and arrangement of elements.

It doesn't need to be extravagant or highly detailed at this stage.

Overcoming Overwhelm
Just Start Sketching:
To avoid being overwhelmed, start sketching without hesitation.
Don't get caught up in your thoughts or worry about perfection at this stage.

Refinement Comes Later:
Remember that everything can be refined and polished during the design process.

The initial sketches are meant to capture your ideas and provide a starting point.

Embrace Creativity and Iteration:
Sketching allows you to explore different concepts and iterate quickly.
Embrace the freedom to experiment and make adjustments as you go.

Action Items
Using a pen and paper sketch out how you plan to layout/format your project.
Scan the images into the table below so they can be imported into Figma.
Import these images into Figma!
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-03

Sketching

1. Layout & Structure
Establish a basic structure for your text elements, consisting of a header, subtext, content, call to action, and footer.

However, it is not necessary to include all these elements in every design.
Simplify the structure based on the specific requirements of your project.

2. Speeding Up Workflow with Components
Utilizing Components:
Create reusable components in Figma and use them throughout your design.

For example, if the call to action is a button, create a button component that can be copied and pasted whenever needed.

When you make changes to the main component, all instances of the button will update accordingly.

This saves time and ensures consistency.

Component Sets:
Identify elements that are repeated throughout your design.
Group them as component sets to easily access and apply consistent styling.

For example, create a component set for headers to quickly update all headers in your design simultaneously.

3. Naming and Organization
Rename Elements:
Practice naming elements right from the beginning.

When you have numerous elements in your Layers Panel, having clear and descriptive names helps you and your team locate specific elements efficiently.

It also facilitates smoother collaboration and saves time.

Organizing the Layers Panel:
Demonstrate best practices for organizing the Layers Panel.
Group related elements and use clear naming conventions.

For example, group the header, subtext, and body elements together and label them as "Copy."

4. Naming Conventions for Quick Identification
Use abbreviations in your naming conventions for faster identification and accessibility.

For example, use "GRP" for the group and "IMG" for the image.
Consistent and meaningful abbreviations help streamline your workflow.

Action Items
Go into Figma, where you have uploaded your pictures, and start creating the basic format for your project.
Use the below table to keep track of the abbreviations you use in your naming conventions. This can later be shared with your team or anyone else working on a project with you to save so much time!
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-04

Structure & Workflow

1. Getting Started with Initial Designs
Start by drawing out your buttons, adding initial text, and shaping the elements. Refer to your sketches and position them correctly within your design.

2. Setting Dimensions and Creating Content
Determine Dimensions
Depending on the type of project you're creating, such as a story reel, social media post, or YouTube thumbnail, set the dimensions accordingly.

Figma provides numerous dimension presets for desktop, mobile, tablets, and slides, making it convenient for you to select the appropriate size.

3. Rough Layout and Refinement
Once you've positioned your elements within the frame based on your sketches, refine the layout. Select all the elements and align them correctly.

Adjust the size of buttons, change fonts, and ensure proper spacing between text and images.

4. Utilizing Plugins and Templates
Explore Plugins and Templates
Take advantage of the plugins and templates available in Figma.

Use image search plugins to import images easily and utilize icon plugins for commonly used icons like hearts or arrows.

5. Understanding the Purpose of Your Design
Identify Your Audience:
Determine who your design is intended for. Consider your target audience and tailor your design to their preferences and needs.

Define Your Goal:
Clarify the objective or message you want to convey through your design.

For example, if you're designing an email newsletter for email marketing, it typically follows a specific structure.

In contrast, an ad may have a different layout, with emphasis on imagery or text.

Keep the End Goal in Mind:
Understand the ultimate purpose of your design and design with that goal in focus.

6. Layout and Structure for Ads and Websites
Explore preset templates in Figma that provide layout and structure examples.

For instance, there may be templates for ad designs, story reels, or website structures like menus, headers, bodies, and footers.

These templates can serve as a starting point that you can modify for your specific design needs.

Action Items
Do a search for Plug-ins in Figma that could help you in your project. Fill them in the table below so you can quickly find them again next time!
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-05

Beginning Design

1. Design Process Thinking:
Basic Design:
Begin with a simple design consisting of essential elements like text and a button.

This serves as the foundation for your design.

Intermediate Design:
Progress to an intermediate level by incorporating additional elements such as images and more complex layouts.

This adds depth and visual interest to your design.

High Quality/Advanced Design (Refinement Stage):
At this stage, focus on refining your design further.

Pay attention to details such as color choices, branding elements, and incorporating more intricate design elements.

2. Graphical & Visually Stimulating Design:
High-Quality Images:
Utilize high-quality images that are properly placed within your design.

Carefully consider the size and placement of images to create an aesthetically pleasing composition.

Balanced Text-to-Visual Ratio:
Avoid making your designs text-heavy, especially for ads.

Instead, aim for a visually stimulating image that conveys the intended message effectively.

Font Selection:
Choose fonts that are visually appealing and easy to read.

Consider using fonts that you typically prefer and find visually appealing for your designs.

Image Selection:
Identify the types of images that work well for your designs.
This can be based on personal preference and the style you want to achieve.
Compile a list of image sources that you commonly use or recommend.

Color Choices:
Understand the psychology of colors and how they can convey different messages.

Create a list of colors and their typical associations, such as luxury, inviting, energetic, etc.

3. Throw Spaghetti, See What Sticks:
Experimentation:
Try various design concepts and ideas.

Be open to exploring different approaches and layouts to see what works best for your project.

Multiple Concepts:
Develop multiple design concepts to explore different directions.

This allows you to compare and evaluate which concepts align best with your goals and objectives.

Multiple Variations:
Create variations within each concept by tweaking elements like color schemes, typography, and imagery.

This enables you to fine-tune your designs and choose the most effective elements.

Action Items
Look at the examples below and rate them as basic/intermediate/advanced.
Write your notes on how each one could be improved.
Write your notes on anything you think you did well.
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-06

Variations

1. Spacing, Layout, Colors, Images, Grids, Fonts, and Templates:
Positioning and Sizing Images:
Ensure that images are appropriately positioned within your design and that their sizes complement the overall layout.

Spacing:
Follow the rules of proper spacing to create a visually appealing design.
Avoid having elements with large gaps between them.
Ex. Don’t place the Call To Action too far away!

Grids:
Utilize the layout grid feature in Figma to establish a consistent grid structure for your design.

Within Figma when you click on a frame there is a layers panel called “layout grid” from there you can select how many columns and rows for that grid

Here you can also choose spacing and alignment.

Adjust the number of columns and rows, spacing, and alignment to create a well-organized layout.

Example: email/newsletters: Recommended is 600 with lower columns

Example: web page: 8-12 with higher columns

Fonts
Use good-looking, easy-to-read fonts.
Check out 5. List of Fonts to Use.

Colors
Use the correct colors for different topics/messages you want to convey (luxury, natural, inviting, etc.)

Check out: 6. List of Colors and What to Use Them For
Refinement Examples:
Explore examples of proper spacing, layout, and grid usage to understand how to improve the overall aesthetic of your design.

2. Structure and Alignment:
Design Aesthetic:
Consider the overall look and feel of your design.

Ensure that elements are properly aligned and positioned to create a cohesive and visually pleasing composition.

Spacing:
Avoid overcrowding elements by providing sufficient breathing room between text, images, and other design elements.

This applies to both web pages and applications.

3. User Interface (UI) Considerations:
Customer Experience:
Design with the customer experience in mind.

Put yourself in the customer's shoes and think about their journey when interacting with your design.

Visual Hierarchy:
Understand where the user's eyes will naturally be drawn and prioritize elements accordingly.

Design the layout to guide users through the desired flow and make it easier for them to navigate.

Resources:
Explore articles and resources that delve deeper into designing for a better UI and customer experience. 4. Resources to Learn About Bettering User Interface Experiences

4. Leveraging External Resources:
Downloading and Modifying Files:
Take advantage of resources like Photoshop or Illustrator files that you can download and modify to suit your design needs.

This can include high-quality images, vector designs, or pre-existing templates.

Photo Manipulation:
Consider using high-resolution images and leveraging tools like Photoshop to perform advanced editing, such as removing backgrounds or enhancing photos.

Action Items
Refine your project in Figma following the information you just learned!
Write down any specific roadblocks you encountered while trying to finish everything so you can share them in the community for support and insight!
When you find the answer, return to this page so you can fill it out and know it for next time!
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-07

Refinement

1. Ensuring Readiness for Developers
Start by confirming that your design or application is ready to be handed off to developers. This means gathering all assets and performing necessary cross-checks before shipping.

2. Image Formats and Specifications
Ensure all images are in the correct format:
Use PNGs for transparency.
Use JPEGs for standard images.
GIFs are only for presentations, as animations will not display otherwise.

3. Spell Check and Font Consistency
Conduct a thorough spell check to eliminate any typos. Then, verify that the font usage is consistent across all elements.

In this example, the Roboto font, a free Google font, is used throughout.

4. Layout and Message Clarity
Review the layout to confirm it effectively communicates the intended message.

Check that the navigation is clear—elements like sign-in, sign-up, cart, and menu should be easy to access and understand.

5. Ship-Ready Checklist/ Comprehensive Design Checklist
Ensure all images are in the correct format and meet the required specifications.

Perform a thorough spell check to eliminate any typos or errors in the text.

Review the font usage to ensure consistency and appropriateness.

Verify that the layout effectively communicates the intended message.

Utilize the detailed checklist to ensure all aspects of your design meet necessary criteria. This checklist covers:

Problem definition and validation
Competitor analysis
Information architecture
Wireframes and mockups
User testing and feedback

The checklist serves as a reference, and not all tasks may apply to your project. Ensure that if you skip any tasks, you have a clear rationale for doing so.

6. Exporting Design Files
Determine the appropriate file format for exporting your design.
Use PNG for images with rounded corners or transparency in the background.
For logos, export at 3x scale as a PNG to ensure there is no background.
JPEG is commonly used for ads and web pages.
Properly name groups, objects, and images to avoid confusion during export.

7. Handing Off to Developers/ Sharing Code/ Providing Access
Use Figma’s developer handoff feature:
Mark elements as "Ready for Developers" to notify the dev team.

Developers can then access necessary spacing, styles, and code (CSS, Android, iOS).

When sharing the file with the development team, set permissions initially to view-only to avoid any unintended edits.

Invite developers to your Figma artboard, granting them view rights.

This allows them to click on individual elements and access the corresponding CSS codes on the side.

This enables seamless collaboration between designers and developers.

8. Collaborative Features
Figma allows you to invite collaborators to your project. You can set different permission levels such as view-only, edit, or admin rights, ensuring a smooth collaboration process between designers and developers.

Action Items
Go through the checklist and make sure your project meets all of the points!
Download your project in the correct way based on what it is for and what kind of components it has. Try opening this from another computer/tablet/phone.
Share your project with someone on your team or with an alternate email of yours to make sure they can go in and edit the project however you need them to.
Complete the action items using the Figma Master Workbook.

Figma-Pro-Module-08

Package It Up

1. Entering Prototype Mode
Begin by switching from the design tab to the prototype mode in Figma. Once in prototype mode, you'll notice plus signs on each object, allowing you to connect screens and create interactive flows.

2. Connecting Screens
Build connections between screens:
Sign In: Link the sign-in button to the home page.
Sign Up: Link the sign-up button to the sign-up page.

Continue connecting flows between all relevant screens to create a semi-functional app for demonstration purposes.

3. Setting Animation and Transitions
Once the connections are in place, you can adjust the animations and transitions:

Select animation types like instant, dissolve, or smart animate.
Use easing options such as ease in, ease out, or even a bounce effect.

Adjust the animation speed by changing the duration settings (lower numbers mean faster animations).

4. Creating User Flow Links
Set up user flow interactions for key actions:
Add to Cart: Link this button to the order page.
Customer Service: Link this to the customer service page.
Home: Always link back to the homepage for easy navigation.

Ensure that all essential navigation elements, such as adding items to the cart and navigating to restaurant pages, are linked correctly.

5. Previewing the Prototype
To see your prototype in action, use the Ctrl + Shift + Space (or Cmd + Shift + Space) shortcut to open the preview window. You can interact with the prototype to:

Test sign-in and sign-up flows.
Navigate between food items and restaurant pages.
Add items to the cart and return to previous screens like the home page.

6. Prototyping for Demonstrations
Prototyping allows for an interactive demonstration of your design:
Test how users can navigate between key pages.
Use visual cues (highlighted elements) to show which parts of the prototype are clickable.

Demonstrate bottom menu navigation for key sections like the home page, cart, and customer service.

Action Items
Complete your screen connections by linking all interactive elements.
Set up smooth animations and adjust transition settings to improve the user experience.
Preview the prototype to ensure all flows function as intended for your team or client presentations.
Complete the action items (still in module 8) using the Figma Master Workbook.

Figma-Pro-Module-09

Prototyping

1. Introduction to Basic Animation
In this section, you'll learn how to add basic animations to your app designs using Figma’s prototype tool. Animations help enhance your presentations, whether to teams or clients, by adding movement to elements.

2. Duplicating and Preparing Components for Animation
To animate an element:
Select the shopping cart item menu.

Duplicate the item you want to animate (e.g., a shopping cart with two states: closed and open).

Detach instances of the component, as animations cannot be applied to components still linked to the original.

Detach the instance to allow animations (animations cannot be done on a component).

Rename the states appropriately (e.g., default for the closed state and delete for the open state).

Change the state to "delete cheeseburger".
Select everything and click detach to enable prototyping animations.
Change the name to "delete".

3. Setting up the Animation Flow
Once the elements are ready:
Select the default state and then enter prototype mode.

Drag the interaction link to the second state (delete state), ensuring it is triggered on click.

Drag the first frame to the second frame.
Ensure the trigger is set to "onClick".
Options available: while dragging, while hovering, while pressing, etc.
Select "onClick" for the example.

Customize the animation using Smart Animate and select effects like bounce or ease in/out for smooth transitions.

4. Returning to Default State
After setting the transition to the delete state, create a reverse animation:
Set the destination to "Shopping Cart Delete".
Enable "Smart Animate" and choose the animation effect.
Example: "Ease Out Back".
Set the return animation from "delete" to "default".

Drag the link back from the delete state to the default state to create a seamless two-way interaction.

Ensure both directions have appropriate animations and timing for the best user experience.

5. Previewing the Animation
There are two ways to preview your animation:
Use Shift + Ctrl + Space (or Shift + Cmd + Space) to open the preview window and see how the animation behaves when clicked.

Alternatively, click the Play icon to open a new window for the animation preview.

Test the animation by clicking the button to see how smoothly it transitions between the states.

6. Naming Prototypes for Organization
For organization, remember to name your prototype (e.g., shopping cart animate) to easily manage multiple animations in your project.

Naming and Previewing Prototypes
Name the prototype (e.g., "shopping cart \ animate").

Methods to preview:
Shift + Control + Space bar (Windows) / Shift + Command + Space bar (Mac) to bring up the preview.

Click the play icon to open the preview in another window.

Final Preview
Click to see the animation.
Confirm the smooth animation of the button.

Action Items
Create a basic animation in Figma using a simple menu item with two states (e.g., a "like" button with states for "liked" and "unliked").
Duplicate the component you wish to animate and detach instances for animation customization.
Set up Smart Animate transitions between states and test different animation effects.
Preview the animation in Figma and adjust timings as necessary for a smooth flow.
Complete the action items (still in module 8) using the Figma Master Workbook.

Figma Pro Course

Descrição

Ao obter isso, você também desbloqueia