Figma 使用手册

简单的 Figma 入门手册，理解设计，快速的完成设计, 多平台（包含 web 端）,主要是写给前端开发人员了解的设计层面的内容。

创建 Page 页面

在 layers 有当前的图层， Page1 是第一个页面， pages 文字的右边包含 + 文字，点击即创建一个 page（暂无快捷键）。

const FigmaSurface = {
    topTab: {
        quickMenu: {
            "search": "include searchInput",
            // 
            file: [],
            edit: [],
            view: [],
            object: [],
            vector: [],
            text: [],
            arrow; []
            // 
            plugins: [],
            integration: [],
            preferences: [],
            libraries: [],
            // help and account
        }, 
        op: ['move', 'scale'],
        sections: ['frame', 'slice'],
        shape: ["rectangle", "line", "arrow", "ellipse", "polygon", "star", "place-image"],
        pencil: ["pen", "pencil"],
        text: "text",
        handleTool: "handleTool",
        comment: "comments"
    },
    left: {
        layer: {},
        pages: {},
        Frame: []
    },
    center: {
        content: {}
    },
    right: {
    
    }
}

创建 Frame 层

Frame 是建立在 Page 之下，我们在 Frame 中进行各种设计的工作，快捷键是 F，使用 F 键，快速的创建的一个 Frame, 多练习几次，基础快捷键要踏实。

模拟伪代码：

import { Page } from 'figma'；

const page1 = new Pages();

显示 Frame 样式

在 Figma 软件的右侧，有 Design/Prototype/Inspect 设计/原型/样式调试，下面是选中一个 Farme 的各种功能

对其范式
Farme信息位置/大小/角度/圆角/...
layout 相关
Layer 层相关信息：配置 Layer 层

Fill 填充层

Frame 的填充层，熟悉 css background 很好理解，相似相溶

Stroke 层

Frame 边框层面，如果熟悉 CSS Stroke 特别容易理解，相似相溶

div.Frame {
    width: 100vw;
    height: 300px;
    box-shadow: 1px 1px 1px;
}

Effect 层

Frame 效果层，熟悉 CSS box-shadow 很容易理解，相似相溶

Expert 层

Frame 输出层（可预览），可选中要输入的内容 1x/2x/3x 不同倍数。

Figma 支持的简单图-形

矩形：快捷键 R
线条：快捷键 L
箭头：快捷键 shift L
圆形：圆形 O
三角形
星形
置入图片 shift command K

Figma Nav 右侧

用户头像
分享按钮
预览按钮
显示百分比

练习

创建多page
page 中创建多 Frame
Frame 中创建多将 Figma 中的图形各创建多次
以上简单的重复练习几次
使用预览，并重复练习措辞
使用切图功能，且不同倍数的图。并重复练习多次
移动、缩放选项，在不同的操作中重复使用，需要不断熟悉
练习样式添加边框背景色，影音等，重复多次，熟悉使用配置使用右边栏
练习置放图片，重复练习

小结

熟悉 Figma 的界面，并熟悉基本 Figma 操作，
简单练习 figma 的内容
还需更多的联系，和学习更多的内容

初识 Figma