Introduction to Figma Mobile Application and Website Design Training Set
#figmamobileapp #figmailwebdesign #figmaeeducation
Designing mobile apps and websites with Figma is a very popular method because Figma is a cloud-based design tool with a user-friendly interface that allows multiple people to work simultaneously. Here are the basic steps for designing mobile apps and websites with Figma:
BE SURE TO CHECK OUT OUR CHANNEL PLAYLISTS FOR ALL OUR TRAINING SETTINGS!
1. Getting Started with Figma
To start using Figma:
Go to the Figma website and create an account (a free version is also available).
Once you're logged in, you can create a new project.
2. Mobile App Design Steps
Mobile app design often requires designing for smaller screen sizes and touch interaction. The steps in Figma are as follows:
a. Create a New Frame
Choose a suitable frame for your mobile app design. Figma includes popular mobile screen sizes (e.g., iPhone, Android). Select the "Frame" tool in the right panel and create a frame appropriate for the mobile device size.
Frame dimensions are typically as follows:
iPhone: 375x812 px
Android: 360x640 px
b. Interface Design
Start Screen: Design your app's home screen. This screen typically contains buttons and graphics that lead to the app's main functions.
Navigation: Mobile apps typically use a bottom navigation menu (tab bar) or a top navigation bar (header). Add these elements to the frame.
Color and Typography: Create color palettes in Figma and choose your typography. Insert text appropriate for your design using different font styles and sizes.
Buttons and Interactions: Add buttons and use prototyping features to make them interactive.
c. Prototyping
Figma allows you to make your design interactive. With Prototype mode, you can add transition animations and click interactions to your design:
Select the Prototype tab and configure transitions between screens.
Clickable Elements: You can make buttons and menus clickable.
3. Website Design Steps
Web design is slightly different from mobile design because it's typically done on larger screens and involves mouse interaction. You can follow these steps for website design in Figma:
a. Create a New Frame
Choose a larger screen size for the website. For example, for a desktop website, you might choose 1440x1024 px.
b. Using a Grid System
Grid systems are often used in web design. Figma offers a 12-column grid system. You can align your design according to this grid.
To enable the grid system, select your frame and enable the "Layout Grid" option in the right panel.
c. Interface Design
Home: Design your website's home page. Place the title, menu, main images, and content blocks.
Navigation Menu: Your website typically has a fixed navigation menu at the top. Pay attention to the buttons, links, and submenus within the menu.
Images and Icons: Figma allows you to add vector-based icons and images. These elements enhance the user experience (UX).
d. Mobile Compatibility (Responsive Design)
During web design, consider how your design will appear on mobile devices. In Figma, you can use "Frames" to adjust for different screen sizes:
Responsive Design: Optimize your design for different screen sizes. In Figma, you can simulate screen sizes to make these adjustments.
e. Prototyping
You can also make your website design interactive. For example, when a user clicks a menu, they can be redirected to another page.
Add click-through interactions in the Prototype tab.
4. Design Sharing and Collaboration
Figma allows for collaborative design development:
By sharing a design with other team members, you can get comments and incorporate their feedback.
By sharing the design file, you can also allow developers to review the design.
5. Using Figma Plugins and Resources
Figma offers a wide range of plugins and resources:
Unsplash: Can be used to add free stock images.
Iconify: Can be used to add vector-based icons.
Figmotion: Can be used to add animations.
Suggestions:
Consider multiple states for each screen of the design (e.g., "Empty State," "Loading," "Successful").
Use Figma's "Auto Layout" feature to automatically rearrange elements.
Figma is a powerful tool for creating and collaborating on design from start to finish. You can create and develop your mobile app and web design step by step in Figma.