参考：

Figma Tutorial: Images

3 Ways to Insert Image

1. rectangle / frame + fill

画一个 rectangle / frame 然后去 fill 选择 image then browse an image to insert.

注: rectangle 就是 HTML 的 <img>, frame 就是 HTML 的 div + background-image

2. ctrl + shift + k

使用 keyboard shortcut 可以快速实现第 1 个 way

3. drag & drop, copy & paste

图片配置

Fill 是 css 的 cover (填满框, 牺牲图片的内容)

Fit 是 css 的 contain (保留所有图片内容, 让框留白)

Crop 是截图咯

Tile 是重复图片填满框

右边是旋转

下半段的配置就是亮度, 倒影等等了

Figma 学习笔记 – Image的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. 【解决方案】智能UI自动化测试

    你的UI自动化追得上业务的变更和UI更迭吗?当今瞬息万变的时代,成千上万的App围绕着现代人生活的点点滴滴.为了满足用户的好的体验和时刻的新鲜感,这些App需要时刻保持变化,也给 UI自动化落地实施带 ...

  2. Swift开发基础04-枚举

    基本用法 enum Direction { case north case south case east case west } enum Direction { case north, south ...

  3. Docker PHP容器安装composer

    1.进入php容器docker exec -it cb6c1fe83bff(php容器ID) bash2.安装composerphp -r "copy('https://install.ph ...

  4. freemarker+minio实现页面静态化

    什么是页面静态化? 将原本动态生成的网页内容通过某种形式转化为html并存储在服务器上,当用户请求这些页面时就不需要执行逻辑运算和数据库读 优点: 性能:提高页面加载速度和响应速度,还可以减轻数据库. ...

  5. 假期小结4hive学习beeline

    学习Beeline是连接和管理Hive的一种有效方式.Beeline是一个用于与Hive交互的命令行工具,它支持通过JDBC连接到Hive服务器,并执行查询和管理Hive表等操作. 以下是一些关于Be ...

  6. FFmpeg开发笔记（四十二）使用ZLMediaKit开启SRT视频直播服务

    ​<FFmpeg开发实战:从零基础到短视频上线>一书在第10章介绍了轻量级流媒体服务器MediaMTX,通过该工具可以测试RTSP/RTMP等流媒体协议的推拉流.不过MediaMTX的功能 ...

  7. PHP转Go系列 | Carbon 时间处理工具的使用姿势

    大家好,我是码农先森. 在日常的开发过程中经常会遇到对时间的处理,比如将时间戳进行格式化.获取昨天或上周或上个月的时间.基于当前时间进行加减等场景的使用.在 PHP 语言中有一个针对时间处理的原生函数 ...

  8. 光刻机巨头ASML公布了其最新的品牌短片《站在巨人的肩膀上》

    光刻机巨头ASML公布了其最新的品牌短片<站在巨人的肩膀上>: 荷兰光刻机:ASML使用AI工具midjourney和runway制作宣传片 这个时长1分50秒短片的特别地方在于,它是完全 ...

  9. jax框架的 Pallas 方式的GPU扩展不可用

    说下深度学习框架的GPU扩展功能的部分,也就是使用个人定制化的GPU代码编写方式来为深度学习框架做扩展. 深度学习框架本身就是一种对GPU功能的一种封装和调用,但是由于太high-level,因此就会 ...

  10. 安装wsl的必备操作——开启CPU虚拟化——WslRegisterDistribution failed with error_ 0x8007019e 0x800701b 0x80370102 请启用虚拟机平台

    参考: https://www.cnblogs.com/smdtxz/p/16837946.html https://www.cnblogs.com/wenonly/p/17206040.html h ...