11-Figma-属性栏-填充、描边、投影、导出

Figma入门-铅笔钢笔工具 Figma原型图制作渐热,内置组件友好。本文记录上手Figma过程,首篇讨论铅笔和钢笔工具。铅笔随意绘画,数位板操作更佳;钢笔绘规则图形,含曲线,适用于特殊图标。 阅读详情
AI摘要

本文详细介绍了使用Figma进行设计的基础操作,包括如何应用填充、描边、投影效果及导出设计稿等内容。通过属性面板操作,读者可以学会设置纯色、渐变等不同类型的填充与描边,掌握投影效果的调整方法,并了解如何高效地管理和导出设计文件。

11-Figma-属性栏-填充、描边、投影、导出

常见操作

  • 填充

    • 纯色填充,属性面板操作

    • 线性渐变填充,属性面板操作,注意第二个点的透明度默认是完全透明

    • 其他渐变填充,属性面板操作,了解

    • 填充存为样式,属性面板操作

    • 填充样式修改,属性面板操作

    • 填充样式分离,属性面板操作

  • 描边

    • 纯色描边,属性面板操作

    • 线性渐变描边,属性面板操作,注意第二个点的透明度默认是完全透明

    • 其他渐变描边,属性面板操作,了解

    • 描边存为样式,属性面板操作

    • 描边样式修改,属性面板操作

    • 描边样式分离,属性面板操作

    • 实线虚线描边,属性面板操作

    • 描边在内部还是外部,属性面板操作

  • 投影

    • 投影效果,属性面板操作

    • 内阴影和外阴影切换,属性面板操作

    • 图层模糊,让自己模糊,属性面板操作

    • 背景模糊,属性面板操作

    • 毛玻璃效果,需要2个图层,原图不变,盖上去的图层用到背景模糊,需要半透明

  • 导出

    • 导出形状,框选形状,然后属性面板操作
  • 综合

    • 填充描边投影样式可以复制,ctrl+shift+c配合ctrl+shift+v
看图

在这里插入图片描述

Figma入门-填充、描边、效果、导出 Figma原型图制作友好,内置组件易上手。本文实操记录填充、描边、效果、导出,以登录按钮为例。填充=背景色,描边=边框,效果含投影等,导出可打组统一为图片。 阅读详情

相关推荐

Figma新手必看:如何用填充、描边和效果快速打造专业登录按钮(附导出技巧)

本文为Figma新手提供了创建专业登录按钮的完整指南,涵盖填充、描边和效果三大核心功能的应用技巧,并详细介绍了导出优化与开发交付的最佳实践。通过实战案例,帮助UI设计师快速掌握Figma的基础操作和高级技巧,提升设计效率和专业水平。

weixin_28487433的博客 322

Figma#1: 图形绘制

放寒假了,但又没完全放

weixin_62428841的博客 2万+

Figma设计系统实战:从零构建专业级开关组件库

在UI/UX设计中,组件化是构建高效、一致设计系统的核心理念。它通过将界面元素抽象为可复用的模块,遵循原子设计理论,从基础组件(如按钮、开关)到复杂模块逐层组合,确保设计的一致性和开发效率。其技术价值在于提升团队协作效率,减少重复劳动,并实现设计与代码的精准同步。这一理念在构建设计系统时尤为重要,广泛应用于Web、移动端等数字产品界面开发。本文聚焦于设计系统中看似基础却至关重要的开关(Toggle)组件,深入探讨如何在Figma中利用变体(Variants)和自动布局(Auto Layout)等高级功能,系

www.itmmd.com 501

Figma常用快捷键(Mac版)

Figma常用快捷键(Mac版)

SongD1114的博客 3万+

SVG核心技术解析:从矢量原理到前端高级应用实践

可缩放矢量图形(SVG)是一种基于XML语法的矢量图形格式,其核心原理在于使用数学公式而非像素点来描述图形,这使其具备无限缩放而不失真的特性。这项技术的核心价值在于解决了多分辨率设备适配的难题,同时因其文本本质,实现了对CSS样式与JavaScript交互的完美支持,极大地提升了开发效率与用户体验。在应用场景上,SVG广泛应用于响应式图标系统、数据可视化图表、交互动画以及需要高可访问性的Web内容。特别是在图标管理方面,SVG Sprite技术通过整合多个图标符号并利用<use>元素引用,有效减少了HTTP

