Summary
Highlights
Kevin introduces Figma as a free and collaborative design tool for creating app and website interfaces. He outlines the key topics to be covered, including getting Figma, starting a project, and various design functionalities.
Kevin guides viewers through creating an account on Figma, including setting your name, work type and collaboration preferences. He clarifies the options between the free 'Starter' plan and the paid 'Professional' plan and the difference between using Figma which is the design and prototyping tool and FigJam which is a online whiteboarding tool.
The tutorial explores the Figma file browser, explaining drafts for personal files, teams for collaboration, and adding files to favorites. He goes over how to invite people to your team.
Kevin shows how to create a project, rename it, and create a new design file within the project. He introduces the Figma Editor interface, including the toolbar and left/right panes.
The video covers inserting frames (artboards) for UI elements, using shortcut keys (F), adjusting frame dimensions, and using pre-defined sizes for different device types (e.g., iPhone Pro Max). Also it goes over how to duplicate them with Ctrl+C and Ctrl+V or Ctrl+D.
Kevin explains how to move around the canvas using the hand tool (H), middle mouse button, spacebar, or trackpad. He also details zooming in/out, fitting content to the screen (Shift+1), renaming layers (frames), and adding/managing pages for different device types (e.g., phone, tablet).
The tutorial starts building the home screen, focusing on setting a background image, adjusting its properties (fill, fit, crop), adding a darkened overlay using a rectangle with adjusted opacity and a background blur effect.
Kevin places the Kevin Cookie Company logo on the home screen, maintaining proportions with the shift key. He adjusts the layer order to ensure the logo is visible above the background effects. He shows how to show the distance between a design element and the edge of the frame (Alt key).
The video demonstrates how to use the text tool (T) to add a tagline, format the text (size, fill, alignment), and add a drop shadow effect. It also shows how to align items.
Kevin creates a navigation bar at the bottom of the app using frames and rectangles. He duplicates rectangles to create containers for the navigation icons. This part also shows you how to evenly distribute objects horizontally.
Kevin designs a location pin icon using the ellipse tool, demonstrates editing shapes by double clicking and editing points, and punches a hole in the shape using another ellipse and the 'subtract' function. HE also shows how to swap the fill and the outline.
The video continues with designing a home icon using the pen tool. Kevin explains how to use the tool to draw different shape, move and scale it. He shows how to round the edges of vectors.
Kevin demonstrates how to explore and use the Figma community to find pre-designed assets, specifically an e-commerce shopping cart icon from the Iconamoon template. The instructions include navigating the Figma community, opening assets in Figma, copying elements, and pasting them into the project.
Kevin goes over how to create components to re-use nav bars across multiple screens. He then edits the component color on the home screen, and it carries over to the locations navigation bar.
The video show how to use constraints to make UI look good on multiple device screen sizes.
The video constructs the location screen by adding a title, location cards with name, address, placeholder images, and applies components as re-usable location cards. It shows how to duplicate a card and space the cards evenly.
Kevin shows a neat trick to add multiple images at once and how to create an ellipse mask.
Kevin applies shared text styles to two different screens.
The video add a button to the home screen, demonstrating how to use auto layout to make a background shape automatically resize using the content size.
The video demonstrates how to turn the app to a prototype and how the different screens should connect.
The video outlines different methods for sharing designs and prototypes with teams, including inviting collaborators, adding comments , exporting designs and exporting designs to PDF.