Figma
Figma
Embedded Files
Figma Design Courses, Tutorials and Practice
Figma Design Courses, Tutorials and Practice
Learning in a structured way from diverse sources like YouTube, downloaded course content, free tutorials, etc. and presenting the results or designs here.
▶️ Beginner 1: Explore ideas
▶️ Beginner 1: Explore ideas
Figma
Figma
YouTube ➡️ Tutorial Link
Interface overview
Account, teams, invite members
Figma Editor
Canvas, toolbar, frame tool, presets, layers, pan & zoom
Creating New Layers
Shape tool, layer hierarchy, stroke & fill, alignment & text
Placeholder Icons
Placing icons, duplicating layers, group layers, group to frame, duplicating frames
Components & Libraries
UI elements, design systems
Figma community, adding files, project, teams, publish, library
Adding components, bar, fab
Instances
Main component > instances
Setting constraints
Additional Screens
Adding new screen, copy elements
Iterations & Feedback
Frame variations, team link share, observation mode, suggestions
App Screen : Final Design ➡️
▶️ Beginner 2: Create designs
▶️ Beginner 2: Create designs
Figma
Figma
YouTube ➡️ Tutorial Link
Create Design
Add pages, measuring margins, setting up grids
Corner radius, placing images
Text Properties & Styles
Styles > objects, setting text, color, grid, & effect styles
Plugins, stark > contrast checker
Auto Layout
Alignment, fill container, padding
Create Components
Convert to component, local components in assets
Clip content
Component clipping, adding auto layout frame
Overriding instance properties
Vectors Networks & Boolean Operations
Vector edit mode
Creating menu and search icons, converting into components
Boolean operations on vectors
Creating & placing navigation bar
Fab (floating action button)
Layer settings
Scrolling & Fix Positions
Prototype settings, overflow scrolling behavior
Adjusting & editing all components as per new Android devices layout
App Screen : Final Design ➡️
▶️ Beginner 3: Build prototypes
▶️ Beginner 3: Build prototypes
Figma
Figma
YouTube ➡️ Tutorial Link
Prototyping
Prototype mode, frame connections, navigation
Hotspot, connection, destination
Create prototype Connections
Connection nodes, interactions
Interactions details, triggers
Animation
Overlay, animation, direction
Setting up separate animations for all page connections
Feedback
Share prototype link, comment tool, feedback spots
Incorporate Feedback
Comments on design frames
Adding elements to a component, back interaction
App Screen : Final Design ➡️
▶️ Beginner 4: Prepare for handoff
▶️ Beginner 4: Prepare for handoff
Figma
Figma
YouTube ➡️ Tutorial Link
Prepare for Handoff
Use cases for various job roles
Custom Thumbnails
Thumbnail design, info, & links
Inviting & Permissions
Collaborators, view/edit access
View only Editor, inspect panel
Export Assets
Export settings, size & formats, permissions
Final Interactive Prototype ➡️
Final Interactive Prototype ➡️
(On the left, or below this)
Embedded working app prototype, with few working buttons/icons, pages, & scrolling feed
Figma ➡️ Project Link
Figma ➡️ Prototype Link
Work In Plan
Work In Plan
How To Design Ads & Banners For Successful Marketing Campaigns in Figma (Pending)
How To Design Ads & Banners For Successful Marketing Campaigns in Figma (Pending)
Mavi Design
Mavi Design
YouTube ➡️ Tutorial Link
P
A
Ad Copy Details:
Brand name : Fresh Sphere
Product Line : Fruit Fusion
Product : Mix Fruit Bar
---
1. Visual Representation
- Photo: A vibrant image of the mix fruit bar with visible chunks of fruits (e.g., strawberries, mangoes, blueberries) to highlight freshness.
- Illustration/Icon: A playful fruit icon (e.g., a sphere made of various fruits) to represent the product line.
- 3D Model: A realistic model of the fruit bar packaging showcasing its texture and design.
- Abstract Element: Colorful splashes or gradients resembling fruit juices for a dynamic background.
---
2. Headline/Title
"Fresh Sphere's Fruit Fusion Mix Fruit Bar – A Burst of Nature’s Goodness!"
---
3. Description
"Packed with real fruit chunks and natural flavors, Fresh Sphere’s Mix Fruit Bar is the perfect snack for your busy day. Made with no artificial additives, it’s a healthy and delicious way to fuel your energy while enjoying the goodness of nature."
---
4. USP (Unique Selling Points)
- Made with 100% real fruits.
- No artificial flavors or preservatives.
- Convenient on-the-go snack.
- Rich in vitamins and antioxidants.
- Suitable for all ages.
---
5. CTA (Call to Action)
"Try Fresh Sphere’s Fruit Fusion Mix Fruit Bar Today! Visit www.freshsphere.com or find it in stores near you."
---
6. Brand Details
- Logo: A clean and modern logo featuring a colorful sphere made of overlapping fruit illustrations.
- Website: www.freshsphere.com
- Colors: Vibrant shades like:
- Orange (#FFA500) – Represents energy and freshness.
- Green (#98FF98) – Suggests health and nature.
- Red (#FF6347) – Evokes excitement and appetite.
---
Ad Design Guidelines (as per the image):
1. Aesthetically Pleasing: Use vibrant colors, clean typography, and high-quality visuals.
2. Clear & Understandable: Ensure the headline is bold and readable; avoid cluttering the design.
3. Honest: Highlight real fruit ingredients without exaggerating claims.
4. Highlight Positives: Focus on health benefits (vitamins, antioxidants) without misleading users.
5. Avoid Fearmongering: Promote positivity (e.g., "fuel your energy") rather than negative comparisons.
Page updated
Google Sites
Report abuse