当前位置: 首页 > news >正文

Figma入门-基本操作制作登录页

Figma入门-基本操作制作登录页

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作及其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

进入Figma

网上随便一搜 Figma ,就能找到入口

www.figma.com

直接邮箱注册后进入即可

alt text

右上角新建一个设计文件

alt text

一个简单的登录页

实现一个简单的 iOS风格的登录页,包括账号密码的输入、登录按钮、logo 显示、登录成功的提示。

  1. 点击左上角 Assets 选择 iOS 相关的资源

alt text

  1. Bezels 里面拖入一个手机的外框

alt text

  1. 拖入一个iOSLogo

alt text

这里可以选择logo和参数等,然后insert即可

  1. 拖入两个textField

alt text

当然也可以直接拖入一个完整 fields,然后从里面复制

  1. 修改textfield的参数和颜色

这时有可能让下载 sfPro 字体,下载安装即可

alt text

alt text

  1. 拖入一个矩形框,当做按钮

alt text

  1. 修改这个矩形框的圆角和颜色

alt text

  1. 底部的文字工具拖入一个文字,然后修改文字颜色

alt text

  1. 拖入一个 Alert 调整到合适大小,就得到了如下结果

alt text

总结

Figma 我一注册进入没有任何操作的情况下,已经在设计文件的 Assets中找到了很多常用的资源,包括 iOS 和安卓的,这对新手来说确实非常友好。

基本操作总结:点按、拖动这些操作忽略,界面还是非常直观的

Space + 鼠标左键:移动画布

Ctrl + 滚轮:缩放画布

右侧属性栏但凡是数字的地方,都可以 alt 键 + 鼠标左右滑动进行调整,这个很方便

相关文章:

Figma入门-基本操作制作登录页

Figma入门-基本操作制作登录页 前言 在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。 最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的&am…...

在windows操作系统上,用git与github账户连接

一、环境准备 1.1 git软件 1.2 github账号 1.3 创建一个项目目录,比如 D:\project\gitproject 二、开始操作 1. 进入项目目录下,右键,如图,打开git bash命令行 2. 在命令行输入以下三个命令 $ git config --global user.name &quo…...

springboot系列--拦截器执行原理

一、拦截器核心概念 一、定义 拦截器(Interceptor)是框架级别的组件,用于在请求的不同阶段(如到达控制器之前(也就是接口)、处理完成之后)动态地拦截和处理 HTTP 请求。 二、使用场景 一、用户…...

数据可视化复习2-绘制折线图+条形图(叠加条形图,并列条形图,水平条形图)+ 饼状图 + 直方图

目录 目录 一、绘制折线图 1.使用pyplot 2.使用numpy ​编辑 3.使用DataFrame ​编辑 二、绘制条形图(柱状图) 1.简单条形图 2.绘制叠加条形图 3.绘制并列条形图 4.水平条形图 ​编辑 三、绘制饼状图 四、绘制散点图和直方图 1.散点图 2…...

STM32F10x 定时器

使用定时器实现:B5 E5的开关 添加相关的.h路径文件 添加相关的.c配置文件 led.h文件 用于声明LED函数 #ifndef __LED_H //没有定义__LED_H #define __LED_H //就定义__LED_H #define LED1_ON GPIO_ResetBits(GPIOB,GPIO_Pin_5) #defi…...

VBA技术资料MF230:展开所有折叠视图并恢复

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…...

【数据结构OJ】【图论】图综合练习--拓扑排序

题目描述 已知有向图,顶点从0开始编号,求它的求拓扑有序序列。 拓扑排序算法:给出有向图邻接矩阵 1.逐列扫描矩阵,找出入度为0且编号最小的顶点v 2.输出v,并标识v已访问 3.把矩阵第v行全清0 重复上述步骤&#xff0…...

网络安全防范

网络安全防范技术 所属课程网络攻防实践作业要求第六次作业 实践内容 学习总结 PDR,$$P^2$$DR安全模型。 防火墙(Firewall): 网络访问控制机制,布置在网际间通信的唯一通道上。 不足:无法防护内部威胁&…...

