Figma入门-旋转效果

Figma入门-旋转效果

前言

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

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

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

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

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

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

本篇我们来讨论旋转效果。

旋转效果

我们以一个普通的箭头形状为例:

我们可以一个个复制,然后用边缘的旋转工具进行旋转

然后不断地 Command(Ctrl) + D 进行重复操作

可以得到下面的结果。

但是这样的图形我们很难确保它是规则的排列

所以我们可以借助 RotateCopies 插件来完成这个旋转复制操作。

安装好插件后,我们选中这个箭头,打开插件

这个插件有三种模式:按中心点旋转、按顶点旋转、按自定义点旋转

我们以一个三角形为例,放出三种旋转方式的结果

可以看到,排列非常规则,加上一点填充、阴影、背景之类的效果,就可以做出很多好看的效果出来。

总结

在本篇文章中,我们探讨了如何在 Figma 中实现旋转效果。

首先,我们介绍了如何手动使用旋转工具和 Command(Ctrl) + D 进行重复操作来创建旋转图形,但这种方法难以确保图形排列的规则性。

接着,我们推荐了 RotateCopies 插件,通过该插件可以更方便地实现按中心点、顶点或自定义点的旋转复制操作。

最后,我们展示了使用插件后的效果图,证明了其在创建规则排列图形方面的优势。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

### Figma与UniApp的结合使用 #### 设计阶段准备 为了使Figma中的设计能够顺利转换到UniApp项目中,设计师应遵循一些特定的设计原则。这些原则有助于确保最终产品不仅视觉上一致,而且功能也能良好匹配。 - **尺寸适配**:考虑到不同设备屏幕大小,在Figma里创建原型时要采用响应式布局思路[^2]。 - **组件一致性**:尽可能利用现有的UI库资源来构建页面元素,比如Material Design风格的控件,这有利于后续开发人员找到对应的Vue组件进行映射[^1]。 #### 导出资产 当设计方案完成后,下一步是从Figma导出必要的图形和其他静态资源文件。通常情况下,会将图片保存为WebP格式以减小体积并保持质量;对于图标,则推荐SVG矢量图形式以便于缩放而不失真。 ```bash figma export assets /path/to/export --format=webp,svg ``` #### 转换流程概述 目前并没有官方提供的自动化工具可以直接把整个Figma文档一键迁移到UniApp工程内。但是可以通过以下几步手动操作实现: - 使用插件辅助提取样式信息,例如[Figma Tokens](https://github.com/romainlanz/figma-tokens),它可以生成JSON配置文件描述颜色、字体等属性设置- 开发者依据上述获取的数据调整`uni.css`或者单独定义主题覆盖层; - 对照着高保真的效果图逐一搭建界面结构,期间可能涉及到安装额外依赖项如[muse-ui]或其他第三方包满足特殊需求。 #### 实际案例分析 假设有一个简单的登录表单场景,先看下原始的Figma画板截图作为参照物。接着按照之前提到的方法论逐步实施转化过程... ![Login Form Example](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...) 最后得到的效果如下所示: ```html <template> <view class="container"> <!-- ... --> <input type="text" placeholder="Username"/> <button @click="submit">Sign In</button> <!-- ... --> </view> </template> <script setup lang="ts"> import { ref } from 'vue'; const submit = () => { console.log('Form submitted'); }; </script> <style scoped src="./styles/login-form.css"></style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我码玄黄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值