参考：

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. MySQL之DCL

    DCL * 一个项目创建一个用户!一个项目对应的数据库只有一个! * 这个用户只能对这个数据库有权限,其他数据库你就操作不了了! 1. 创建用户   * CREATE USER 用户名@IP地址 ID ...

  2. 【Mybatis-Plus】制作逆向工具

    官方文档可参考: https://baomidou.com/pages/779a6e/#快速入门 工具需要的依赖 <?xml version="1.0"?> <p ...

  3. 图解Java设计模式

    待补充 设计模式介绍 设计模式(design pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式使用的位置 功能模块+框架上. 设计模式在软件中哪里?面向对象( ...

  4. 全球最大开源模型Grok-1 —— 马斯克 —— 自然语言大模型

    当前世界上参数最大的开源大语言模型Grok-1,参数权重大小为296GB,即3140亿参数,远远超过了OpenAI的GPT-3.5模型. 该模型采用的3140亿参数的MoE模型,在给定token上的激 ...

  5. 推荐一款好用的PDF转换工具，可以拆分、合并，亲测好用！！！

    推荐一款好用的PDF转换工具,可以拆分.合并,等等操作,亲测好用. PS. 因为经常会遇到PDF的拆分需要,以前在网上的都是免费的,后来的也都变成付费的无水印的了,再然后就变成全都要收费了.尴尬的是, ...

  6. python运行报错：ImportError: libcudnn_cnn_infer.so.8: cannot open shared object file

    运行报错: 解决方法: conda install cudatoolkit==11.8.0 python3 -m pip install nvidia-cudnn-cu11==8.7.0.84 成功解 ...

  7. 常用的多臂赌博机算法——Bandit Algorithms for Website Optimization

    "Bandit Algorithms for Website Optimization by John Myles White. Copyright 2013 John Myles Whit ...

  8. baselines算法库common/vec_env/dummy_vec_env.py模块分析

    baselines算法库设计可以和多个并行环境进行交互,也就是并行采样,实现多进程并行采样的模块为subproc_vec_env.py,与此相对的只实现单个进程下多环境交互的模块即为本文所要讲的dum ...

  9. 如何快速在 Apache DolphinScheduler 新扩展一个任务插件？

    作者 | 代立冬 编辑 | Debra Chen Apache DolphinScheduler 是现代数据工作流编排平台,具有非常强大的可视化能力,DolphinScheduler 致力于使数据工程 ...

  10. Apache SeaTunnel k8s 集群模式 Zeta 引擎部署指南

    SeaTunnel提供了一种运行Zeta引擎(cluster-mode)的方法,可以让Kubernetes在本地运行Zeta引擎,实现更高效的应用程序部署和管理.在本文中,我们将探索SeaTunnel ...