Figma For Beginners: Explore ideas (1/4)

Introduction to Figma

Overview of Figma

• Figma is a vector design tool that operates in the browser, allowing users to brainstorm ideas, iterate on designs, create prototypes, and gather feedback throughout the creative process.

• This beginner's course will guide users through key stages of app design in Figma, from initial wireframes to interactive prototypes. It covers both basic and advanced features like auto layout and components.

Getting Started with Figma

• Users are encouraged to sign up for a free Figma account at figma.com. The account allows for team creation and shared workspaces for collaboration on files organized into projects.

• Students or educators can access all professional features of Figma for free by verifying their education accounts through figma.com/education.

Creating Teams and Collaborating

Team Collaboration Features

• After creating a team in Figma, members can be invited to collaborate on projects and files. Access levels can be customized for each member.

• Wireframes are introduced as simplified designs without style elements (color/type/images), used to map user flows and explore app structure before detailed design work begins.

Understanding the Canvas and Frames

Navigating the Canvas

• The canvas serves as the backdrop for designs where frames, shapes, text, and images are added. It extends approximately 65,000 points in each direction.

• Frames act as containers within the canvas; each frame represents a single screen of the design. The toolbar provides tools necessary for creating layers.

Creating Frames

• Users can select frame presets from the sidebar based on specific dimensions; Google Pixel 2 XL is chosen as an example for mobile app design.

• Techniques such as panning around using trackpad gestures or mouse scroll are discussed along with zooming options using shortcuts or view settings.

Building Wireframes with Shapes

Adding Basic Shapes

• For wireframing purposes, basic shapes like rectangles and ellipses represent more complex aspects of designs. A rectangle is created to symbolize an image post on the home page.

• Adjustments can be made to layer dimensions via the right sidebar; snapping features help align layers within frames effectively.

Creating User Elements

• An ellipse tool is used to create a user's profile picture (avatar). Holding down shift while dragging creates perfect circles.

• Dimensions can be adjusted numerically or through equations in fields; fill properties allow customization of colors or gradients while strokes provide outlines around shapes.

Aligning Layers and Adding Text

Layer Alignment Techniques

• Layers can be aligned relative to one another using alignment tools; smaller layers align with larger ones automatically during this process.

Incorporating Text Elements

How to Create a Centered Text Layer and Icons in Figma

Aligning Layers and Creating Icons

• To center align the text layer with the avatar, select multiple layers by dragging over them and use the "Align Vertical Center" option. Small adjustments can be made using arrow keys for precise positioning.

• Use the rectangle tool (press 'R') to create action icons, aiming for dimensions of 32x32 pixels. Hold down 'Shift' while drawing to maintain square proportions.

• Layers can be copied by holding down 'Alt' or 'Option' while clicking and dragging, or by pressing 'Command + D'. This maintains uniform spacing between objects.

Grouping Layers for Organization

• To keep all elements of a post together, group layers using the shortcut 'Command + G'. Groups allow collective movement without selecting each layer individually.

• Understand the difference between groups and frames: groups are collections without properties, while frames have their own dimensions that can affect contained layers.

Utilizing Components and Libraries in Figma

Building Blocks of Design

• Essential app elements like status bars and navigation menus can be created using shapes or components from libraries. Components serve as reusable design elements such as buttons or icons.

• Libraries consist of components and styles that facilitate sharing across projects. A design system combines these libraries with guidelines for consistent implementation in code.

Accessing Community Resources

• The Figma community allows users to share resources like design files and plugins. Users can duplicate useful kits, such as wireframe UI kits, into their drafts for personal use.

Publishing Components to Team Libraries

Sharing Resources Effectively

• To publish components, open the file in editor mode, move it to a team project since publishing requires team access. After moving, select "Publish Components" to share with your team.

• Enter a description when publishing your library so team members understand its purpose before accessing it through the assets panel on the left sidebar.

Implementing Responsive Design with Constraints

Adapting Layout Elements

• Add instances of components like status bars at the top and floating action buttons (FAB). Position them correctly within your frame; changes made to main components will reflect on all instances automatically.

• Set constraints for responsive design: adjust horizontal constraints for full-width status bars while keeping vertical constraints fixed at top positions. This ensures proper resizing behavior when adjusting frame sizes.

Creating Menu Frames in Your App

Structuring Navigation Elements

• Create a new frame for menu items using preset dimensions (e.g., Google Pixel 2 XL). Add text layers labeled as menu items; ensure uniform width across all text layers set at 200 pixels wide with increased font size (20).

Designing a Menu Page

Initial Setup and Copying Components

• The process begins by selecting the floating action button (FAB) using the Shift key, followed by copying it with Command + C.

• The copied components are then pasted into the menu frame using Command + V, ensuring they maintain their original position.

Exploring Design Alternatives

• After pasting, the designer contemplates various layout options for the menu page and considers setting up a design critique to gather team feedback.

• A link is shared in the team channel to invite input from team members without needing to invite them to every file.

Gathering Feedback

• The designer enables an existing library of sticky note components for collecting feedback while waiting for team members to join.

• Team members' avatars appear in the toolbar, allowing quick navigation to their locations on the canvas through observation mode.

Team Insights and Suggestions

• Feedback indicates that while simplicity is appreciated in the initial design, suggestions include adding a back button instead of using a FAB.

• Another suggestion proposes placing the menu beneath other content for better visibility; concerns about center text hindering quick scanning were also raised.

Collaborative Development

• Fellow intern Daniel creates a new version of the menu that integrates elements from all designs discussed during feedback sessions.