Figma UI UX 设计要点

Figma UI UX Design Essentials

使用 Figma 获得 UI 设计、用户界面、用户体验设计、UX 设计和网页设计方面的工作

你将学到什么

如何开始使用 Figma 作为 UX 设计师。
如何使用 Figma 进行基本的 UX 设计和 UI 设计
如何制作完全交互式的原型。
如何使用 UX 角色。
您将能够将 UX 设计师添加到您的简历中。
从头到尾构建一个 UX 项目。
客户对您作为 UX 设计师的期望。
如何创建简单的线框。
如何在您的设计中正确实现颜色和图像。
为网络和移动应用程序选择字体的注意事项。
如何创建自己的图标、按钮和其他 UI 组件。
组件、约束和多维变体等术语。
Figma 的免费 UI 套件和插件将大大加快我们的工作流程!
如何构建一个简单的风格指南,为客户交接做好准备。
如何制作简单和高级的微交互、页面转换和动画。
学习设计网站和手机应用程序。
使用字体和颜色。
在手机上测试。
出口生产就绪资产。
创建您的第一个 UX 简介和角色。
学习专业的工作流程技巧和捷径。
我和其他 BYOL 工作人员的论坛支持。
UX 专业人员使用的所有技术
111 个详细的 Figma & UX & UI 设计内容视频。

要求

您需要一份 Figma 的副本。
不需要以前的 UX 设计/UI 设计经验。
不需要以前的 Figma 技能。
不需要以前的设计技能或经验。
描述
你好 – 我的名字是 Dan Scott 并且欢迎来到 Figma Essentials。一起 – 你和我 – 将学习开始使用 Figma 作为 UX 设计师工作所需的一切。我们将使用这个 UI UX 设计工具来创造美丽用户界面和引人入胜的原型。最重要的是……我们将满足您作为新用户体验设计师的客户期望。

本课程面向设计新手,用户体验设计新手。即使您不完全确定 UX 的真正含义,也不要担心。我们将从头开始,逐步完成。首先,我们将描述简介以及如何使用 UX 角色。然后您将学习如何创建简单的线框。

从那里我们将看看了解如何在您的设计中正确实现颜色和图像。您将了解有关选择网络字体的注意事项和注意事项 移动应用程序。

您将学习如何创建自己的图标、按钮和其他 UI 组件。您将学习一些非常可怕的术语,例如组件、约束和多维变体。一旦您知道如何操作,它们都非常容易理解。

我们还将通过使用 Figma 的免费 UI 工具包和插件来让我们的生活更轻松,这将大大加快我们的工作流程!我们将构建一个简单的样式指南,以供客户移交。

您将了解如何制作简单和高级的微交互、页面转换和动画在本课程结束之前,您将制作完全交互式的原型您将完成一个项目 – 与其他团队成员合作并准备好导出正确的文件交给您的开发人员或软件工程师。

我们将专注于 Figma 软件,但我会确保解释 UX 中使用的技术和术语以及现实世界项目的运行方式。

您将对行业有深入的了解,并能够管理自己的用户体验项目。我将通过课程设置作业,这将有助于培养您的技能,并使您能够为自己的投资组合创造一些特别和独特的东西。好吧 -是时候升级自己并从 Figma Zero 到 Figma Hero 了。

概述

第 1 部分:入门

第 1 讲 Figma Essentials 培训课程介绍

第 2 讲 Figma 培训入门

第 3 讲 Figma 是做什么用的?它是用来编码的吗?

第 4 讲 Figma 中的 UI 和 UX 有什么区别

第 5 讲我们在这个 Figma 课程中所做的事情

Lecture 6 Class project 01-创建你自己的简报

第 2 部分:线框图 – 低保真度

第 7 讲 什么是 Lo Fi 线框 vs Figma 中的高保真

第 8 讲 创建我们的设计文件并在 Figma 中引入框架

第三部分:类型、颜色和图标介绍

第 9 讲 Figma 中类型和字体的基础知识

第 10 讲 Figma 中的矩形圆形按钮圆角

Lecture 11 如何在 Figma 中使用颜色

Lecture 12 Strokes 以及在 Figma 中更新颜色默认值

Lecture 13 对象编辑以及如何在 Figma 中转义

第 14 讲 Figma 中的比例与选择工具

第 15 讲 Figma 中的帧与组

第16讲课堂项目02-线框

第 17 讲 哪里可以获得 Figma 的免费图标

Lecture 18 匹配我们图标的笔画

第 19 讲如何在 Figma 中使用插件来制作图标

第 20 课 课堂项目 03 – 图标

第 4 部分:页面

Lecture 21 如何在 Figma 中使用页面

第 5 部分:原型设计 – 1 级

Lecture 22 如何在 Figma 中进行原型制作

第 23 讲 Figma 中的原型动画和缓动

Lecture 24 使用 Figma Mirror 在手机上进行测试

Lecture 25 Class project 04 – 在你的手机上测试

第 6 部分:动画级别 1

第 26 讲 什么是智能动画和 Figma 中的延迟

Lecture 27 Class project 05 – 我的第一个动画

第 7 节:评论

Lecture 28 与利益相关者分享和评论 Figma 文件

Lecture 29 在 Figma 中与其他 UX 设计师分享编辑

第 8 部分:Moodboard – 高保真

第 30 讲我如何从 UX 项目中获得灵感

Lecture 31 如何在 Figma 中创建情绪板

第32课 课堂项目06 – 情绪板

