27-Figma-发现页面制作

最新推荐文章于 2025-01-15 21:34:40 发布

billycoder

最新推荐文章于 2025-01-15 21:34:40 发布

阅读量877

点赞数

CC 4.0 BY-SA版权

分类专栏： ui设计文章标签： figma

本文链接：https://blog.csdn.net/billycoder/article/details/122652372

ui设计专栏收录该内容

38 篇文章

订阅专栏

本文介绍使用Figma进行页面设计的方法，包括搜索组件的设计、自动布局的应用、变体组件的切换效果实现及列表组件的绘制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

27-Figma-发现页面制作

效果

在这里插入图片描述

1.搜索完成

在这里插入图片描述

搜索图标+文字，自动布局
（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右
ios规范，这部分高度为44

2.切换效果

在这里插入图片描述

变体组件

3.框的阴影效果

在这里插入图片描述

4.绘制列表组件

在这里插入图片描述

主要自动布局控制位置就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Figma：高级原型与动画效果制作_2024-07-22_00-41-55.Tex

11-17

1007

选择工具：用于移动和选择对象。矩形工具：创建矩形和正方形。椭圆工具：绘制圆形和椭圆。多边形工具：绘制多边形。文本工具：添加和编辑文本。钢笔工具：绘制自定义形状和路径。填充和描边工具：调整对象的颜色和边框。图层操作：创建、删除、调整图层顺序。Figma允许你自定义元素之间的过渡效果，如淡入淡出、滑动或缩放，以增强原型的视觉体验。

第二课：Figma 界面认识

qq_41768447的博客

07-06

1328

Figma 正常情况下，文件直接保存在线上，如需要保存在本地，双击项目进入文件，选择左上角 Figma 图标，选择文件，保存本地副本，即可将对应的项目下载到本地；搜索需要的内容，除了有对应的项目文件外，还会提供一些对应的插件，点击左侧插件，进入插件页面，选择所需插件，点击后方的 Try it out 即可在线安装；进入 Figma 后，可以查看最近浏览的内容，官方也推荐了一些基础的项目，点击右上角 Design file（设计文件）即可创建项目；注：网页版和本地版界面样式布局一致。

参与评论您还未登录，请先登录后发表或查看评论

简洁的figma网页模板_基于网格设计.zip

12-28

简洁的figma网页模板，基于网格设计 adobe xd网页模板、figma网页模板、xd ui素材、网页模板

29-Figma-我的页面制作

billycoder的专栏

01-23

909

29-Figma-我的页面制作效果 1.绘制三个圆 2.设置图层模糊 3.让三个圆只在矩形画框中显示拖动3个圆，同时按住ctrl，把3个圆放入画框中，利用画框的裁剪功能，只显示画框区域内容不想3个圆的位置发生改变，可以在图层面板锁定3个圆，减少误触 4.内容部分吸管工具，i 5.4个图标（图标+文字）自动布局 4x（图标+文字）自动布局图标切换，选中图标，属性面板中有交换实例 6.列表组件自动布局 ...

2分钟上手用Figma绘制网站页面设计图

weixin_47301844的博客

10-21

1449

8.如果想对页面中各元素的位置布局更有把握，可以打开右边栏中Design里倒数第二个Layout Grid 选择网格或其他参考线。5.如果要使用模板：在左侧的Assets中搜索下载你需要的模板例如 shop。6.如果想绘制矩形等图形，在最下方工具栏中选择相应图形绘制和移动缩放。4.按A键在页面右侧选择你要设计的页面的大小规格。7.如果想输入文字，在最下方工具栏中选择“T”1.登陆官网下载应用或网页端使用。2.注册\登录及走完新手指引。

Figma的一键生成网页指导

最新发布

一颗优雅草科技-央千澈的CSDN博客~只想无穷无尽的学习~作息早8-晚8

01-15

1643

Figma2Flutter 和 Figma to Code (HTML, Tailwind, Flutter, SwiftUI) 都是非常有用的插件，但它们各有优缺点，适合不同需求。可能大家听过过蓝湖可以转ui设计图为vue.js，react native代码，那么请问听说过将figma的设计图转换为flutter源代码吗?其次注意，在导出之前要选择屏幕（所谓选择对应的页面），选择页面添加对应的注释，这样才可以正确的转代码。查看压缩包的目录和文件，已经成功转换为flutter代码，

