Welcome, design enthusiasts! Today, we are thrilled to guide you through an enriching session tailored for beginners. Our goal is to ensure you feel at ease navigating Figma’s tools, fostering collaboration, and boosting productivity.

Education Opportunities with Figma

Free for Students and Educators

Exciting news for students and educators—Figma and FigJam are free for you! Head to figma.com/education to verify your educational status. Pro teams, unlimited version history, and advanced features await once you create your education team.

K-12 Special Program

If you’re in K-12, explore figma.com/education/chromebooks for a tailored sign-up process. Ensuring COPA and FERPA compliance, this alternative option is designed with you in mind.

Verification Process

For college students, design bootcamp enthusiasts, or those in higher education, sign up, verify your status, and create an education team. Enjoy the perks of Figma’s advanced features and collaborate seamlessly.

Canvas Navigation

Miggy demonstrates how to smoothly navigate the canvas using the space bar and mouse or touchpad. Remember to use shortcuts like V for the move tool and familiarize yourself with zooming techniques.

Page Navigation

Effortlessly switch between pages using shortcuts like page up or page down, or function key combinations. This ensures a fluid navigation experience within your Figma project.

Quick Actions

Unlock the power of quick actions with shortcuts like command/ctrl + / or command/ctrl + P. This feature simplifies accessing essential functions, streamlining your workflow.

Workshop Agenda

Our Figma 101 workshop covers fundamental aspects:

  1. Tools and Navigation: Dive into Figma’s collaborative design tools and master the interface.
  2. Creating Elements: Learn to craft shapes, text, and images while exploring hidden features.
  3. Responsive Design: Understand resizing elements and using constraints for a seamless design process.
  4. Advanced Topics: If time permits, delve into layouts and components, followed by a Q&A session.

Screen Real Estate Mastery

Quick Actions for Efficiency

To navigate Figma seamlessly, mastering quick actions is crucial. By hitting command/ctrl + / or command/ctrl + P, you can unleash a world of functions. Simply type in your desired action, be it exploring version history or uncovering keyboard shortcuts. It’s your shortcut to efficiency.

Keyboard Shortcuts for Every Layout

Discovering keyboard shortcuts tailored to your layout is a game-changer. Miggy demonstrates how to access different layouts, ensuring everyone can optimize their Figma experience. No matter your keyboard configuration, Figma adapts to accommodate your preferences.

Typography Unleashed

The true power of Figma lies in its typography finesse. Uncover the secrets of the keyboard shortcuts menu and explore the world of fonts, weights, and variable font axes. With detailed previews and advanced type settings, you can fine-tune every aspect of your text. Miggy even shares a tip on adjusting hanging punctuation for a polished design.

Text Tool Mastery

Adding Text to Canvas

Text is more than just words on a canvas; it’s a design element. By pressing the T key, you can effortlessly add and format text. Learn the art of adding emojis and explore the vast world of font options, including the innovative font picker.

Text Properties and Settings

Understanding text properties is key to mastering Figma. Discover the three modes—auto width, auto height, and fixed sizing—and grasp the significance of each in your design journey. Dive into advanced settings, adjust kerning pairs, and even explore hanging quotes for a sophisticated touch.

Paragraph Spacing and Advanced Typographic Control

Miggy unveils the art of paragraph spacing, allowing you to control text layout with precision. For typography enthusiasts, the advanced type settings offer a playground for adjusting ligatures, letter forms, and alternates. Explore kerning pairs and witness the magic of hanging quotes come to life.

Shape Foundations

The Power of Shapes

Shapes are the backbone of UI design, and Figma’s shapes offer more than meets the eye. Explore the versatility of rectangles, circles, and stars. Learn to manipulate shapes with radius adjustments and discover the non-destructive nature of Figma’s vector graphics.

Gradient Fills and Shadows

Shapes in Figma go beyond simple outlines. Dive into the world of gradients, shadows, and multiple fills. Witness the power of non-destructive properties as you create dynamic designs that maintain their integrity, no matter the scale.

Ellipses and Arcs for Data Visualization

Ellipses in Figma come with a hidden gem—the arc tool. Transform a simple circle into a pie chart for compelling data visualizations. Adjust ratios and start points effortlessly to convey your information with clarity.

Perfecting Circles and Activity Monitors

Mastering Ellipses and Rounded Corners

Discover the secret to achieving flawless circles and rounded corners. Miggy unveils a technique to create a sleek activity monitor UI, showcasing the importance of proper fill and stroke manipulation. Learn the art of swapping fill and stroke and fine-tune your design for a polished finish.

Crafting Intuitive User Interfaces with Shapes