weixin_33726318的博客 392

AI课程PPT模板选择指南:技术类课件视觉认知减负实战

PPT模板不仅是排版工具,更是影响知识传递效率的关键认知接口。对于AI、机器学习、大模型等技术类课程,传统商务风模板常因字体渲染失真、图表装饰过度、导出矢量丢失等问题,显著增加学员的认知负荷。其核心原理在于人眼对代码可读性、数学公式保真度、架构图语义清晰度的敏感阈值远高于普通内容。技术类PPT的价值在于降低视觉干扰、保障信息无损传递、适配多端阅读场景。典型应用场景包括提示词工程教学、Transformer原理拆解、RAG流程可视化、LoRA微调对比等需高精度信息呈现的环节。本文聚焦AI博主真实交付痛点,提供

weixin_34095889的博客 310

OpenPencil 绘制形状完全指南:矩形、椭圆、线条、画框与分区实战

在 AI 原生设计编辑器 OpenPencil 中,所有设计都从画布上的基础形状开始。本文围绕官方用户指南《Dessiner des formes》展开,系统讲解如何通过底部工具栏创建矩形、椭圆、线条、画框(Frame)与分区(Section),并深入剖析多边形、星形的调用方式,以及填充、描边、圆角与效果四大属性体系。读完本文,你将掌握完整的形状绘制工作流:快捷键、受约束绘制技巧、属性面板的每一个

gitblog_00598的博客 390

Midjourney sref框架控制原理与工业级构造法

sref(style reference)是Midjourney中用于构图初始化的关键机制,其本质并非风格迁移,而是向模型注入画面容器的负空间结构,直接影响框架的形状、纵深与锚定关系。该技术基于Layout Phase的像素级拓扑识别,依赖高对比度、无干扰、闭合可控的负空间通道,对图像物理边界实现精准定义。相比泛化prompt描述,sref能显著提升框架复现稳定性与跨图一致性,广泛应用于电商主图统一展柜、IP系列化视觉包装、艺术印刷嵌套构图等强结构需求场景。本文聚焦sref在框架类任务中的底层逻辑、可验证构

aocaiti5781的博客 443

Figma 变量与设计 Token API 实战:集合创建、作用域、别名绑定与代码语法全解(Novu figma-use 技能深度参考)