设计提效-Figma技巧篇

m0_73257876的博客

09-06

4356

触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。

Radio-Web-Design:Aedes制作的Figma概念的网页设计

04-10

Radio-Web-Design:Aedes制作的Figma概念的网页设计是一种创新的网页设计项目，它展示了如何将Figma的设计理念转化为实际的Web页面。Figma是一款云端协作的UI/UX设计工具，它允许设计师们创建、共享和协作设计，特别...

ChromedFigma：Figma html导出chrome扩展

01-30

镀Chrome 将Figma页面的原型从浏览器中打开的当前文件导出为使用图像映射链接的静态html文件。重要提示：请首先在扩展选项页面中设置您的Figma个人访问令牌。笔记：为了模拟Figma的“后退”交互，您可以在元素名称中使用字符串__back__ （该元素尚未过渡到另一个元素），并且该元素将使用[removed]history.back();导出到链接[removed]history.back(); 。假定您已经将帧导出到文件夹中的* .png图像文件中。然后，将导出的* .html文件复制到同一文件夹中，然后打开其中一个。如何使用在本地硬盘驱动器的./unpacked文件夹中下载存档文件并解压缩，在Chrome扩展程序中启用开发人员模式，单击“加载解压缩”，然后选择解压缩的ChromedFigma文件夹。

FigmaGen:使用Figma API生成样式代码的命令行工具

05-25

FigmaGen FigmaGen-一个命令行工具，可使用Figma组件为UI样式生成代码。它可以生成：颜色样式文字样式导航 Figma文件世代设定颜色文字样式执照安装可可豆要使用CocoaPods安装FigmaGen，请将以下行添加到Podfile ： pod 'FigmaGen' , '~> 1.0.0' 然后在终端中运行： $ pod install --repo-update 如果使用CocoaPods安装了FigmaGen，则在使用generate命令时，应该使用Pods/FigmaGen文件夹的相对路径： $ Pods/FigmaGen/figmagen generate 自制酒要使用Homebrew安装FigmaGen，请运行： $ brew install hhru/tap/FigmaGen 手动地转到发布页面。下载

【Figma技巧】如何把Figma里面每个frame分散为单独的page

设计の诗

04-13

2274

在Scripter插件或浏览器控制台里输入以下代码： let af = figma.currentPage.findAll(n => { return n.type === "FRAME" }) af.forEach(n => { let p = figma.createPage() p.appendChild(n) }) 以上代码来自@Mr. Biscuit

【Figma】入门第一篇页面和功能简介初学者必看

JU_OLG的博客

10-10

3981

本文以网页版 figma 英文为例，简单介绍一下工作台界面上的各个模块的功能，给刚开始使用 figma 的学习者提供一些参考，加速上手。

UI设计系列——Figma基础使用day1-1

qq_51553982的博客

03-15

8942

UI设计系列——Figma基础使用Figma下载文档社区（中国）为什么选择Figma汉化基本操作创建新设计修改项目名使用步骤1.新建画布2.添加页面元素2.1 使用标尺（快捷键shift+R）2.2页面元素属性蒙版1.添加页面元素2.复制底层模板3.打组（ctrl + G）4.设置蒙版5.放置替换组件中添加头像（插件切换）1.安装插件选择下载使用组件中添加图片（自定义） Figma下载 figmachina.com/ 文档 https://figmachina.com/guide/ 社区（中国） figm

figma设计_5位来自杂乱无章的设计师的Figma技巧

weixin_26732881的博客

08-04

1444

figma设计When starting a design project, a fast pace and multiple design iterations can easily lead to a cluttered mess. Taking the time in the beginning to build good organizational habits will save yo...

Figma入门-实战列表页

我码玄黄的博客

12-12

1560

本文介绍Figma上手过程，实操实现Web端经典列表页，包括标题、搜索框、列表项和分页。采用侧边栏+主内容区布局，使用自动布局实现内外边距，绘制内容列表和分页器，最后进行微调。

figma的一些用法(一)

Winfredzhang的博客

12-17

8384

1、新建frame画布。 2、圆角按钮。 3、放大字体并设置效果。