Witness the power of duplicating shapes, scaling, and rotating them to build intricate designs. Explore the versatility of Figma’s shape manipulation tools to create dynamic and visually appealing user interfaces. Miggy demonstrates the duplication process and unveils shortcuts for efficient design iteration.

Polygon Shapes and Intuitive Centering

Delve into the world of polygon shapes and learn how to draw them with precision. Discover the significance of the extra space at the bottom of triangles and how it contributes to intuitive centering. Miggy showcases the power of aligning shapes for cohesive and visually pleasing designs.

Unleashing the Pencil Tool and Advanced Stroke Settings

Mastering the Pencil Tool

Take a brief but insightful journey into the capabilities of the pencil tool. Explore how Figma’s vector editing mode allows for flexible drawing and editing of lines. Miggy shares tips on creating organic shapes and demonstrates the unique features of Figma’s pencil tool.

Advanced Stroke Settings and Join Options

Learn the art of adjusting stroke settings for lines and shapes. Miggy unveils the secrets of rounded corners and showcases advanced stroke settings for creating intricate designs. Discover how Figma’s join options contribute to the visual appeal of your designs, allowing for rounded edges and precise adjustments.

Image Fills and Creative Blending

Unlock the potential of image fills in Figma. Explore how images can be used as fills for shapes, providing a new dimension to your designs. Miggy demonstrates the process of placing images within shapes, adjusting image properties, and even adding color fills with creative blending modes. Learn to stack and blend images and colors for visually stunning compositions.

Arranging, Resizing, and Scaling Objects

Tidying Up Your Design

Discover the power of Figma’s auto-arrange feature and tidy up your designs with ease. Miggy showcases how to efficiently arrange and organize your objects using the tidy up option. Learn to utilize this feature for a clean and visually appealing design layout.

Bonus Tip: Adding Videos

Explore a bonus tip on adding videos to your Figma designs. Miggy briefly explains the process of dragging videos into Figma, highlighting that video playback occurs exclusively in prototyping mode. For more details on video prototyping, Miggy directs viewers to Figma’s official YouTube channel.

Arranging and Organizing Objects

Tidying Up and Spacing Adjustment

Unlock the secrets of organizing your design elements with Figma’s tidy up feature. Watch as Miggy effortlessly adjusts spacing between objects using the tidy up tool, ensuring a neat and visually appealing layout. Learn how to fine-tune the spacing manually or through the panel for pixel-perfect precision.

Object Rearrangement and Swap Shortcuts

Discover the power of rearranging objects within your design. Miggy demonstrates the art of swapping objects using the command key, allowing for seamless repositioning. Whether it’s moving objects up or swapping positions, learn the shortcuts that make object manipulation a breeze.

Mastering Frames

Introduction to Frames

Frames are essential containers for your designs, especially when creating interfaces for different devices. Miggy unveils the magic of creating frames using the F key or A key. Explore how frames act as containers for shapes, images, and text, creating a structured hierarchy within your designs.

Delve into the world of frame navigation. Miggy showcases how to navigate through your design hierarchy using the layers panel. Double-clicking on layers in the panel allows you to focus on specific elements, enhancing your efficiency in managing complex designs.

Sectioning Designs with Frames

Take your organization skills to the next level by creating sections with frames. Miggy introduces sections as a way to group and organize multiple frames. Discover how to add background colors to sections for clarity and use the sectioning feature to signal readiness for development.

Resizing Frames, Constraints, and Scale Tool

Understanding Constraints

Embark on a journey into the world of constraints within frames. Miggy explains how constraints guide the behavior of objects inside frames during resizing. Explore different constraint options and witness how they influence the responsive nature of your designs.

Scaling Objects with Precision

Master the art of scaling objects using the Scale Tool (shortcut: K). Miggy demonstrates various scaling techniques, from specifying a percentage increase to setting custom dimensions. Learn how constraints and the Scale Tool contribute to creating responsive and visually balanced designs.

Grids and Layouts

Implementing Grids for Precision

Enhance your design precision with grids. Follow Miggy’s guidance as he introduces layout grids for frames. Learn to set the number of columns and rows, adjust margins and gutters, and create a structured grid for aligning and organizing design elements.

Exploring Advanced Grid Techniques

Overlaying Multiple Grids

Witness the innovation in Figma as Miggy demonstrates the ability to overlay multiple grids. Dive into the world of typography buffs as he crafts a beautiful baseline grid for precise and visually appealing designs. Learn how to customize grid options, adjust colors, and create the perfect baseline grid for your layout.

Creating and Applying Grid Styles

Unlock the power of grid styles in Figma. Follow Miggy’s lead as he creates a grid style and applies it effortlessly to different frames. Discover the efficiency of making adjustments to the grid style, impacting the entire document seamlessly. Learn how to streamline your design process with this powerful feature.