参考：

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. log4js 的安装设置和实例

    1. 安装 yarn add log4js -D 2.设置 const log4js = require('log4js') 3.实例 var log = log4js.getLogger(); // ...

  2. C#/.NET这些实用的编程技巧你都会了吗？

    DotNet Exercises介绍 DotNetGuide专栏C#/.NET/.NET Core编程常用语法.算法.技巧.中间件.类库练习集,配套详细的文章教程讲解,助你快速掌握C#/.NET/.N ...

  3. 如何安装 Arch Linux 操作系统？

    Arch Linux Install 安装 到使用 Arch 说明前面或多或少已经接触过 Debian 系列和 Red Hat 系列相关 Linux 发行版,对于虚拟化软件 VirtualBox 如何 ...

  4. 微服务：openFeign

    openFeign是一个声明式http客户端.作用:基于springMVC常见注解,帮我们更优雅的实现http请求 引入依赖 <!--openFeign--> <dependency ...

  5. linux环境部署搭建流程

    linux环境部署搭建流程 1,ubuntu/centos系统安装 2,ip网络配置 3,路由和防火墙 4,时间同步服务器 5,ssh协议配置(Windows安装xshell/secureCRT) 6 ...

  6. 【Java】图片上传逻辑

    后台逻辑: 后台服务,用Dubbo框架作为一个文件微服务 package cn.ymcd.aisw.service; import cn.ymcd.aisw.dto.RpcResult; /** * ...

  7. ubuntu编译软件报错：fatal error: libnet.h: No such file or directory

    参考: https://blog.csdn.net/wuyou1995/article/details/104742326/ ------------------------------------- ...

  8. Singleton bean creation not allowed while singletons of this factory are in destruction

    1.背景 一直都是正常运行的程序,检查日志发现有一条报错如下: org.springframework.beans.factory.BeanCreationNotAllowedException: E ...

  9. 【客户案例】白鲸开源WhaleStudio助力某证券公司打造全面数据解决方案：探析DataOps平台革新与应用

    背景 近年来随着国际形势的变化,信创产业成为我国国家战略的一部分.一直以来,一直以来,全球 ICT 产业底层标准.架构.产品.生态等要素均由国外公司或机构制定和控制,使我国 ICT 产业乃至广大用户面 ...

  10. Java核心编程-第一卷:基础知识

    public static void main(String[] args) { BigInteger bigInteger1 = BigInteger.probablePrime(20, new R ...