Design a Scalable Mobile App With Figma Variants
By freeCodeCamp.org
Published: Apr 07, 2022“
Learn how to use Figma Variants to design a scalable mobile app. Variants can streamline your frontend design process by allowing you to group and organize similar components into a single container.
Ahmet Efeoglu developed this course. Check out his channel: https://www.youtube.com/channel…
Tutorial file link: https://www.figma.com/file/FrLR3t9jZ9…
Homework file link: https://www.figma.com/file/8js2feuv6L…MCONTENTS:
- (0:00:18) Intro
- (0:02:13) Accessing Tutorial and Homework Files
- (0:04:24) Project Overview
- (0:05:27) Recommending Personal and freeCodeCamp Channel
- (0:06:25) Basics Overview
- (0:08:22) Learning The Frame Functionality
- (0:10:25) Learning The Autolayout Functionality
- (0:14:39) Learning The Component Functionality
- (0:18:55) Learning The Variant Functionality
- (0:21:42) Creating The Type System
- (0:28:41) Creating The Color Palette/System
- (0:35:54) Creating The Icon Set
- (0:41:34) Creating Input Variants
- (0:52:23) Creating Large Button Variant
- (1:00:47) Designing Sign Up and Login Screen
- (1:18:46) Creating Status Bar Variant
- (1:23:14) Creating The Filter Variant
- (1:27:40) Creating Bottom Navigation Variant
- (1:35:02) Creating Image Card Variant
- (1:49:27) Updating Input Variant
- (1:57:31) Designing The Discover Screens
- (2:15:20) Creating Large Avatar Variant
- (2:24:05) Creating Small Button Variant
- (2:32:45) Creating The Benefit Card Variant
- (2:46:45) Designing Details Screen
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news”
Tag: Figma
[#Script #Coding] Create a Design System with Figma – Full Course
Create a Design System with Figma – Full Course
By freeCodeCamp.org
Published: Jun 28, 2021“
Learn how to build a design system in Figma. By the end of this course, you will become a master of building design systems in Figma and understanding master components.
Course developed by Tim Sullivan. Check out his channel: https://www.youtube.com/channel…
Course Contents
- (0:00:00) Introduction
- (0:03:03) Creating a Color System
- (0:22:23) Building a Type System in Figma
- (0:35:16) Elevation
- (0:57:33) Product & System Icons
- (1:11:26) Text Legibility
- (1:30:58) States
- (1:50:53) Selection (Interaction)
- (1:55:02) Understanding Layout
- (2:04:15) Pixel Density
- (2:12:05) Spacing Methods
- (2:24:19) Responsive Grid Layout
- (2:48:59) App Bar – Bottom
- (3:07:55) App Bar – Top
- (3:22:37) Backdrop
- (3:41:58) Banners
- (4:06:45) Bottom Navigation
- (4:19:15) Buttons – Floating Action Button
- (4:38:54) Buttons
- (5:06:04) Cards
- (5:41:10) Chips
- (5:58:15) Dialogs
- (6:28:56) Date Pickers
- (7:32:22) Dividers
”
[#Script #Coding] Great Design With User Research – Design a Mobile App Using Figma
Great Design With User Research – Design a Mobile App Using Figma
By freeCodeCamp.org
Published: Feb 02, 2022“
Improve your UI / UX design skills by designing a real-world app using Figma. You will learn how to use the d.school design thinking process and self-process management to come up with design solutions.
Course created by Dev and Design. Check out his channel: https://www.youtube.com/channel…
Course Contents
- (0:00:00) Introduction
- (0:04:53) Outline Breakdown
- (0:07:01) Workflow Breakdown In FigJam
- (0:22:50) User Empathy ( Empathize )
- (0:23:21) Creating User Experience Survey With Google Forms
- (0:38:21) Creating User Personas
- (0:43:08) Creating Problem Statement
- (0:44:31) Ideate
- (0:47:49) Prototype Analysis
- (0:48:16) User Goals & User Tasks
- (0:50:11) Information Architecture
- (0:55:38) Low Fidelity Prototyping
- (1:19:59) High Fidelity Prototyping
- (1:20:11) Creating Style Library
- (1:37:21) Creating Component Library
- (3:32:11) Prototype Presentation & Assignments
”
[#Script #Coding] Figma Tutorial for UI Design – Course for Beginners
Figma Tutorial for UI Design – Course for Beginners
By freeCodeCamp.org
Published: Jan 05, 2022“
In this Figma course, you will learn how to use Figma for UI Design. Figma is a vector graphics editor and prototyping tool.
Joseph Brendan developed this course. Check out his YouTube channel: https://www.youtube.com/channel/UCETwb_AzizmhID0RjKULnBA
Course Contents
- (0:00:00) Introduction
- (0:00:55) Creating A Figma Account
- (0:02:32) Creating & Naming A Figma Design File
- (0:04:47) Creating Shapes In Figma
- (0:07:16) Selection In Figma
- (0:12:02) Editing Shapes In Figma
- (0:36:14) Introduction To Typography In Figma
- (1:01:41) Design Tree In Figma
- (1:06:43) First Design Task
- (1:20:44) Colors In Figma
- (1:44:22) Drawing Tools In Figma
- (1:49:20) Margin And Padding In UI UX Design
- (1:56:08) Figma AutoLayout
- (2:13:48) Formatting Principles In Figma
- (2:34:32) Figma Constraints And Resizing
- (2:51:11) Website Design in Figma
- (2:55:52) Jakob’s Principle Of Design
- (3:00:25) Introduction to Styles and components
- (3:25:29) Figma Component Variants
- (3:36:18) Layout Design & Configuration For Websites in Figma
- (3:40:07) Layout Grids In Figma
- (4:01:22) Introduction To Responsive Design
- (4:07:32) Material Design Guide
- (6:26:24) Introduction To Tailwind UI
- (6:28:24) Tailwind UI Design Project
- (7:25:45) Responsive Landing Page Design Project
- (8:45:54) Designing Mobile Apps
- (8:56:47) Iconography In Figma
- (9:02:32) Boolean Groups
- (9:09:52) Figma Tokens
- (9:18:29) Animation In Figma With Figmotion
- (9:36:29) Mobile Design Project
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] STEP BY STEP Create LAYERS for your 10,000 NFT Collection for FREE – Make NFTs in Photoshop or Figma
STEP BY STEP Create LAYERS for your 10,000 NFT Collection for FREE – Make NFTs in Photoshop or Figma
By codeSTACKr
Published: Jan 16, 2022“
Check out the collection I made:
- https://codecats.xyz
I’ve gotten a ton of requests to show you how to create layers for your NFT collections. So, in this video, I’m going to show you how to do this using either Adobe Photoshop or Figma.
How To Create An ENTIRE NFT Collection (10,000+) & MINT In Under 1 Hour for FREE: https://ericbrooks.com/whuzzup…
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