第 9 节:列

Lecture 33 如何在 Figma 中使用 Columns & Grid

第 10 节:提示和技巧

Lecture 34 Tips Tricks Preferences and Weirdness in Figma

第 11 节:颜色

第 35 讲 色彩灵感和 Figma 中的吸管

第 36 讲 如何在 Figma 中创建调色板

第 37 课如何在 Figma 中制作渐变

Lecture 38 如何在 Figma 中创建和使用颜色样式

Lecture 39 Class Project 07 – 颜色和列

第 12 节:文本和字体高级

第 40 讲 桌面字体 vs 浏览器 Figma

Lecture 41 我可以使用哪些字体以及 Figma 中的字体配对

第42讲 网页设计中我应该选择哪些常见的字体大小

第43讲如何在Figma中制作字符样式

Lecture 44 Lorem ipsum & Placeholder text in Figma

第 45 讲关于 Figma 中文本的有用知识

Lecture 46 如何修复 Figma 中缺失的字体

第 47 课 课堂项目 08 – 正文

第 13 节:绘图

Lecture 48 在 Figma 中绘图技巧和窍门

第 49 讲 Figma 中带有 ios 圆形课程的 Squircle 按钮

Lecture 50 Boolean Union Subtract Intersect Exclude Pathfinder in Figma

第 51 讲 Union vs Flatten Figma 有什么区别

第52讲课项目09-制作东西

第 53 讲 Figma 中的智能选择和整理

第 14 节:使用 Illustrator

第 54 讲 我需要知道 Illustrator 和 Figma

第 15 节:图像

第 55 讲在 Figma 中使用图像的技巧和窍门

第 56 讲 Figma 中的遮罩裁剪图像

第 57 讲 Figma 的免费图片和插件

第58课 使用Photoshop

第 59 课 课堂项目 10 – 图片

第60讲 自动布局和约束

Lecture 61 Class project 11 – 按钮

第62讲 间距的自动布局

第63讲 如何在figma中使用约束

Lecture 64 在 Figma 中结合嵌套框架自动布局和约束

第 65 课在 Figma 中为自动布局添加文本框自动高度

Lecture 66 Class Project 12 – 响应式设计

第 67 讲 Figma 中漂亮的阴影和内部阴影效果

第 16 节:效果

第68讲 Figma中的模糊层和背景模糊和图像模糊

Lecture 69 如何在 Figma 中制作 Neumorphic ui 按钮

Lecture 70 Class project 13 – 效果

第 17 节:保存和历史记录

Lecture 71 如何在 Figma 中保存本地和历史记录

第 18 节:组件和实例

第 72 讲 Figma 中的组件是什么

第 73 课 更新&更改&重置你的组件

第 74 讲 Figma 中你不能杀死主要组件

第 75 讲 Figma 中的主要组件应该放在哪里

第 76 讲 Figma 中的正斜杠/命名约定介绍

第77课第14课-组件

第 19 节:变体和变量

第78课 如何在Figma中制作可变组件

第 79 讲 Figma 中创建变量的另一种方法

第 80 讲 如何在 Figma 中制作多维变体

第 81 课 课堂项目 15 – 变体

第 20 节:制作表格

第 82 课如何在 Figma 中使用变体制作表单

第83课第16课-表格

第 84 课 将所有内容放在一个桌面示例中

第 21 节:原型设计 – 第 2 级

第 85 讲 如何在 Figma 中添加弹出式覆盖模态

第 86 课如何在 Figma 中制作和原型化工具提示

第87课 Figma中的流是什么

第 88 讲在 Figma 中滑动移动导航菜单覆盖

第 89 课 第 17 课 – 原型设计

Lecture 90 如何在 Figma 中将导航固定到顶部

Lecture 91 如何在 Figma 中进行水平滚动滑动

Lecture 92 自动向下滚动页面到 Figma 中的锚点

第 22 节:团队和项目

第 93 讲 Figma 中的 Teams vs Projects vs Files 是什么

第 23 节:图书馆

Lecture 94 你如何在 Figma 中使用团队库

第 24 节:动画和微交互

第95讲动画与微交互的区别

第 96 讲 Figma 中带有自定义缓动的动画

第97课第18课-我的第二个动画

第 98 讲 如何在 Figma 中制作动画过渡

Lecture 99 Class Project 19 – 页面转换

Lecture 100 使用 Figma 中的交互组件进行微交互

Lecture 101 Figma 中的微交互切换开关

Lecture 102 微交互汉堡菜单在 Figma 中变成十字

Lecture 103 Class Project 20 – 微交互

第 25 节:缩略图更新

Lecture 104 如何更改 Figma 文件的缩略图

第 26 节:出口

Lecture 105 如何从 Figma 中导出图片

第106课如何与客户和利益相关者分享你的文件

Lecture 107 在 figma 设计过程的早期与您的开发人员交谈

Lecture 108 与开发人员和工程师分享 Figma

第 109 讲 什么是下一级交接,也就是设计系统

Lecture 110 Class Project 21 – 完成你的设计

第 27 节:下一步

Lecture 111 你和 Figma 的下一步是什么

任何想在职业生涯中开始使用 Figma 并因其用户体验设计技能而获得报酬的人。,本课程面向 UX 设计领域的初学者、新手和业余爱好者。,针对刚接触设计和用户体验世界的人.,对于任何需要将“UX 设计”添加到他们的作品集的人。,任何想要学习 UI 和 UX 设计基础知识的人。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。