320+ tutorials
Complete guides with source files
Find the best tips and tricks in bite-size tutorials about SwiftUI, React and Figma.
SwiftUI Handbook
A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques
121 free tutorials
Videos, PDF, files
PRO
121 TUTORIALS
1
Visual Editor in Xcode
Design your layout using the inspector, insert menu and modifiers
5:42
2
Stacks and Spacer
Learn how to use HStack, VStack, ZStack with spacing and alignment
6:26
3
Import Images to Assets Catalog
How to import images from Figma to Xcode using PDF, PNG and JPG
5:16
4
Shapes and Stroke
How to use shapes like circle, ellipse, capsule, rectangle and rounded rectangle
6:26
5
SF Symbols
How to use system icons for Apple platforms with different size, scale and multicolor
4:23
6
Color and Image Literals
Use the color picker and images list to set your colors and images directly in the code
4:28
7
Sidebar
Learn how to create a Sidebar navigation for iOS, iPadOS and macOS
6:19
8
Toolbar
Use the Toolbar modifier to place multiple items in the navigation bar or bottom bar
4:04
9
Image View
How to work with the Image View and its resizable, aspectRatio, scaleToFit and resizingMode options
3:16
10
Safe Area Layout
How to ignore the Safe Area edges in a typical layout with a background
3:17
11
Text View
A deep dive into how to use the Text View and its modifiers such as font, color, alignment, line spacing and multiple lines
6:31
12
Custom Fonts
How to set a custom font in iOS using info.plist and the font modifier
3:29
13
Max Width and Frame Alignment
An alternative to stacks and spacer is to use frame max width and alignment to avoid the pyramid of doom
3:17
14
Shadows and Color Opacity
The most flexible way to add shadows to your UI in SwiftUI
5:05
15
Mask and Transparency
How to use mask to clip the content with opacity and gradient
4:04
16
Clip Shape and Smooth Corners
How to create a continuous corner radius, also known as super ellipse
2:27
17
Tab View Pagination
Create a simple user onboarding layout using Tab View with the PageTabViewStyle
2:18
18
Animation States
How to set up a simple animation using states, toggle, withAnimation and onTapGesture
4:51
19
View Transitions and Animations
Animate your screens using the transition modifier and preset animations
3:23
20
Animation Modifier and Timing
How to apply a different animation timing on separate elements using the animation modifier
6:05
21
Transform Animations
How to animate a card using offset, scaleEffect, rotationEffect and rotation3DEffect
5:00
22
Tap Animation with Delay
Expand and contract a button using the tap gesture with delay
3:34
23
Long Press Gesture
Detect the long press duration to expand a button and bounce back
4:19
24
Drag Gesture
Learn how to create a draggable card using DragGesture, onChange, onEnded events and the offset modifier
3:56
25
Matched Geometry Effect
Create a custom transition between views using the matchedGeometryEffect modifier, namespace and id
7:45
26
Advanced Matched Geometry Effect
Recreate the Music app transition using matched geometry effect and learn how to pass Namespace to another view
6:46
27
Swift Package Manager
How to install SwiftUI packages using the Swift Package Manager
4:02
28
Background Blur
How to apply a frosted glass sheet in your user interface using Apple's sample code
3:45
29
Lottie Animation
How to add animated assets using Lottie in SwiftUI
8:34
30
Lazy Grid Layout
Learn how to build an adaptive or fixed grid layout that expands vertically or horizontally
7:41
31
Lazy Stacks
Get better scroll performance by using LazyHStack and LazyVStack instead of HStack and VStack
3:50
32
Navigation View
Create a native navigation for your app using the nav bar, large title and swipe gesture
4:07
33
Link
Learn how to open a URL in the Safari browser and how to customize your Link
3:01
34
Color Picker
How to set and customize the native color picker in SwiftUI
4:21
35
Date Picker
How to let users pick a date and time using a dropdown wheel or a calendar style
3:15
36
Hover Effects
How to design for iPadOS pointer using hoverEffect and onHover
5:49
37
Components
How to create reusable components by using the Extract Subview option in SwiftUI
4:12
38
Binding
How to synchronize states across multiple views and set the constant for your preview
3:28
39
Static Data
Work with static data in SwiftUI.
4:09
40
Full Screen Modal
How to present a full screen modal without the sheets UI
3:14
41
Hide Status Bar
How to hide your app's status bar with or without animation
1:19
42
Redacted Placeholder
Create a placeholder UI while loading using the redacted modifier
3:24
43
Horizontal Scroll with rotate3DEffect
How to apply a beautiful 3D transform while scrolling in SwiftUI
6:41
44
Animation Repeat, Delay and Speed
How to loop and delay your animation using repeat, repeatForever, speed and delay
4:49
45
Tab Selection from Child View
How to programmatically link to another tab from any child view in SwiftUI
4:01
46
Status Bar Size with GeometryReader
Using SafeAreaInsets, you can get the height of the status bar, tab bar dynamically
3:31
47
Modal Presentation
Use the .sheet modifier to show a modal
2:18
48
Remote Images
Load images from the Internet in your SwiftUI application with SDWebImage
3:15
49
Dismiss custom modal
Create an "OnTapOutside" listener on dismiss a custom modal
3:18
50
Iterating Over an Array
Use ForEach to loop through an array in a View and in a function
2:42
51
Switch Statement
Learn how to use switch statements in Swift
2:25
52
Format Date
Transform how dates are displayed in your application by using a Date Extension and DateFormatter
4:53
53
UserDefaults
Cache your user's data with UserDefaults
2:59
54
Hide Keyboard
Use a View extension to dismiss the keyboard when the user taps outside of the keyboard area
2:22
55
Play Video with AVPlayer
Add a video or an audio player to your SwiftUI application by using AVPlayer and AVKit
3:13
56
Controls with AVPlayer
Play, pause, change the video speed, get the current time or the duration, and add subtitles to a video, all using AVPlayer
5:12
57
OnScroll listener
Use SwiftUITrackableScrollView to add a listener when the user scrolls
3:31
58
Link from a Text
Open a web page in Safari when the user clicks on a link in your SwiftUI application
3:06
59
Share Sheet
Call Apple's share sheet when the user clicks on a button
2:30
60
Strings in Swift
Learn the basics of Strings in Swift and how to manipulate them
3:51
61
Xcode Playground
Use Xcode Playground to test your Swift functions and save time
2:06
62
AppStorage
Use the newly introduced AppStorage to add to UserDefaults
2:29
63
Action sheet
Show an action sheet with multiple options for the user to choose from
3:21
64
TabBar scroll to top
Programmatically scroll to top when the user taps more than once on the the tab bar
6:57
65
TabBar to root View
Learn how to programmatically go back to the root View when the user taps on the tab item twice
6:16
66
Status bar background on scroll
Learn how to add a background color on the status bar while the user is scrolling
3:39
67
Create a Widget
Add widget to your existing SwiftUI project with custom data
1:38
68
ContainerRelativeShape
Adding an adaptive radius to a widget
2:54
69
WidgetFamily sizes
Adding support for various family sizes in a widget
3:06
70
SwiftUI Picker
Create a wheel picker using SwiftUI's built-in Picker, to allow the user to select from multiple choices
4:17
71
Conditional modifier
Learn different ways to add a conditional modifier to your SwiftUI view
4:26
72
Load Safari Inside App
Load Safari as a fullScreenCover inside of your application
3:54
73
Markdown with AttributedString
Use AttributedString to generate formatted text from markdown
2:55
74
AttributeContainer
Style AttributedStrings with AttributeContainer
2:59
75
AsyncImage
Load remote images using AsyncImage
2:44
76
Format Date with Formatted
Use SwiftUI 3.0's .formatted() function to format a date
2:30
77
List Row Separators
Customize list row separators
3:00
78
Swipe actions
Easily add swipe actions to a row in a list
4:35
79
Searchable
Effortlessly search through a list
4:06
80
Light and Dark Modes
Automatically adapt to light and dark mode
2:35
81
Canvas
Create efficient and powerful 2D drawings
8:37
82
Animations with TimelineView
Synchronize animations with timed events
10:50
83
SecureField
Create a text field with hidden text that is perfect for password fields
0:27
84
Background Animation with Gradient
Play with unit points, gradients, masking, blurs and a timer to create a beautiful gradient animation
2:21
85
Inner Shadow
Apply multiple inner shadows on a Text, SF Symbol or Shape in iOS 16
1:55
86
SF Font Width Styles
Implement SF Font Compressed, Condensed and Expanded width styles using a font extension
0:42
87
Multiple Blending Modes
Combine Difference, Hue and Overlay blend modes to create a text that has great contrast on both light and dark backgrounds
1:01
88
Circular Text on Path
Create a text that follows a circle path by using GeometryReader, PreferenceKey and calculating the angles
2:55
89
View That Fits
Use ViewThatFits to make your layout adaptive without using GeometryReader or conditions
0:36
90
Navigation Stack
Create a navigation stack list with data and multiple destinations
5:04
91
Half Sheet
Present a bottom sheet UI natively and control the sizes and drag zones
2:11
92
Charts
SwiftUI 4 makes creating charts with the Chart view easy and efficient, providing vivid visuals for data without 3rd-party libs
1:41
93
Grid Layout
Grid Layout provides developers with the power to design custom layouts, tables and grids, with control over element size and positioning
9:08
94
SVG to SwiftUI
Learn how to turn Figma shapes into SwiftUI code and create beautiful card designs with linear gradients and grid layouts
8:09
95
Detect Screen Size
Use UIScreen.main.bounds, GeometryReader, and PreferenceKey to detect and track screen sizes with SwiftUI
1:30
96
Custom Layout
Make your own designs with the CustomLayout protocol and change the point values by using affine transformations
8:41
97
Radial Layout
Create a custom radial layout by calculating the center point and radius of a view
7:19
98
AnyLayout Transition
Transition between different layouts and animate them with AnyLayout while keeping the same structure and content
3:30
99
Core Location in SwiftUI
Learn how Core Location Manager shows where a device is and its direction. Our guide helps you use it easily for compass directions.
100
Radial Gradient Button Animation
Create a custom button with radial gradients and a glow animation
3:14
101
SF Symbols 5 Animations
Dive into SF Symbols 5: Master animated icons for a dynamic, engaging app experience
102
Phase Animator in SwiftUI
Create multi-stage Animations with ease
2:45
103
Keyframe Animator in SwiftUI
Learn how to leverage SwiftUI's keyframe animator to bring your app to life with captivating animations
4:08
104
Specific Corner Radius
Learn how to create precise and unique corner radius using various techniques in SwiftUI
105
Metal Shaders in SwiftUI
Create stunning visual effects with Metal and SwiftUI
106
Observable Models
Simplify app development and eliminate boilerplate code with observable view models in SwiftUI
107
SwiftData Persistence
Learn SwiftData fundamentals - define models, set up persistence, fetch, query, and modify data with code examples
108
Embed 3D Assets from Spline
Learn how to embed 3D assets from Spline into your SwiftUI app
4:25
109
Embed Animated Assets from Rive
Learn to import animated assets from Rive as we incorporate an animated button and a background animation featuring shapes and blur effect
3:33
110
Gradient Text
Learn how to add gradient text with the foregroundStyle modifier
1:17
111
Expanding View
Learn to add an animation to an expanding view that, upon being clicked, will open up by rotating and revealing four additional views
9:40
112
Mesh Gradient in SwiftUI
How to create and animate mesh gradients using SwiftUI
4:45
113
Parallax ScrollView
Learn how to transform a basic ScrollView by adding a stunning parallax effect2
6:17
114
Navigation Transition in SwiftUI
Animate view transitions using Navigation Transition. Simpler version of Matched Geometry Effect.
5:32
115
Text Transition with Text Renderer in SwiftUI
Text and blur transitions using the new Text Renderer API in SwiftUI
7:18
116
Font Weight Animation in SwiftUI
Animate the font weight between two states across multiple lines
3:29
117
Ripple Visual Effect Interaction with Metal Shader
Create a stunning ripple visual effect for a simple card interaction using Metal Shaders and SwiftUI
3:30
118
Custom View Modifier in SwiftUI
Reuse view configurations, such as drop shadows, background styles, and overlays
2:39
119
Progressive Blur in SwiftUI
Using a component applied to a background modifier, we'll dynamically adjust the blur radius and position of the gradual blur
4:29
120
Numeric Text Animation using ContentTransition
Create smooth animations for changing numeric values using SwiftUI's contentTransition modifier
121
Image Gallery, HueRotation and Swipe Gesture
Learn to build an interactive image gallery in SwiftUI with smooth transitions, gesture controls, and dynamic animations
24:45
SwiftUI Advanced Handbook
An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level
39 free tutorials
Videos, PDF, files
PRO
39 TUTORIALS
1
Firebase Auth
How to install Firebase authentification to your Xcode project
8:18
2
Read from Firestore
Install Cloud Firestore in your application to fetch and read data from a collection
8:01
3
Write to Firestore
Save the data users input in your application in a Firestore collection
5:35
4
Join an Array of Strings
Turn your array into a serialized String
3:33
5
Data from JSON
Load data from a JSON file into your SwiftUI application
5:08
6
HTTP Request
Create an HTTP Get Request to fetch data from an API
6:31
7
WKWebView
Integrate an HTML page into your SwiftUI application using WKWebView and by converting Markdown into HTML
5:25
8
Code Highlighting in a WebView
Use Highlight.js to convert your code blocks into beautiful highlighted code in a WebView
5:11
9
Test for Production in the Simulator
Build your app on Release scheme to test for production
1:43
10
Debug Performance in a WebView
Enable Safari's WebInspector to debug the performance of a WebView in your application
1:57
11
Debug a Crash Log
Learn how to debug a crash log from App Store Connect in Xcode
2:22
12
Simulate a Bad Network
Test your SwiftUI application by simulating a bad network connection with Network Link Conditionner
2:11
13
Archive a Build in Xcode
Archive a build for beta testing or to release in the App Store
1:28
14
Apollo GraphQL Part I
Install Apollo GraphQL in your project to fetch data from an API
6:21
15
Apollo GraphQL Part 2
Make a network call to fetch your data and process it into your own data type
6:43
16
Apollo GraphQL Part 3
Display the data fetched with Apollo GraphQL in your View
5:08
17
Configuration Files in Xcode
Create configuration files and add variables depending on the environment - development or production
4:35
18
App Review
Request an app review from your user for the AppStore
5:43
19
ImagePicker
Create an ImagePicker to choose a photo from the library or take a photo from the camera
5:06
20
Compress a UIImage
Compress a UIImage by converting it to JPEG, reducing its size and quality
3:32
21
Firebase Storage
Upload, delete and list files in Firebase Storage
11:11
22
Search Feature
Implement a search feature to filter through your content in your SwiftUI application
9:13
23
Push Notifications Part 1
Set up Firebase Cloud Messaging as a provider server to send push notifications to your users
5:59
24
Push Notifications Part 2
Create an AppDelegate to ask permission to send push notifications using Apple Push Notifications service and Firebase Cloud Messaging
6:30
25
Push Notifications Part 3
Tie everything together and test your push notifications feature in production
6:13
26
Network Connection
Verify the network connection of your user to perform tasks depending on their network's reachability
6:49
27
Download Files Locally Part 1
Download videos and files locally so users can watch them offline
6:05
28
Download Files Locally Part 2
Learn how to use the DownloadManager class in your views for offline video viewing
6:02
29
Offline Data with Realm
Save your SwiftUI data into a Realm so users can access them offline
10:20
30
HTTP Request with Async Await
Create an HTTP get request function using async await
6:11
31
Xcode Cloud
Automate workflows with Xcode Cloud
9:23
32
SceneStorage and TabView
Use @SceneStorage with TabView for better user experience on iPad
3:52
33
Network Connection Observer
Observe the network connection state using NWPathMonitor
4:37
34
Apollo GraphQL Caching
Cache data for offline availability with Apollo GraphQL
9:42
35
Create a model from an API response
Learn how to create a SwiftUI model out of the response body of an API
5:37
36
Multiple type variables in Swift
Make your models conform to the same protocol to create multiple type variables
4:23
37
Parsing Data with SwiftyJSON
Make API calls and easily parse data with this JSON package
9:36
38
ShazamKit
Build a simple Shazam clone and perform music recognition
12:38
39
Firebase Remote Config
Deliver changes to your app on the fly remotely
9:05
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
102 free tutorials
Videos, PDF, files
PRO
102 TUTORIALS
1
The Figma Design Tool
Getting started with Figma as your design tool
0:54
2
The Editor in Figma
Getting familiar with the Figma interface
1:17
3
Basic Tools
Getting to know the tool panel in Figma
2:14
4
Position, Size, Rotation, & Corner Radius properties
Working with Position, Size, Rotation, & Corner Radius properties
1:27
5
Color Styles
Working with color styles on Figma
1:13
6
Masks
Using masks to clip content and compose your design in Figma
1:47
7
Dark Mode with Selection Colors
Learn to design and adapt for designs for Dark Mode with Selection Colors
1:17
8
Gradients
We'll walk through all the different ways to use gradients in your work, as well as techniques when creating them
1:36
9
Creating Backgrounds
Design backgrounds in Figma
2:37
10
Blending Modes
Learn to interesting techniques with Blending Modes
2:02
11
Alignment, Distribution, & Tidy up Properties
Exploring Alignment and Tidy up in Figma
1:24
12
Union and Corner Radius
Working on union and corner radius
2:53
13
Shadow and Blur Effects
Exploring ways to incorporate shadows and blur to your design
1:48
14
Using Images
Steps on how to use images in Figma
2:00
15
Fill, Stroke, & Advanced Stroke
Get to know more about the Fill and various Stroke options in Figma
3:21
16
Text Properties and Styles
Explore and learn about Figma's type properties
1:37
17
Google Fonts and Custom Fonts
Explore the differences between Google Fonts and custom fonts for your website
1:13
18
Accessibility
Exploring a11y in design
19
Responsive Design
Designing responsive layouts in Figma using Constraints and Auto Layout
3:07
20
Constraints
Working with Constraints in Figma
1:11
21
Layout Grid
Learn to design using grids, columns, rows and margins.
2:00
22
Auto Layout in Figma
Working with Auto Layout for responsive design
8:17
23
Vector Mode
Exploring vector mode to edit and customize vector shapes
0:55
24
Vector Network
Learn to use vector networks and design icons
1:19
25
Perspective Mockups
Use realistic mockups to present your designs
2:00
26
3D Mockups
Adding 3D mockups to design
1:20
27
Using Illustrations in Design
Incorporate illustrations into your design
2:03
28
Booleans
Using booleans to design icons
2:24
29
Icon Design
Learn how to design icons using the tools provided by Figma
1:48
30
Components
Make your design more reusable by using components.
1:50
31
Team Library
Publishing your design styles and components
2:14
32
Creating Confetti
Working with Confetti plugin
1:59
33
Looper Shape Duplication
Working with Looper Figma plugin
1:41
34
Apple Watch Ring
Creating apple watch ring in Figma
2:23
35
Exporting Assets in Figma
Learn about exporting assets in Figma for implementation
1:39
36
Exporting CSS Code
Working with CSS code on Figma
1:04
37
Designing with Data
Plugins to help you design with real content
1:57
38
Prototyping
Quickly create an entire flow for your app design in Figma
2:25
39
Version History
Working with version history on Figma
1:25
40
Multiplayer, Commenting, & Previews
Learn about collaboration & sharing with Figma
1:36
41
Variants
Combining similar components into variants
5:39
42
Interactive Components
Creating reusable interactions using interactive components
5:40
43
UIKits
Designing using UIKits in Figma
4:47
44
Plugins
Exploring and Designing using Plugins in Figma
5:47
45
Blob Background
Create a simple blob background in Figma
4:45
46
Wave Background
Create a wave design in Figma using the Bend tool and the Wave plugin
6:46
47
3D Shapes
Create 3D-looking shapes using vector tools in Figma
12:27
48
Parallax Prototyping in Figma
Learn how to create a parallax scrolling animation technique where the background and the foreground layers move at different speed
7:52
49
3D UI Perspective Design
Transforming your user interface with the power of three-dimensional perspective
7:16
50
Glass Icon
Learn how to design a creative icon using background blur
9:16
51
Crystal Ball with Water Effect Animation
Animate waves in a crystal ball using the prototyping tool
12:54
52
Design and code a line animation with letters
Learn how to animate lines using CSS in CodeSandbox
29:38
53
Futuristic line animation
Learn how to create a futuristic background with lines using the pen tool in Figma
19:30
54
Import from Adobe Illustrator to Figma
Best practices for importing an Illustrator file to Figma
3:16
55
Create an Illustration in Figma
Use the vector tool in Figma to create an illustration from scratch
4:07
56
Remove BG plugin
Remove an image background with the RemoveBG plugin in Figma
2:27
57
Circular Lines Advanced Stroke
Design a camera controller with clock lines in Figma
3:27
58
Publish Design to Community
Publishing design files in the Figma Community
4:49
59
Turn Image into Vector
Convert an image into vector in Figma
3:11
60
Prototype with Scrolling Content
Add vertical and horizontal scrolling on your Figma Prototype
3:42
61
Hug Content and Resizing
Learn how to choose the right resizing options including hug content, fixed width or height, fill container and text truncation
2:04
62
Advanced Auto Layout
Learn how to use spacing mode, canvas stacking, text baseline alignment, stroke values in advanced layout
4:13
63
Circular Text on Path
Make a circular text on path using ARC plugin in Figma
5:57
64
Mirror Prototype
View your prototypes on your mobile device using the Figma mobile app
2:39
65
Sticky Nav and Tab Bar Prototyping
How to fix the position with sticky Nav Bar and Tab Bar
4:37
66
Video in Figma Prototype
Apply a video as a fill using any vector network on your prototype
5:04
67
Mesh Gradients
Create beautiful and wave shaped gradients using shapes or the mesh gradient plugin in Figma
3:03
68
Figma Sections
Use sections in Figma to organize designs better and make it easier for collaboration
3:53
69
Unsplash Stock Photos
Insert beautiful images from Unsplash straight into your designs
2:07
70
Angular Gradient
Step-by-step guide to creating and customizing an angular gradient in Figma
4:17
71
Radial Gradient
Creating vibrant radial gradients in Figma for a professional design look
5:11
72
After Delay Animation Prototyping
The easiest way to animate anything on the web using simple after delay interaction in Figma
3:14
73
UI Wireframe
Use various tools and plugins to create a wireframe that helps you easily plan and design your user interface
2:53
74
Lottie Animations
Step-by-step guide to using Lottie animations in Figma to improve collaboration and enhance your designs
3:55
75
Design Sign Up Screen
Easily design a sign up screen in Figma for your app or website
6:42
76
Content Generator
Useful plugins that can help designers design with real content and save time
2:53
77
Design Lint Missing Style
Save time finding and fixing errors in your Figma designs with Design Lint
2:36
78
Slice Tool
Export your designs using the slice tool in Figma
2:04
79
Adaptive Layout with Breakpoints
Creating flexible and responsive web designs with adaptive layout and breakpoints
6:25
80
Chart Designs
Exploring the endless possibilities of chart designs for data visualization
4:51
81
Design Modals
How to design modals that enhance user interfaces
4:08
82
Batch Rename
Quickly and easily rename multiple files in Figma using the Batch Rename plugin
2:35
83
Design Onboarding Screen
Creating an engaging experience to drive user retention with onboarding design
2:28
84
Animated Button Prototype
How to create a dynamic interactive button
3:06
85
Smart Selection
Arrange layers more efficiently with smart selection
2:15
86
Component Properties
Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel
4:37
87
RedLines
Measure distances and annotate your Figma designs before handoff with Redlines Figma plugin
2:54
88
Interactive Calendar
Learn how to use interactive components in Figma to create an interactive calendar with hover and clicked-on states
7:46
89
Measure Distance
Place your design elements in the right place with measure distance in Figma
3:33
90
Variable Fonts
Learn how to replace static fonts with the variable font version
2:51
91
AI Plugins
Enhancing design efficiency by exploring advanced AI tools in Figma to optimize your workflow
6:16
92
Text Animation
Create an impressive motion text animation using interactive component and after delay
3:11
93
Resize Layers
Resize layers using the scale tool
2:36
94
View Layer Outlines
Understanding and organizing your design with view layer outlines
2:23
95
Prototype Connections
Configure your prototypes so that anyone with view access can see the interactions
2:38
96
Export SVG Files and Code
Exporting your artwork as an SVG file allows you to easily embed it in your HTML and CSS code
2:47
97
3D Illustrations
Enhancing Project Design with 3D Illustrations
4:14
98
UI Placeholder
Insert a temporary element to visualize the design
2:38
99
Dark Mode Switch
Transform your design into dark mode in just one click
4:23
100
Dev Mode
Explore Figma's Dev Mode, your essential tool for simplifying design-to-code workflows
6:26
101
Dark Mode Variables
Learn how Figma's dark mode variable feature enhances design by allowing seamless transitions between themes
10:04
102
Figma to HTML
From Figma to Web: Simplifying HTML Export with Anima
10:51
React Hooks Handbook
An exhaustive catalog of React tutorials covering hooks, styling and some more advanced topics
50 free tutorials
Videos, PDF, files
PRO
50 TUTORIALS
1
Intro to React Hooks
An overview of React Hooks and the frameworks you can use to build your React application blazingly fast
3:39
2
Create your first React app
Create your first React project from the Terminal and save it on your local computer
4:23
3
React Component
Create your first JSX component using React
2:54
4
Styling in React
How to style your React components using inline styling, separate stylesheets or styled-components
5:06
5
Styles and Props
Render different styles depending on different properties passed to your component
2:22
6
Understanding Hooks
Learn about the basics of React Hooks, which introduced at React Conf 2018
3:21
7
useState Hook
Use the useState hook to manage local state in your React component
2:54
8
useEffect Hook
Manage with your component's lifecycle with the useEffect hook
3:41
9
useRef Hook
Learn about the useRef hook, which replaces the JavaScript getElementById way
3:00
10
Props
Learn about props in React to pass data from parent to child components
3:11
11
Conditional Rendering
Render different UIs depending on different conditions and states
4:21
12
Load Local Data
Load local JSON data into your React application
4:04
13
Fetch Data from an API
Learn the basics of asynchronous functions and promises by fetching data from an API using fetch, useEffect and useState
5:40
14
Toggle a state
Learn how to toggle a state from true to false and back again
4:05
15
useInput Hook
Create a hook to get the value and the onChange event of input fields
6:04
16
Gatsby and React
Create a static content-oriented website using React on Gatsby
6:44
17
NextJS and React
Create your first NextJS React application
5:24
18
React TypeScript Part 1
Learn how to create a React TypeScript application using the Create React App, Gatsby and NextJS methods
8:19
19
React TypeScript Part 2
Learn the basics of TypeScript and how to use TypeScript in a React component
7:35
20
useScrollPosition Hook
Create a custom hook to listen to the current window position of the user
4:26
21
useOnScreen hook
Create a custom hook to listen to when an element is visible on screen
8:08
22
useContext Hook
Manage global states throughout the entire application
8:32
23
Fragments
Group multiple children together with React Fragments
2:43
24
Lazy Loading
Lazy Load heavy components to improve performance
4:05
25
React Suspense
Wait for data with React Suspense and React.lazy
3:13
26
Environment Variables
Make environment variables secret with a .env file
4:43
27
Reach Router
Create a multiple-pages React application with Reach Router
5:31
28
URL Params
Create unique URL with URL Params
4:04
29
SEO and Metadata
Optimize a React application for search engines with React Helmet
6:47
30
Favicon
Add an icon to a React website
3:03
31
Dynamic Favicon
Change the favicon's fill color depending on the user's system appearance
2:14
32
PropTypes
Implement props type-checking with PropTypes
3:54
33
Custom PropTypes
Create a custom PropType using a validator function
3:58
34
useMemo Hook
Prevent unnecessary re-renders when the component stays the same
4:05
35
forwardRef Hook
Forward a ref to a child component
3:28
36
Handling Events
How to handle events in React
5:44
37
Spread attributes
Learn how to make use of the spread operator
3:35
38
useMousePosition Hook
Detect the user's mouse position on a bound element
4:55
39
useReducer with useContext Part 1
Create a reducer to be used in a context
7:33
40
useReducer with useContext Part 2
Incorporate useReducer with useContext
6:48
41
useReducer with useContext Part 3
Connect the context and reducer with the frontend
5:43
42
Netlify
Deploy to production using Netlify
5:08
43
Gatsby Cloud
Deploy to production using Gatsby Cloud
6:19
44
Gatsby Plugin Image
Use gatsby-plugin-image for automatic image resizing, formatting, and higher performance
8:11
45
useOnClickOutside Hook
Toggle a modal visibility with a useOnClickOutside hook
6:32
46
useWindowSize Hook
Create a hook to determine the width and height of the window
4:14
47
usePageBottom hook
Detect if the user scrolled to the bottom of the page
4:48
48
useLocalStorage Hook
Store an item in a browser's local storage
5:27
49
Three.js in React Part 1
Bring your website to life with beautiful 3D objects
17:33
50
Three.js in React Part 2
Bring your website to life with beautiful 3D objects
11:18
Advanced React Hooks Handbook
An extensive series of tutorials covering advanced topics related to React hooks, with a main focus on backend and logic to take your React skills to the next level
15 free tutorials
Videos, PDF, files
PRO
15 TUTORIALS
1
Intro to Firebase
Learn about Firebase and set it up in your React project
6:59
2
Firebase Auth
Set up authentication in your React application using Firebase Auth
11:59
3
Firestore
Enable Firestore as your database in your React application
10:51
4
Firebase Storage
Enable Firebase Storage in your application to store photos or videos from users
6:40
5
Serverless Email Sending
Use EmailJS to send an email without backend
10:02
6
Geocoding with Mapbox
Create an address autocomplete with Mapbox's Geocoding API
9:24
7
Contentful Part 1
Create a Contentful account, add a model and content
4:59
8
Contentful Part 2
How to use the Content Delivery API to fetch data from Contentful
8:52
9
Gatsby and Shopify Part 1
Create a Shopify store, generate a password and add products to the store
5:20
10
Gatsby and Shopify Part 2
Connect Shopify to Gatsby and display all products
13:21
11
Gatsby and Shopify Part 3
Create a seamless checkout experience with Shopify and Gatsby
14:32
12
Creating Stripe Account and Product
Start integrating with Stripe and set up an account, product and price
5:18
13
Adding Stripe.js to React
Loading Stripe.js library to your React client application
5:54
14
Stripe Checkout Client Only
Accept payment with Stripe Checkout without backend
18:18
15
PayPal Checkout
Integrate online payment with PayPal
31:21
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
6 free tutorials
Videos, PDF, files
PRO
6 TUTORIALS
1
Styled Components
React library for styling your components
5:36
2
Grid Layout
The best way to create a beautiful and responsive layout
16:09
3
Media Query
Introduction to Responsive Web Design
8:24
4
Keyframes
Create beautiful animations in CSS using keyframes
12:34
5
Glassmorphism Animation
Bring your frosted glass design to life with beautiful animations
14:21
6
CSS line animations
Learn how to create a CSS line animation
15:47
UI Design Handbook
A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.
35 free tutorials
Videos, PDF, files
PRO
35 TUTORIALS
1
UI Design Aesthetic
Learn about UI design aesthetics.
3:52
2
Design for accessibility
Learn about accessibility in design.
1:59
3
Localization
Read more about the importance of localization.
1:14
4
Color Selection
Select colors for your projects
5:06
5
Pick Fonts
Select the most suitable fonts for your design.
3:35
6
Font Managers
Manage your fonts more efficiently.
2:06
7
Icon Organizer
Organize your icons in a better way.
2:59
8
UI Sound Design
Importance of sound in UI design
4:25
9
Stock Images
Find the right images for your UI
1:29
10
Image optimization
Optimize your images to improve performance.
1:46
11
Illustrations
Add illustrations to your design project
1:38
12
Realistic Mockups
Resources to add realistic mockups to your design.
2:47
13
UI 3D Assets
Work with 3D assets in your design projects
2:29
14
Introduction to Animations
Learn about basic animations in UI design.
5:09
15
UI Animation Resources
List of tools and resources for UI animation.
1:45
16
Apple Watch Faces
Create customizable watch faces for the Apple watch
2:06
17
Designing for Apple Watch
Getting started with Apple Watch Design
4:24
18
Designing for Apple TV
Learn the basics steps to design for Apple TV
1:58
19
Design for Game Center
Learn how to design for Game Center
3:43
20
Designing for CarPlay
Learn the basics of designing for CarPlay
1:37
21
Designing App Clips
Learn how to design app clips for iOS
7:05
22
Designing Widgets
Design widgets for your applications.
3:29
23
Design Systems
Create design systems for a better workflow.
1:27
24
UI Kits
Learn more about UI Kits and where to find them.
3:33
25
Prototyping Tools
Learn about prototyping tools.
3:22
26
Voice prototyping
Take a look at voice prototyping.
2:14
27
Prototyping with Code
Read more about prototyping with code.
3:01
28
Turn your Designs into Code
Learn how to turn your Designs into Code.
2:18
29
Version Control Tools
Share and synchronize your files with your team
2:12
30
Developer Handoff
Learn more about developer handoff.
1:05
31
Color Theory
Understand color theory to select the best color themes for your application.
10:35
32
Dark Interfaces
Add dark mode to your application.
3:53
33
Icons
Learn more about UI icons.
10:32
34
Background Patterns
Create beautiful background patterns.
5:41
35
Typographic Scales
Learn more about typographic scales.
2:40
iOS Design Handbook
A complete guide to designing for iOS 14 with videos, examples and design files
20 free tutorials
Videos, PDF, files
PRO
20 TUTORIALS
1
Intro to iOS 14 Design
A complete guide to designing for iOS 14 with videos, examples and design files
4:13
2
iOS Colors
Learn how to work with colors in iOS 14
5:28
3
Typography and Dynamic Type
Learn to make the content clear and readable
5:33
4
Background Blur and Gradients
Creating contrast between contents using blurs and apply gradients from analogous colors
4:19
5
Adaptive Layout
Learn to make your designs adaptive to different device screen sizes and orientation
4:19
6
Do's and Don'ts
Things to keep in mind while designing for iOS
6:52
7
Design for Touch
Keeping your content reachable using different touch techniques
7:46
8
iOS Native UI Elements
Learn and benefit from using Apple's UI resources
8:10
9
iOS Icons
Learn how to find great icons and customize them
3:44
10
Design for iPad
How bigger screens affect your design
8:11
11
Design the Sidebar
How to design a sidebar for iPad
7:16
12
Design Widgets
Displaying important and useful information using widgets for quick glances
6:31
13
Animations
Good animations enhance, bad animations distract
5:23
14
App Clips
Make use of a specific feature in your app through app clips
7:05
15
Design for Apple Watch
Designing for people on the go
6:16
16
Modals
Provide more focused experience by presenting your content in a temporary modal view
6:17
17
Onboarding
Learn to design meaningful experiences with clear onboarding flows and patterns
6:51
18
Launch Screen
Hint users about loading content through launch screens
5:35
19
Design for Accessibility
Basic rules and system to improve app accessibility
4:12
20
Design for macOS Big Sur
Designing an app with translucency and sidebar layout for macOS Big Sur
6:31
UX Design Handbook
Learn about design thinking, with exercises. Free tutorials for learning user experience design.
20 free tutorials
Videos, PDF, files
PRO
20 TUTORIALS
1
Design Thinking
Solving problems with Design Thinking
7:36
2
Lean UX
Working efficiently and collaborative
6:10
3
What is UX Design?
From research to design
8:29
4
UX Research
Research methods available
5:52
5
Qualitative Research
Build successful products from the start
4:17
6
Quantitative Research
Find patterns, make predictions
6:19
7
Heuristic Evaluation
Judging the design based on usability principles
2:24
8
UX Writing
Working in content design
10:52
9
User Personas
Creating user personas, and understanding scenarios
9:49
10
User Journey
A users’ experience timeline
23:03
11
Usability Metrics
Measuring usability
7:05
12
Usability Review
Evaluating how usable a product could be
5:17
13
UX Terminology
Getting familiar with the UX world
2:05
14
Wireframing
The fast and cheapest way to test ideas
1:23
15
SEO
Rank higher in search results pages
2:09
16
Readability and Legibility
Prepare your content the right way
1:52
17
Top skills that make a great UX'er
Skills needed for your upcoming UX journey
2:33
18
Card Sorting
Learn how to structure information
1:35
19
Analytics
Discover a world full of possibilities
1:50
20
User Flow
Visualise how users move through your product
2:33