> 本文基于 Novu 仓库中 Agent 技能库的 `.agents/skills/figma-use/references/variable-patterns.md` 展开。该文档是 [figma-use 技能](https://link.gitcode.com/i/0bc451e4e4caabbf021f42a0f7885856)(供 Agent 通过 `use_figma` 工具在图文件中

gitblog_00065的博客 381

AE CEP扩展开发:UI模型生成器提升动效设计效率

在动态图形与UI动效设计领域,Adobe After Effects(AE)是制作交互动画和产品演示的核心工具。其基于时间轴和关键帧的动画原理,能够精准控制界面元素的过渡与状态变化,为UI/UX设计提供了强大的动态表达能力。然而,传统工作流中,设计师需先在Sketch或Figma中完成视觉稿,再导入AE进行动画制作,频繁的工具切换和图层结构调整严重影响了创作效率。为了解决这一痛点,基于Adobe CEP(Common Extensible Platform)扩展开发技术,开发者可以创建自定义面板,直接在AE

WGH100817的博客 621

Sqribble:面向非设计师的文档工业化流水线

文档自动化并非简单的内容生成,而是基于结构化规范、确定性排版与领域适配规则的工程化交付体系。其核心原理在于将出版级格式约束(如章节编号、图表题注、字体合规、Tagged PDF)封装为可复用模板,并通过语义解析引擎对Word、URL等多源内容进行结构化解析,实现从文本到专业PDF的闭环转化。技术价值体现在交付确定性、跨角色协作提效与行业合规基线保障,广泛应用于白皮书制作、SOP手册、法律文书、培训资料等需高频、高质、高信度PDF输出的场景。Sqribble代表的正是自动化工程思维在内容生产领域的深度落地。

weixin_30697239的博客 395

基于HarmonyOS API 24旧书回收应用RecycleOrder 接口中 scheduleDate、trackingNo 可选属性(带 ?),“渐进式数据填充“的建模方式反映了业务现实状态

在 HarmonyOS NEXT 正式商用的背景下,ArkTS 作为鸿蒙生态的官方应用开发语言,正在从传统的命令式 UI 开发范式向声明式 UI 范式全面迁移。ArkUI 框架以组件化、声明式、状态驱动为核心特征,要求开发者以"描述 UI 应该是什么样"而非"一步步操作 UI 怎么变"的思维方式构建界面。

2401_86031952的博客 201

flow-kit:绘制流箭头.....您也可以在Figma中使用它,只需导入它,它就会将其转换为Figma文件!

flow-kit:绘制流箭头.....您也可以在Figma中使用它,只需导入它,它就会将其转换为Figma文件!

Figma开发模式在原生App开发中的边界:为什么不能替代设计标注

设计师与开发者的协作中,设计交付物一直扮演着关键角色。从早期像素级标注到如今Figma Dev Mode的一键复制参数,工具链不断缩短了“设计稿到代码”的距离。其原理是直接读取图层属性和样式值,在Web场景下凭借CSS的强对应关系能大幅提升开发效率,甚至生成可用代码。然而,原生App的技术体系完全不同——pt、dp、sp的换算,安全区差异,动态字体缩放,状态流转规则,这些都不存在于静态设计稿中。Dev Mode只能回答“元素此刻长什么样”,无法解释“真机中应如何布局”。当自动化生成代码工具流行时,反而放大了

weixin_28487433的博客 114

集成calibre到cadence virtuoso环境中 load: can‘t access file - “/opt/eda/Mentor/lib/calibre.skl“

项目场景: 设想是将Calibre集成到cadence virtuoso中,但网上的解决办法尝试过在本机上实验都有点问题,因此想记录下来我的解决办法仅供参考。 问题描述: 安装好cadence, calibre之后打开virtuoso,CIW窗口显示 *Error* load: can't access file - "/opt/eda/Mentor/lib/calibre.skl" 问题是出在calibre.skl的加载路径出错,尝试网上的在工程目录下修改.cdsinit文件,添加calibre安装

weixin_52714276的博客 1万+

scanpy单细胞转录组python教程(四):单样本数据分析之降维聚类及细胞注释

本文介绍了使用scanpy进行单细胞转录组分析的降维聚类和细胞注释流程。首先通过PCA降维并可视化主成分贡献,然后使用不同分辨率参数(0.2-1.0)进行Leiden聚类。通过Wilcoxon检验鉴定marker基因,并基于经典marker基因手动注释细胞类型。最后对低质量细胞群进行过滤,并重新计算邻居图和UMAP可视化。流程中包含PCA方差分析、多分辨率聚类比较、marker基因筛选和基于UMAP的细胞类型可视化等关键步骤,为后续分析奠定基础。

qq_42090739的博客 944

CSS border渐变色实战:border-image与linear-gradient深度应用

border渐变色是现代CSS中提升UI表现力的关键技术,其本质是利用border-image属性将linear-gradient等图像源映射到元素边框区域,实现原生、高性能的视觉增强。相比outline或box-shadow模拟方案,border-image具备原生渲染层支持、完美兼容border-radius、可transition动画及响应式稳定性等核心优势。该技术广泛应用于组件库(如Ant Design、Chakra UI)的卡片、按钮与状态容器中,显著降低DOM冗余与JS依赖。工程实践中需协同bo

weixin_34121282的博客 412

SAP项目中 Waterfall vs Agile 的深度对比分析背景:方法论的演进SAP项目实施方法论经历了显著的代际更替。早期以 ASAP(Accelerated SAP) 为代表,采用经典瀑

本文对比分析了SAP项目实施中瀑布模型(ASAP)与敏捷方法(SAP Activate)的核心差异。瀑布模型采用线性流程,需求固定但变更成本高;敏捷方法则通过迭代开发实现动态调整,强调最佳实践和用户持续参与。文章指出,SAP系统的复杂性使纯粹敏捷难以实施,需在标准化与定制化间取得平衡。最终建议根据项目特性选择方法论:稳定需求适用瀑布模型,变化频繁则推荐敏捷,而SAP Activate本质上是两者的结构化融合,代表未来趋势。关键在于匹配项目实际需求,而非盲目追随方法论潮流。

金牌架构师 345

黑马开山之作!一个非常适合大学生赚钱的“项目”!!!

大家好,我是播妞!今天咱们开篇点题,本篇文章就是要教大家搞钱,利用AIGC搞钱!!!AIGC火爆出圈,不少人应该感受到了这波热潮,越来越多的公司、开发者、普通职场人纷纷入局。或许之前你还觉得这个离你很遥远,但现在,一些反应快的玩家,已经靠着AIGC赚到了几十万甚至上百万......简单来说,AIGC就是指利用人工智能来生成内容,包括文字、图像、音频和视频等。在AI大趋势面前,AIGC可以说是目前新...

传智播客的专栏 279

手把手教你学Simulink--基于Simulink的风力发电系统用双馈电机控制仿真建模

特点高效节能:在广泛的风速范围内保持高效的能量转换。独立控制有功和无功功率:通过控制转子电流实现对有功和无功功率的独立调节。较低的成本:相比直接驱动或全功率变流器方案,成本较低。挑战控制复杂度较高:需要复杂的控制算法来实现有功和无功功率的解耦控制。对电网波动敏感:需要良好的稳定性控制策略以应对电网电压波动。利用Simscape Electrical中的模块构建DFIG的物理模型,配置参数如电阻、电感、极对数等。matlab深色版本% 添加DFIG电机模块。

MHD0815的博客 351

【产品经理修炼之道】- 优惠券系统从入门到精通(二)

在电商平台中,优惠券的使用场景与频次都很高。那么如何做好一个优惠券系统呢?本文总结了相关流程和设计思路,希望对你有所帮助。上一篇与大家分享了架构中的前端应用、生命周期、优惠券管理中OpenAPI 、基础系统,今天继续与大家分享架构图中优惠券模板部分。

xiaoli8748的专栏 1292

NVIDIA DESIGN.md 深度拆解:单强调色 + 工程级几何的营销设计系统与 AI 生成实战指南

本篇技术指南以开源仓库 awesome-design-md 中的 [NVIDIA 设计系统分析文档](https://link.gitcode.com/i/5f0396f6db1ba22d6fc4b48edbeebe9b) 为骨架,完整拆解 NVIDIA 官网营销体系的双画布表面架构、`#76b900` 单一强调色策略、2px 硬朗几何与 12 级 NVIDIA-EMEA 字体层级,并结合仓库 [

gitblog_00131的博客 506

YOLOv8优化:独家创新(SC_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

独家创新(SC_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐

①答疑群聊服务;②YOLO大模型知识问答系统;③计算机视觉论文生成智能体; 4877

MoneyPrinter:输入主题即可生成 YouTube Shorts,300 段内一键上传多平台

视频做好后,上传、改标题、换封面、配字幕,每个平台都要手动折腾一遍,这才是最耗时间的部分。MoneyPrinter 帮你把这一步省掉:你只需输入视频主题,它调用本地 Ollama 模型写脚本、合成配音、剪辑 Pexels 素材,产出一支 YouTube Shorts,还能按你的设置自动上传。 ## 项目速览 MoneyPrinter 是一个 Python 写作的短视频自动化流水线:主题进,成片

gitblog_00441的博客 992

【四足机器人项目实战】四足机器人腿部机械结构设计

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录系列文章目录前言 前言 认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长! 本文先对四足机器人–腿部机械结构设计做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章 提示:以下是本篇文章正文内容 为了减轻腿部惯量,使用有限元分析着重进行轻量化设计,小腿采用工字梁方案,大腿采用内部镂方案,并使用1.5 mm的AL 6061硬质材料,轻量化的腿部设了腿部运动时摆动

qq_35635374的博客 7540

星载SAR的各项指标解读(史上最全)

一、系统指标 系统指标主要指雷达系统的通用的指标,以及和卫星整星相关的指标,主要有一下几项: 工作频段: 雷达体制: 极化方式: 设计s

9277
上一篇: 10-Figma-属性栏-对齐、分布、坐标、图层操作
下一篇: 12-Figma-插件安装与使用
billycoder
博客等级 码龄17年 171粉丝 188原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值