Linux nc 命令详解

简介 nc 全称 netcat&#xff0c;是一个在 Linux 中多功能的网络工具&#xff0c;通常用于通过 TCP 或 UDP 读取和写入网络连接&#xff0c;也能作为客户端或服务端用来 debug&#xff0c;测试&#xff0c;网络问题分析。 常用示例 检查端口是否是打开的 nc -zv <hostna…...

解决 Gradle 报错:`Plugin with id ‘maven‘ not found` 在 SDK 开发中的问题

在 SDK 开发过程中&#xff0c;使用 Gradle 构建和发布 SDK 是常见的任务。在将 SDK 发布为 AAR 或 JAR 包时&#xff0c;你可能会使用 apply plugin: maven 来发布到本地或远程的 Maven 仓库。但是&#xff0c;随着 Gradle 版本的更新&#xff0c;特别是从 Gradle 7 版本开始&…...

stm32cubemx+VSCODE+GCC+makefile 开发环境搭建

title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…...

postgresql|数据库开发|python的psycopg2库按指定顺序批量执行SQL文件(可离线化部署)

一、 psycopg2简介 psycopg2库是python的一个可直接操作postgresql数据库的类库&#xff0c;是一个用于Python编程语言的PostgreSQL数据库适配器。它允许开发人员使用Python语言与PostgreSQL数据库进行交互和操作&#xff0c;不同于java&#xff0c;需要专用的一个驱动&#…...

学习ASP.NET Core的身份认证(基于Cookie的身份认证3)

用户通过验证后调用HttpContext.SignInAsync函数将用户的身份信息保存在认证Cookie中,以便后续的请求可以验证用户的身份,该函数原型如下所示&#xff0c;其中properties参数的主要属性已在前篇文章中学习&#xff0c;本文学习scheme和principal的意义及用法。 public static …...

Java 中的 HashMap 原理详解:底层结构与实现机制

HashMap 是 Java 中最常用的数据结构之一&#xff0c;它以其高效的存取速度在众多应用场景中被广泛使用。理解 HashMap 的底层实现原理&#xff0c;对提升开发效率、优化性能以及编写高效的代码都至关重要。本文将深入探讨 HashMap 的数据结构、存储机制、解决冲突的策略、扩容…...

数据库MYSQL——表的设计

文章目录 前言三大范式&#xff1a;几种实体间的关系&#xff1a;一对一关系&#xff1a;一对多关系&#xff1a;多对多关系&#xff1a; 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作&#xff0c; 是在已经创建数据库&#xff0c;表之上的操作。 在实…...

CUDA补充笔记

文章目录 一、不同核函数前缀二、指定kernel要执行的线程数量三、线程需要两个内置坐标变量来唯一标识线程四、不是blocksize越大越好&#xff0c;上限一般是1024个blocksize 一、不同核函数前缀 二、指定kernel要执行的线程数量 总共需要线程数是&#xff1a; 1 * N N个线程…...

OSI七层模型和TCP/IP五层模型详细介绍

这里写目录标题 一.OSI含义二.OSI七层模型1.应用层2.表示层3.会话层4.传输层5.网络层6.数据链路层7.物理层 TCP/IP五层协议1.应用层2.运输层运行在TCP上的协议运行在UDP上的协议 3.网络层IP协议配套使用的协议 4.数据链路层 四.网络协议分层的好处 一.OSI含义 OSI即是开放式通…...

mac安装Pytest、Allure、brew

安装环境 安装pytest 命令 pip3 install pytest 安装allure 命令&#xff1a;brew install allure 好吧 那我们在安装allure之前 我们先安装brew 安装brew 去了官网复制了命令 还是无法下载 如果你们也和我一样可以用这个方法哦 使用国内的代码仓库来执行brew的安装脚本…...

Linux/Windows/OSX 上面应用程序重新启动运行。

