★ FEATURED ARTICLE 博主名称_Doubletful大家好欢迎来到Doubletful的博客博主的GitHub Go to git_hub移动应用开发专栏路漫漫其修远兮吾将上下而求索文章目录序言什么是 UI 设计Figma用于做什么对比同UI设计软件XD1.Figma的安装和注册1.1.Figma的安装1.1.1.注意事项1.1.2.如何将 Figma 迁移至 D 盘1.2.Figma的注册2.初步上手Figma设计2.1.Figma主页2.2.Design界面的左边栏2.2.1.File选择项2.2.2.Edit选择项2.2.3.View选择项2.2.4.像素取整2.2.5.Piugins选择项2.2.6.Widgels选择项2.2.7.Preferences选择项2.2.8.文件相关操作2.2.9.页和图层2.3.Design界面的画布2.3.1.修改画布的颜色2.3.2.快捷操作面板2.4.Design界面的右边栏2.4.1.演示与预览2.4.2.右边栏的其他功能附录Mac快捷键大全序言什么是 UI 设计UIUser Interface用户界面设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。它关注的是用户在屏幕上看到并与之互动的所有视觉元素包括按钮、图标、排版、配色、动效以及布局规范。Figma用于做什么目前是一款全球数字产品设计与研发领域中最主流的云端协作式 UI/UX 界面设计工具。它运行在浏览器中同时也提供 macOS 和 Windows 客户端彻底改变了以往“本地作图、导出切图、邮件传递文件”的传统工作流使设计师、产品经理、研发工程师能够在同一个云端画板中实时协作。对比同UI设计软件XDAdobe XD 曾是与 Sketch、Figma 齐名的主流 UI 工具之一但目前 Figma 在基于浏览器的实时多人协作与插件生态上的全面领先 Adobe XD因此本系列博客从 Figma 入手让萌新能快速上手 UI 设计。1.Figma的安装和注册1.1.Figma的安装打开浏览器直接在网址中输入 figma.com不建议在搜索引擎中搜索真正的官方网站容易被大雪深藏。进入网站依次按图中点击选择对应版本下载1.1.1.注意事项Figma 桌面端采用的是基于 Squirrel / Electron 的静默打包机制。运行 FigmaSetup.exe 时程序为了避免系统管理员权限弹窗打断流程不会提供安装路径选择界面而是直接解压并写入当前用户的应用数据目录下C:\Users你的用户名\AppData\Local\Figma无论安装包 FigmaSetup.exe 存放在哪一个磁盘执行时都会默认部署到上述 C 盘目录中下面来看看如何将它移动到其他盘以 D 盘为例。1.1.2.如何将 Figma 迁移至 D 盘Figma 客户端体积相对较小(几百 MB)如果为了释放 C 盘空间或保持软件归类整洁最稳定且不影响后续版本更新的方法是使用 Windows 自带的目录联接将实际文件移到 D 盘并在 C 盘原位置建立一个系统级快捷通道。但由于只有几百 MB且迁移方式相对繁琐这里博主选择算法思想经典的用空间换时间不去移动了欸嘿以下是详细操作检验连接是否成功终端输出提示为 C:\Users… 为创建的联接 D:\Software\Figma。此时打开 C 盘对应位置会看到一个带有小箭头图标的 Figma 文件夹系统和程序会无感读取所有实际存储占用均在 D 盘。1.2.Figma的注册还是在网站的页面点击 Log in 登录或注册。如果你有谷歌账号能直接非常方便的登录博主使用的是此方法如果没有点击登录页面的 Create one 注册邮箱它就在弹窗的偏右下角。输入注册邮箱能直接使用QQ邮箱和初始密码随后点击 Create account这时你会看到打开你的邮箱查看 Figma 发来的邮件点击认证邮件按钮即可。后续操作设置一个名字随意选择一个身份并跳过 “Will anyone else be joining you?”在三个选择中随意选一个后来到页面分别是免费版限制一些功能专业版和教育版我们选择 Starter 即可。2.初步上手Figma设计2.1.Figma主页先认识下主页及其相关的功能一、左侧导航栏组织与管理从上到下依次为用户账户与通知最上方显示当前登录账号点击可切换账号或进行全局设置右侧铃铛图标为系统通知中心。搜索栏Search快速按文件名、项目名或创建者搜索设计稿。全局浏览分类Recents最近访问按打开时间倒序展示最近查看或编辑过的所有文件。Community社区可在其中查找并免费复制开源设计组件库UI Kit、图表、原型模板以及各类扩展插件。团队空间Drafts草稿箱存放个人私密草稿其他人默认不可见。All folders所有文件夹团队内的项目归类文件夹。Resources资源团队沉淀的公共组件库与样式资源。Trash回收站 存放已删除的文件。Starred已加星标类似收藏夹下方展示被标星的团队文件夹图示为 Team folder方便高频进入。二、顶部操作区新建与视图控制新建工具快捷入口Design 创建全新的 UI/UX 矢量设计稿用于绘制界面、页面排版与高保真交互原型。FigJam 新建协作白板适合产品早期的头脑风暴、流程图绘制及敏捷评审。Slides 新建 Figma 专用的交互式演示幻灯片。Make / More 扩展入口用于创建特殊类型文件或导入本地设计稿如 Sketch、.fig 文件等。过滤与布局切换支持按组织架构All organizations和文件类型All files进行筛选 右侧提供了网格平铺与列表视图的切换按钮。三、主内容展示区文件浏览当前界面 Recents最近访问 下的标签页展示子标签切换可查看 Recently viewed最近浏览、Shared files与我共享的文件、Shared folders共享文件夹。文件卡片展示以图示内容示例FigJam basics 官方自带的 FigJam 白板基础教学与演练文档。Figma basics 官方自带的 Figma 核心界面设计上手指南文档。Antoine Vaniel’s team library 自动生成的个人团队设计资产规范库用于存放通用的配色、排版和常用基础按钮。2.2.Design界面的左边栏在主页点击 Design 或使用快捷键 Ctrl N 去创建设计文件。这里就是主要的 UI 设计区了简单认识一下功能2.2.1.File选择项主要关注 Save a local copy… 和 Save to version history…。2.2.2.Edit选择项主要关注 UndoRedo 和 Copy as PNG。2.2.3.View选择项主要关注 Pixel gridRulersPixel previewMinisize UI 和 Show/Hide UI。2.2.4.像素取整有关于 ObjectTextArrangeVector 先只介绍一个功能Arrange 的像素取整剩下的用到再介绍。首先选中操作图形按 ctrl shift p 后能看到取整效果点击 Figma 图标点击 Arrange点击 Round to pixel2.2.5.Piugins选择项插件通常都是从第三方库中下载如果你是开发者或想要自己写插件的用户才需要用到 Development 中的选择项。2.2.6.Widgels选择项部件是可以放入画布的“可交互的内容块”需要先去 Figma 社区下载安装当然也能自己开发。2.2.7.Preferences选择项主要关注 Snap to geometrySnap to objectsSnap to pixel gridHighlight layers on hoverRename duplicated layersShow dimensions on objectsUse number keys for opacityColor profile… 和 Nudge amount…。色彩管理设置(Color profile…)点击 Color profile… 后弹出弹窗 Color profile settings(颜色配置文件设置)这个设置的核心在于决定你的设计文件使用哪种色彩空间它直接关系到你在屏幕上看到的颜色和在别人设备上看到的颜色是否一致。稳妥结论只使用苹果端选 Display P3其余情况均选择 sRGB。快捷键增减量设置(Nudge amount…)上下左右键移动对象Ctrl 上下左右键改变对象的尺寸点击 Nudge amount…设置 Small nudge ↑↓←→键的移动和 Big nudgeShift ↑↓←→键的移动。2.2.8.文件相关操作2.2.9.页和图层2.3.Design界面的画布画布操作空格 鼠标左键拖动画布。Ctrl 滚动鼠标滚轮缩放画布。Ctrl 键盘加减号缩放画布。Ctrl 键盘零恢复100%尺寸画布。2.3.1.修改画布的颜色2.3.2.快捷操作面板2.4.Design界面的右边栏2.4.1.演示与预览⚙️大家尝试后可能会有的疑惑解答演示效果的边框为手机需要将画布设置为手机型号的画布否则会像这样2.4.2.右边栏的其他功能在上述中没讲到或介绍不详细的会在之后的学习中用到再介绍。附录Mac快捷键大全⚛️EL PSY CONGROO十分感谢你的阅读本期不确定信息好像太干燥了要掺些水份吗
阅读完成 · 觉得有帮助？
