Figma For Beginners: Create designs (2/4)

Name: Figma For Beginners: Create designs (2/4)
Uploaded: 2020-12-01T17:00:34.000Z
Duration: 42 min 25 s

Creating High-Fidelity Designs in Figma

Introduction to High-Fidelity Design

The transition from low-fidelity wireframes to high-fidelity designs involves using tools and adjusting layer properties for enhanced appearance.

There is no singular path to a finished design; flexibility in the design process is encouraged.

Setting Up the Project

Figma allows multiple pages within a project, facilitating organization. Users can add descriptive names to each page.

Begin by creating a home page for the social media app "Petma," starting with a frame tool set to Google Pixel 2 XL dimensions.

Designing the Layout

Maintain margins between elements; use Alt/Option key for precise distance checks between objects.

Implement layout grids for consistent alignment, though this video will not focus on them extensively.

Enhancing Visual Appeal

To convey a fun brand image, round sharp corners of shapes (corner radius set to 8).

Use the ellipse tool to create user avatars and ensure proper alignment and spacing with other elements.

Adding Images and Text

Replace solid fills with images using shortcuts or toolbar options; select images as placeholders.

Add text layers for pet names, utilizing Rubik font at size 16 for playful branding. Align text layers vertically centered.

Streamlining Text Management

Duplicate text layers for descriptions and adjust widths accordingly. Consider future scalability when managing multiple text layers.

Utilize styles for reusable properties across objects, allowing bulk updates if changes are needed later.

Creating Color Styles

Styles can be applied not only to text but also colors, layouts, and effects like shadows or blurs.

Adjust color contrast for accessibility; lighter grays may strain visibility. Use plugins like Stark to check contrast levels effectively.

Finalizing Design Elements

After confirming accessible colors through contrast checks, create color styles from fill sections in Figma's sidebar.

Understanding Auto Layout in Figma

Introduction to Auto Layout

The text layer updates can misalign perfectly placed layers, highlighting the need for a layout that reflows with changes.

Auto Layout is introduced as a property for frames that allows designs to grow or shrink based on content changes, maintaining alignment and accommodating new layers.

Key Features of Auto Layout

Layers within an auto layout frame can only align in one direction (horizontal or vertical). Using the shortcut Shift + A creates a vertical auto layout frame.

To create a horizontal auto layout frame for avatar and name, select those layers and use Shift + A again. This ensures proper alignment as content changes.

Adjusting Frame Properties

The auto layout frame adjusts its size according to its contents; longer text will cause it to grow accordingly.

By renaming the new auto layout frame to "author info," users can better organize their design elements.

Managing Spacing and Resizing

Fixed width settings may lead to misalignment if descriptions exceed certain lengths. Changing this setting to "fill container" allows text to wrap appropriately.

Adding padding around items creates white space, enhancing visual appeal by giving objects room to breathe.

Creating Components for Reusability

To streamline future edits, multiple copies of posts are created by turning them into components. Descriptive naming helps maintain organization.

Components are moved to a dedicated page in the layers tab for easier access by team members.

Utilizing Instances and Overrides

Instances of components can be dragged into frames, allowing for real content addition while maintaining original component properties.

Unchecking the clip content box enables editing of post contents without hiding parts that extend beyond the frame's bounds.

Finalizing Design Elements

An auto layout frame is created for posts with adjusted spacing between items set at 8 points, ensuring consistent spacing when descriptions vary in length.

Real images or animated GIFs can be added using Figma’s place image feature; however, GIF animations won't play during editing but will show in prototype view.

Limitations of Overrides

While many aspects of an instance can be overridden (like text layer contents), some properties such as layer order cannot be changed without affecting the main component.

Enhancing Navigation Bar Design

Creating Icons and Navigation Bar in Design Software

Designing the Menu Icon

Start by creating a 32x32 frame for the icon, using Shift + 2 to zoom into the selection for precision.

Utilize the pen tool to enter vector edit mode; shapes created are part of vector networks, allowing complex designs with multiple paths.

Create the first point by clicking within the frame, hold Shift to draw horizontal lines, and adjust dimensions to ensure a width of 14.

Duplicate lines to create additional elements; round line ends via advanced stroke menu settings for improved aesthetics.

Rename the frame as "icon menu," convert it into a component, and send it to the components page.

Creating a Search Icon

Begin with another 32x32 frame; use the ellipse tool for a 16x16 circle representing the magnifying glass.

Draw the handle using the pen tool while holding Shift for angle snapping; select specific points to round only one end of the line.

Combine layers using boolean operations (union), which allows merging shapes without altering original layers.

Rename this new shape as "icon search," turn it into a component, and add it to components page.

Building a Navigation Bar Component

Create a navigation bar that spans full screen width with dimensions of 411x80 pixels.

Drag instances of previously created icons (menu and search) into position on either side of the nav bar, ensuring proper spacing from edges.

Add logo and status bar components; set constraints appropriately for responsive design adjustments.

Finalizing Home Page Layout

Introduce a floating action button (FAB), positioned at bottom right corner with specified constraints for consistent placement across screens.

Enhance FAB appearance by adding drop shadow effects through main component settings, adjusting blur for softer visuals.

Previewing Designs in Presentation View

Use presentation view to preview designs interactively; this feature is useful during usability tests or presentations.

Incorporate device frames in prototypes for realistic displays; cycle through different views if necessary using keyboard shortcuts.

Figma Features Overview

Fixed Positioning in Figma

The status bar in Figma has been relocated to a new fixed section at the top of the frame, enhancing usability during design work.

When scrolling in presentation view, both the layers panel and the status bar remain stationary, allowing for easier navigation and focus on design elements.

This feature demonstrates Figma's commitment to improving user experience by maintaining visibility of essential tools while working on designs.

The video covers numerous features, indicating a comprehensive exploration of Figma's capabilities aimed at users who may have questions or need clarification.