1、Linux/OSX 上面重新运行程序&#xff0c;直接使用 execvp 函数就可以了&#xff0c;把main 函数传递来的 argv 二维数组&#xff08;命令行参数&#xff09;传进去就可以&#xff0c;注意不要在 fork 出来的子进程搞。 2、Windows 平台可以通过 CreateProcess 函数来创建新的…...

自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例

Kafka&#xff1a;分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析&#xff1a;从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…...

Odoo :免费且开源的农牧行业ERP管理系统

文 / 开源智造Odoo亚太金牌服务 引言 提供农牧企业数字化、智能化、无人化产品服务及全产业链高度协同的一体化解决方案&#xff0c;提升企业智慧种养、成本领先、产业互联的核心竞争力。 行业典型痛点 一、成本管理粗放&#xff0c;效率低、管控弱 产品研发过程缺少体系化…...

AI的自我陷阱:大型神经网络训练中的模型崩溃现象

10月7日&#xff0c;发布在arxiv上的一篇名为Strong Model Collapse的论文&#xff0c;由Meta 、纽约大学和加州大学洛杉矶分校的研究人员共同发表的研究表明在训练大型神经网络&#xff08;如 ChatGPT 和 Llama&#xff09;时&#xff0c;由于训练语料库中包含合成数据而导致的…...

Python(下载安装)

简介 开发工具&#xff1a;pycharm, VS Code 1. 下载&#xff08;解释器程序&#xff09; Download Python | Python.org 2. 安装&#xff08;解释器程序&#xff09; 双击下载后的exe文件 查看版本&#xff1a;python&#xff08;并可以执行python代码&#xff09; 3. 下载…...

记录一种在内核空间向用户空间通知中断的方法

记录一种在内核空间向用户空间通知中断的方法 0.前言1.代码实现1)内核设备驱动实现2)消息通知实现3)测试程序 2.解析 参考文章&#xff1a;Linux驱动实践&#xff1a;中断处理函数如何【发送信号】给应用层&#xff1f; 0.前言 最近在项目中遇到一个需求&#xff0c;需要将一个…...

Apache Maven 标准文件目录布局

Apache Maven 采用了一套标准的目录布局来组织项目文件。这种布局提供了一种结构化和一致的方式来管理项目资源&#xff0c;使得开发者更容易导航和维护项目。理解和使用标准目录布局对于有效的Maven项目管理至关重要。本文将探讨Maven标准目录布局的关键组成部分&#xff0c;并…...

【vim】使用 gn 组合命令实现搜索选中功能

gn是Vim 7.4新增的一个操作&#xff08;motion&#xff09;&#xff0c;作用是跳到并选中下一个搜索匹配项。 具体说&#xff0c;Vim里执行搜索后&#xff0c;执行n操作只会跳转到下一个匹配项&#xff0c;而不选中它。但是我们往往需要对匹配项执行一些修改操作&#xff0c;例…...

解决登录Google账号遇到手机上Google账号无法验证的问题

文章目录 场景小插曲解决方案总结 场景 Google账号在新的设备上登录的时候&#xff0c;会要求在手机的Google上进行确认验证&#xff0c;而如果没有安装Google play就可能出现像我一样没有任何弹框&#xff0c;无法实现验证 小插曲 去年&#xff0c;我在笔记本上登录了Googl…...

基于YOLOv10深度学习的公共安全持刀行为检测系统研究与实现(PyQt5界面+数据集+训练代码)

随着社会的不断进步和城市化进程的加快&#xff0c;人口密度的增加和社会结构的复杂化使得公共安全问题日益凸显。近年来&#xff0c;各类公共安全事件频发&#xff0c;其中持刀行为作为一种典型的暴力行为&#xff0c;已成为威胁公共安全的严重因素之一。这种行为在公共场所发…...

HP6心率血压传感器

目录 一、介绍 1、工作原理概述 2、具体实现步骤 二、HP6的通信及配置 1、通信接口 2、器件地址/命令 3、校验 三、程序设计 ①IIC通信相关基础函数 ②HP6相关基础函数 一、介绍 HP6心率血压传感器的原理主要基于光电容积脉搏波描记法&#xff08;PPG&#xff09;&…...

