当前位置： 首页 > article >正文

【Figma_01】Figma软件初始与使用

article 2025/2/28 15:32:13

Figma初识与学习准备

  • 背景介绍
  • 软件使用
    • 1.1 切换主题
    • 1.2 官方社区
  • 设计界面
    • 2.1 创建一个项目
    • 2.2 修改文件名
    • 2.3 四种模式
    • 2.4 新增界面
    • 2.5 图层
    • 2.6 工具栏
    • 2.7 属性栏
      • section
      • 透明度和圆角
      • 改变多边形的边数
      • 渐变效果
      • 描边
      • 设置阴影等特效
      • 拖拽相同的图形

背景介绍

Ul设计:User Interface Design，即用户界面设计，属于“平面视觉”的子类。

  • 传统的UI设计软件有：adobe PS，adobe AI。但是它们由于功能太过冗余复杂，不适合专门做UI设计。
  • 之后有两款专门用于UI设计的软件推出了，分别是Sketch（2010推出），adobe XD（2017年推出）。但是这两款软件都是本地软件，无法抵抗云服务的浪潮，于是 Figma 在这个背景下应运而生飞速发展。

Figma下载网站：https://www.figma.com/downloads/

在这里插入图片描述
免费版使用的时候会有限制，对学生可以申请教育优惠。但是这里需要你使用学校的邮箱登录。

软件使用

1.1 切换主题

在这里插入图片描述
有黑白两个颜色可以切换。

在这里插入图片描述

1.2 官方社区

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Figma的文件类型：

在这里插入图片描述
白板文件类型：可以进行涂改和绘画。

在这里插入图片描述
幻灯片文件类型：目前还很简陋。

因此目前主要的还是设计文件。

设计界面

2.1 创建一个项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 修改文件名

在这里插入图片描述

2.3 四种模式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 新增界面

在这里插入图片描述
在这里插入图片描述

2.5 图层

在这里插入图片描述
在图层当中选中元素和在画面当中选中元素是一样的。

2.6 工具栏

在这里插入图片描述

  • 拖动画布：按住空格键之后拖动。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
快捷键：shift+c

2.7 属性栏

在这里插入图片描述

在这里插入图片描述

section

在这里插入图片描述

透明度和圆角

在这里插入图片描述

在这里插入图片描述

改变多边形的边数

在这里插入图片描述

渐变效果

在这里插入图片描述

描边

在这里插入图片描述

设置阴影等特效

在这里插入图片描述

拖拽相同的图形

在这里插入图片描述


http://www.kler.cn/a/442640.html

相关文章：

  • C++【默认成员函数（下）】
  • C++STL之list(用法超详解)
  • 一款可以替代Navicat的数据库管理工具
  • java: 无效的目标发行版: 9或警告: 源发行版 9 需要目标发行版 9
  • android liveData更新UI数据
  • google guava 库 最佳实践 学习指南 学习实用示例
  • “智联实验舱”：基于 SSM 和 Vue 的 WEB 开放性实验室管控系统
  • 【第一篇】 数据库管理工具概述
  • Vue3动态表单实现
  • 游戏关卡分析：荒野大镖客2雪山终战
  • 探索高级 SQL 技巧：提升数据库操作效率
  • MyBatis学习笔记：进阶知识2
  • World-Grounded Human Motion Recovery via Gravity-View Coordinates
  • Unity NTPComponent应用, 实现一个无后端高效获取网络时间的组件
  • 云计算笔记
  • 基于AI对话生成剧情AVG游戏
  • 数据结构之顺序存储二叉树
  • kubernetes学习-应用程序的生命周期管理
  • 【从零开始入门unity游戏开发之——C#篇11】一个标准 C# 程序介绍、新的值类型——枚举
  • SEO初学者-SEO基础