参考：

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. 推荐2款.NET开源、轻便、实用的Windows桌面启动器

    Flow Launcher Flow Launcher是一款.NET开源(MIT License).免费.功能强大.方便实用的 Windows 文件搜索和应用程序启动器,能够帮助你快速查找文件.启动应 ...

  2. EasyBPM进销存之物料管理

    本文是EasyBPM平台实现进销存系列中的一篇,主要讲述物料的相关的管理. 在ERP系统中,"物料"一词有着广泛的含义,它是所有产品.半成品.在制品.原材料.配套件.协作件.易耗品 ...

  3. leetcode中等(字符串)：[3, 6, 8, 49, 179, 299, 524, 539, 609, 648]

    目录 3. 无重复字符的最长子串 6. Z 字形变换 8. 字符串转换整数 (atoi) 49. 字母异位词分组 179. 最大数 299. 猜数字游戏 524. 通过删除字母匹配到字典里最长单词 5 ...

  4. [oeasy]python0115_西里尔字符集_Cyrillic_俄文字符编码_KOI_8859系列

    各语言字符编码 回忆上次内容 上次回顾了 非ascii的拉丁字符编码的进化过程 0-127 是 ascii 的领域   西欧.北欧语言 大多使用 拉丁字符 由iso组织 制定iso-8859-1   ...

  5. 【JavaScript高级02】JavaScript第一大神兽：原型和原型链

    1,函数中的prototype属性 每个函数都会有一个属性prototy,该属性默认指向一个空Object对象,而这个空的Object对象被称之为原型对象. <script > conso ...

  6. windows server dhcp与AD域

    创建两台windows server 2016 同一个网络适配器 windows1 配置window1手动网络 安装域 设置密码下一步下一步 重启 完成域安装后创建用户 配置windows1 dhcp ...

  7. SemanticKernel/C#：使用Ollama中的对话模型与嵌入模型用于本地离线场景

    前言 上一篇文章介绍了使用SemanticKernel/C#的RAG简易实践,在上篇文章中我使用的是兼容OpenAI格式的在线API,但实际上会有很多本地离线的场景.今天跟大家介绍一下在Semanti ...

  8. 【C】Re07 二级指针，指针与参数

    一.二级指针: 变量 = 内存地址 + 存储值: 指针 = 内存地址 + 变量内存地址: 二级指针 = 内存地址 + 指针内存地址: 多级指针 = 内存地址 + 上一级内存地址: void moreP ...

  9. 【Vue】Re17 Router 第四部分(参数传递，守卫函数)

    一.案例搭建 新建Profile组件 组件写好内容后配置路由 { path : '/profile', component : () => import('../components/Profi ...

  10. 【Mybatis-Plus】06 代码生成器 CodeGenerator

    导入生成器需要的依赖坐标: <dependency> <groupId>com.baomidou</groupId> <artifactId>mybat ...