深入理解 JVM 中的 G1 垃圾收集器原理、算法、过程和参数配置

引言 Java 虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称 GC&#xff09;是自动内存管理的核心部分。G1&#xff08;Garbage-First&#xff09;垃圾收集器是 Oracle 在 JDK 7u4 版本中引入的一种新型垃圾收集器&#xff0c;…...

细说敏捷:敏捷四会之standup meeting

上一篇文章中&#xff0c;我们讨论了 敏捷四会 中 冲刺计划会 的实施要点&#xff0c;本篇我们继续分享敏捷四会中实施最频繁&#xff0c;团队最容易实施但往往也最容易走形的第二个会议&#xff1a;每日站会 关于每日站会的误区 站会是一个比较有标志性的仪式活动&#xff0…...

MySQL系列之身份鉴别(安全)

导览 前言Q&#xff1a;如何保障MySQL数据库身份鉴别的有效性一、有效性检查1. 用户唯一2. 启用密码验证3. 是否存在空口令用户4. 是否启用口令复杂度校验5. 是否设置口令的有效期6. 是否限制登录失败尝试次数7. 是否设置&#xff08;超过尝试次数&#xff09;锁定的最小时长8.…...

vue3封装Element Plus table表格组件

支持绝大部分Element Plus原有设置属性&#xff0c;支持分页&#xff0c;支持动态适配高度 效果展示 组件代码&#xff1a; <template><div class"table-wrap" ref"tableWrap"><el-tableclass"w100 h100":data"tableInfo.…...

SFP+光模块介绍

SFP光模块介绍 1 SFP光模块简介(Small Form -Factor Pluggable)2 光模块管脚定义 1 SFP光模块简介(Small Form -Factor Pluggable) 光模块&#xff08;Optical Module&#xff09;由光电子器件、功能电路和光接口等组成&#xff0c;光电子器件包括激光发射器(Laser Transmitte…...

神经网络的初始化

目录 为什么需要初始化&#xff1f; 初始化的常用方法&#xff1a; 是否必须初始化&#xff1f; 初始化神经网络中的权重和偏置是深度学习模型训练中非常重要的一步&#xff0c;虽然在某些情况下不进行初始化也能训练出模型&#xff0c;但正确的初始化方法能够显著提高训练效…...

数据集搜集器0.01

我们使用Python的Tkinter库来创建GUI界面&#xff0c;并使用requests库来从360百科获取数据。下面是一个完整的示例代码&#xff0c;它包括了一个简单的GUI界面&#xff0c;用户可以输入问题&#xff0c;点击按钮后会从360百科获取相关信息&#xff0c;并显示在同一个Text组件中…...

【Lucene】搜索引擎和文档相关性评分 BM25 算法的工作原理

BM25 算法的工作原理&#xff1a; 什么是 BM25 算法&#xff1f; BM25 是一种流行的文本检索算法&#xff0c;广泛用于搜索引擎和文档相关性评分。它基于概率检索模型&#xff0c;旨在评估查询和文档之间的相关性。 核心公式 BM25 的公式如下&#xff1a; score ( D , Q ) …...

嵌入式Linux——文件类型

目录 普通文件 目录文件 目录文件的权限与管理 字符设备文件和块设备文件 符号链接文件 查看符号链接 删除符号链接 修改符号链接 管道文件 匿名管道&#xff08;Anonymous Pipe&#xff09; 匿名管道的特点&#xff1a; 使用示例&#xff1a; 命名管道&#xff08…...

ES6 模块化语法

目录 ES6 模块化语法 分别暴露 统一暴露 ​编辑 默认暴露 ES6 模块化引入方式 ES6 模块化语法 模块功能主要由两个命令构成&#xff1a;export 和 import。 ⚫ export 命令用于规定模块的对外接口&#xff08;哪些数据需要暴露&#xff0c;就在数据前面加上关键字即可…...

Gradio学习笔记记录

