Figma Dev Mode 初试

一、准备工作

1）一个 Figma

2）Figma 插件： `Figma to Code` 和 `Rendition for Tailwind`

figma-dev7.png .png

3）VSCode 编辑器 / Figma VSCode 插件

4）Figma 社区资源 Get started with variables (Community)

二、dev 模式

1）快捷键

Shift + D

2） dev 按钮

普通模式

dev 模式

三、资源快速下载

在 dev 模式下通过 Asset 栏下载图片等资源

四、tailwind css 插件支持

figma-dev8.png .png

五、remix + figma （dev）快速实现 Get started with variables

1） remix 初始化项目

npx create-remix@latest figma-demo

启用 tailwindcss

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  // ...
};

安装依赖并初始化

npm install -D tailwindcss
npx tailwindcss init --ts

修改 tailwindcss 配置

import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
} satisfies Config;

添加 tailwindcss 配置

@tailwind base;
@tailwind components;
@tailwind utilities;

在 Remix Root 中使用

import type { LinksFunction } from "@remix-run/node";

import styles from "./tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

2） figma 打开社区资源 Get started with variables 准备

六、路由与组件

由于 Remix 自带路由使用特别方便,实现两路由：

_index.tsx (Thumbnail)
intro.tsx (Intro to variables)

七、效果

首页效果

intro 页效果

八、插件 Rendition for TailwindCSS 缺点

代码含有字符串 style 不适合在 React 中使用
智能识别 div/image 两种元素
原始代码布局混乱，需要自己调整

九、小结

Figma 的设计稿效果转化十分拔群，配合 Fimga TailWindCSS 插件, 直接生成 html/react 等不同平台的代码，但是需要自己熟悉插件的转化特点。有能力、有时间可以研究一套适合自己的 Figma To Code 插件。解放你的双手。