27-Figma-发现页面制作

最新推荐文章于 2025-11-08 01:18:18 发布

原创最新推荐文章于 2025-11-08 01:18:18 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#figma

ui设计专栏收录该内容

38 篇文章

订阅专栏

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

27-Figma-发现页面制作

效果

在这里插入图片描述

1.搜索完成

在这里插入图片描述

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

2.切换效果

在这里插入图片描述

变体组件

3.框的阴影效果

在这里插入图片描述

4.绘制列表组件

在这里插入图片描述

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

billycoder

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

11-17

1192

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

29-Figma-我的页面制作

billycoder的专栏

01-23

949

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

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

GitHubDaily原型设计：使用Figma快速构建产品界面原型

最新发布

gitblog_00763的博客

11-08

378

你是否还在为产品原型设计效率低下而烦恼？是否想快速将创意转化为可视化界面？本文将带你使用Figma从零开始构建GitHubDaily的产品界面原型，让你在1小时内掌握高效原型设计技巧。读完本文，你将学会Figma基础操作、组件复用、响应式设计以及原型交互的实现方法。 ## 准备工作在开始设计之前，我们需要准备Figma工具和项目资源。Figma是一款基于云端的设计工具，支持实时协作和多平台使

软件产品设计-figma

iSssssw的博客

06-21

708

参加线下或在线学习活动：可以参加 Figma 的线下或在线学习活动，这些学习活动通常由业内专家或资深设计师讲解，会介绍 Figma 的最新技术和工作流程，可以了解最新的行业趋势和设计相关的经验。免费在线课程：Figma 官方提供了免费的在线课程，这些课程涵盖了 Figma 的主要内容和特点，适合初学者和有一定基础的用户，学完后会对 Figma 的使用有更深入的了解。总之，Figma 的实时协作、跨平台支持、自动同步、强大的矢量编辑器以及兼容性良好，让其成为了一款非常优秀的云端界面设计工具。

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

12-28

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

figma-html:将Figma设计转换为HTML，React，Vue，Angular等！

04-30

通过将Figma设计转换为高质量HTML，React，Vue，Svelte，Angular，Solid等代码它是如何工作的将设计导出为代码确保要导入的所有图层均按照所述使用自动布局单击“获取代码”按钮以启动Builder.io编辑器进行最后的调整，然后单击Builder顶部的“获取代码”以查看代码输出，或将其复制并粘贴到Builder帐户的内容以实时发布将网页导入到Figma设计在Figma中，打开一个新的或现有的文档，然后单击cmd + /并搜索“ html figma”，然后按Enter 输入您要导入的URL 为什么？立即将设计转换为实时网页和代码轻松导入真实的现场样式，以作为设计和原型的起点快速将实际站点组件转换为设计组件易于从故事书等导入 Chrome扩展程序想要捕获身份验证墙后面的页面，还是要导航到的特定状态？程序适合您！使用图书馆 // npm

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

设计の诗

04-13

2390

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

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

weixin_47301844的博客

10-21

2124

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

Figma的一键生成网页指导

weixin_60523038的博客

07-14

1万+

无

极简风支付应用界面UI素材 - Figma制作体验

文件扩展名“.fig”表明这是一个Figma项目文件，它包含了所有的设计元素、页面、图层以及可能的设计说明。这个文件是设计师用于构建和维护整个UI套件的主文件。综上所述，本资源包适合UI设计师在进行iOS平台的支付...

Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定

士多啤梨先生の博客

01-02

2390

Figma-Low-Code 是一个开源项目，能够直接将 Figma 设计转换为 Vue.js 应用程序，减少设计师与开发者之间的交接时间，支持低代码渲染和数据绑定。

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 手动地转到发布页面。下载

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

04-10

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

XBOX-ANIMATE:从figma播放到svg并用代码制作动画来创建xbox徽标

05-27

在本项目中，“XBOX-ANIMATE: 从figma播放到svg并用代码制作动画来创建xbox徽标”是一个教程，旨在指导用户如何利用设计工具Figma创建Xbox徽标，并将其转换为SVG格式，进而通过HTML和可能的CSS或JavaScript实现动态...

Trae x Figma MCP一键将设计稿转化为精美网页