安装指令&#xff1a;pip install gradio方法介绍 Interface》用于构建一些简单的页面&#xff0c;可以直接用这个指令搞定 形式》接收三个参数分别为处理函数、输入、输出三部分&#xff0c;呈现一般左/上为输入&#xff0c;右或下为输出 fn&#xff1a;将用户界面 &#xff0…...

Node.js的下载与安装(支持各种新旧版本)

目录 1、node官网 2、node软件下载 3、软件安装&#xff08;完整版&#xff09; 1、node官网 Node.js — Download Node.jshttps://nodejs.org/en/download/package-manager 2、node软件下载 按照下图进行选择node版本&#xff08;真心推荐16/18&#xff0c;而是尽量是LTS…...

数据库和缓存的数据一致性 -20241124

问题描述 一致性 缓存中有数据&#xff0c;缓存的数据值数据库中的值缓存中本没有数据&#xff0c;数据库中的值最新值&#xff08;有请求查询数据库时&#xff0c;会将数据写入缓存&#xff0c;则变为上面的“一致”状态&#xff09; “数据不一致”&#xff1a; 缓存的数据值…...

【计算机网络】多路转接之select

系统提供select()来实现多路转接 IO 等 拷贝 -> select()只负责等待&#xff0c;可以一次等待多个fd select()本身没有数据拷贝的能力&#xff0c;拷贝要read()/write()来完成 一、select的使用 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exc…...

Linux命令思维导图

看到一个很不错的Linux命令思维导图&#xff0c;用机器翻译了一下&#xff0c;建议收藏备用。 附上英文版&#xff1a;...

自然语言处理(词嵌入和词向量的使用)

一、实验目的 1.了解词嵌入和词向量的基本概念及其在自然语言处理中的应用。 2.掌握使用One-Hot编码和Word2Vec模型构建词向量的方法。 3.掌握Doc2Vec模型构建文档向量的方法以及如何计算文档向量之间的相似度。 二、实验内容 &#xff08;1&#xff09;使用One-Hot编码构…...

量子感知机

神经网络类似于人类大脑&#xff0c;是模拟生物神经网络进行信息处理的一种数学模型。它能解决分类、回归等问题&#xff0c;是机器学习的重要组成部分。量子神经网络是将量子理论与神经网络相结合而产生的一种新型计算模式。1995年美国路易斯安那州立大学KAK教授首次提出了量子…...

[HarmonyOS] 解决HMRouter路由地址无法抽取的问题

解决HMRouter路由地址无法抽取的问题 背景 最近开始学习HarmonyOS开发&#xff0c;搭建项目的时候采用了 HMRouter 路由框架&#xff0c;在项目里使用到路由跳转&#xff0c;官方链接在这&#xff1a; https://gitee.com/hadss/hmrouter/blob/master/HMRouterLibrary/README…...

七天掌握SQL--->第四天:事务处理与并发控制

# 7天掌握SQL - 第四天&#xff1a;事务处理与并发控制 ## 目标 - 学习事务处理的基本概念&#xff0c;如ACID特性。 - 掌握并发控制的方法&#xff0c;如锁机制、事务隔离级别等。 - 通过实际案例练习事务处理和并发控制。 ## 1. 事务处理的基本概念 事务处理是数据库管理系…...

Docker学习笔记整理

这周不知道写点啥内容做个分享&#xff0c;但还是秉持学会分享的精神&#xff0c;粗略放一些Docker相关的问题和解答吧&#xff0c;后面有机会再补补再深挖深挖o(>﹏<)o 1. 容器VS虚拟机 虚拟机是一种带环境安装的解决方案&#xff08;资源完全隔离&#xff09;,有以下缺…...

PIMPL模式和D指针

一、PIMPL模式概念&#xff1a; Pimpl&#xff08;pointer to implementation, 指向实现的指针&#xff09;是一种用来对“类的接口与实现”进行解耦合的方法。就是将真正的实现细节的Implementor从类定义的头文件中分离出去&#xff0c;公有类通过一个私有指针指向隐藏的实现类…...