精华内容
下载资源
问答
  • Figma代码荧光笔 Figma的代码荧光笔。 该插件支持大约200种语言和大约100种颜色架构。 选择任何文本框,选择颜色架构,语言,然后运行插件。 文本将突出显示。 您可以将喜欢的颜色模式和语言另存为书签。 该插件...
  • 主要的Figma代码和基于Vue和Tailwind的UI。 对于主要的Figma代码 # install dependencies $ npm install # serve in watch mode $ npm run watch # build for production $ npm run build 对于UI # install ...
  • 代码方法极大地减少了设计人员与开发人员之间的交接时间,减少了前端代码,并确保Figma设计保持真实的唯一来源。 示例项目可以在这里找到: 主意 该项目的核心思想是自动呈现可视化设计,并使开发团队专注于业务...
  • ,将无法使用。 Figma发布其官方扩展API后,我们将迁移所有插件以在其中运行。 带来不便敬请谅解。... 我们欢迎有兴趣改进Figma Plus平台的任何人对我们的代码做出贡献。 如有任何疑问,反馈或想法,请在我们的。
  • quicktype从该文件中生成C#,Go,Rust,C ++,Objective-C,Java,TypeScript,JavaScript,Flow,Swift,Elm和Ruby中的类型和JSON封送处理代码。 例如,在figma.ts定义的Color类型: /** An RGBA color */ ...
  • Figma to React Component 在插件 UI 中输出 React 代码,可以通过选择某个节点来生成。 并且它的样式源自自动布局属性,因此是响应式的。 开发 npm install npm run dev 对于那些想要创建自己的 Figma 到 xxx 的人...
  • Figmark允许您在React代码中导入Figma设计。 资源 入门 首先,您需要安装CLI工具-继续运行: npm install figmark -g cd到您的项目目录,然后运行: figmark init 从您的Figma个人访问密钥开始,这将提示您一些...
  • Pakko-布局培训站点
  • 将任何Figma图层转换为与Plugin API兼容的代码。 开发插件时,它避免了手动编写视觉资产的需求。 设置 npm install 发展 在开发期间,请使用以下命令监视项目中的更改。 npm run dev 建造 准备打包最终的Figma插件...
  • FigmaGen-一个命令行工具,可使用Figma组件为UI样式生成代码。 它可以生成: 颜色样式 文字样式 导航 Figma文件 世代设定 颜色 文字样式 执照 安装 可可豆 要使用CocoaPods安装FigmaGen,请将以下行添加到...
  • 顺风咖啡店 我使用 TailwindCSS 将设计从 Figma 切片到代码 给我买杯咖啡: :
  • 该存储库包含Figma用来迁移其TypeScript代码库以使用--strictNullChecks脚本。 这些脚本最初是从分叉的 如何使用 这些是[ ]中描述的增量迁移方法中使用的脚本。 npm run find-candidates -- <your>/tsconfig....
  • Figma Platformer Engine无需代码即可在Figma中构建一个Platformer。 如此处所示:joystick:Live版本功能完全可自定义的资产多个图块(根据需要添加尽可能多的变体!)移动敌人Figma Platformer Engine在Figma中构建...
  • XBOX动画 xbox徽标的动画,从在figma中创建到代码
  • npm install --save-dev @ figma / plugin-typings 如果您熟悉JavaScript,TypeScript将会非常熟悉。实际上,有效JavaScript代码已经是有效的Typescript代码。 TypeScript将类型注释添加到变量。这使诸如Visual ...
  • figma 安装插件Designers often run into manual tasks when using design tools. For example, renaming or resizing a dozen frames in a hurry, creating the same set of elements at the start of any projects...

    figma 安装插件

    Designers often run into manual tasks when using design tools. For example, renaming or resizing a dozen frames in a hurry, creating the same set of elements at the start of any projects, show or hide certain elements on the page, and many more. I often think about ways to improve or automate our design process, similar to how developers like to automate theirs. Instead of tweaking things manually, why not building tools ourselves.

    设计人员在使用设计工具时通常会遇到手工任务。 例如,急于重命名或调整一打帧的大小,在任何项目开始时创建相同的元素集,显示或隐藏页面上的某些元素等等。 我经常考虑改进或自动化我们的设计过程的方法,类似于开发人员喜欢使其设计自动化的方法。 与其手动调整,不如自己构建工具。

    After all, we know clearly what our pain points are and even better, what the solution might look like.

    毕竟,我们清楚地知道我们的痛点是什么,甚至更好,解决方案将是什么样子。

    Last month, I joined Xero as a designer on the XUI Design System team. Soon, I learned that at the end of each two-week sprint, we have a jog day. On a jog day, we get to run wild and do something we are interested in as designers. Of course, the topics are design system related.

    上个月,我以XUI设计系统团队的设计师身份加入Xero 。 很快,我得知在每两个星期的冲刺结束时,我们都有慢跑的一天。 在慢跑的日子里,我们变得疯狂起来,做一些我们作为设计师感兴趣的事情。 当然,主题与设计系统有关。

    As you have guessed, I went down the Figma plugin rabbit hole and created two simple ones: Spaxer and Ixon.

    就像您猜到的那样,我走了Figma插件的兔子洞,创建了两个简单的插件: SpaxerIxon

    The experience of creating Figma plugins was quite intuitive and joyful. I would like to share how I went about creating the plugins, and in hope it might help you decide if you would like to give it go.

    创建Figma插件的经验非常直观和愉快。 我想分享一下我如何创建插件,并希望它可以帮助您决定是否要放弃它。

    Before we get started, here’s what you need to know about me:

    在我们开始之前,这是您需要了解的有关我的信息:

    • I have some experience with HTML and CSS (SASS if you will)

      我对HTML和CSS有一定的经验(如果愿意,请使用SASS)
    • I have some basic programming knowledge (i.e. if else statement and array)

      我有一些基本的编程知识(即if语句和数组)
    • I can go as far as writing a couple of functions in vanilla JavaScript and get them running

      我可以尝试用香草JavaScript编写几个函数并使它们运行
    • I have never written a line of code in a TypeScript file

      我从未在TypeScript文件中编写过代码行
    • I have used terminal and git before

      我以前用过terminal和git

    简单的设置 (An easy setup)

    To start writing a plugin, go follow Figma’s setup guide. It took me around 10 minutes getting everything ready on my new work laptop.

    要开始编写插件,请遵循Figma的设置指南 。 我花了大约10分钟的时间才能在新工作笔记本电脑上准备好一切。

    In a nutshell, what you need are:

    简而言之,您需要的是:

    • Figma’s desktop app

      Figma的桌面应用
    • Visual Studio Code Editor

      Visual Studio代码编辑器
    • Node.js and npm

      Node.js和NPM
    • TypeScript

      打字稿
    Create a plugin window in Figma
    Create a plugin window in Figma
    在Figma中创建一个插件窗口

    Figma的示例插件 (Figma’s example plugin)

    Figma populates an example when you create a new plugin. I recommend taking a look at the example before make a start.

    创建新插件时,Figma会填充一个示例 。 我建议在开始之前先看一下示例。

    The example files give you a clear idea of the file structure:

    示例文件为您提供了文件结构的清晰思路:

    • code.ts: the typescript file where you write the functionalities, which later get compiled into code.js

      code.ts :您在其中编写功能的打字稿文件,该文件随后被编译为code.js

    • ui.html: the HTML file where you define the interface for users to interact with

      ui.html :用于定义用户与之交互的界面HTML文件

    File structure for Figma plugin
    File structure for Figma plugin
    Figma插件的文件结构

    The example code also offers some guidance on common scenarios you might encounter:

    该示例代码还为您可能遇到的常见情况提供了一些指导:

    • How to trigger the plugin interface

      如何触发插件界面
    • How does the interface connect with the functionality

      接口如何与功能连接
    • How to define and create elements (for example, rectangles) on the canvas

      如何在画布上定义和创建元素(例如,矩形)
    • How to automatically shift the focus (viewport) to the element you have created

      如何自动将焦点(视口)移动到您创建的元素

    从React开始 (Starting with React)

    You can, of course, bundle React if you have a complex set of states to manage for your plugin.

    当然,如果您需要管理一组复杂的状态集,则可以捆绑React

    My colleague recommended this React template on Github. Though, I definitely need to learn React first.

    我的同事在Github上推荐了这个React模板 。 不过,我绝对需要先学习React。

    Figma的现场文档 (Figma’s spot-on documentation)

    Figma’s comprehensive documentation is what really makes writing a plugin easy.

    Figma全面的文档真正使编写插件变得容易。

    There are two parts in the doc:

    该文档分为两部分:

    • Introduction: What you need to know about Figma plugin in general

      简介 :关于Figma插件的一般知识

    • API references: Details on objects, properties and functions

      API参考 :有关对象,属性和函数的详细信息

    介绍 (Introduction)

    Here are the things I find most useful in the Introduction section:

    以下是我在“ 简介”部分发现的最有用的内容:

    API参考 (API references)

    This part of the documentation gives you all of the nitty gritty on the objects, properties and functions you can use and manipulate when writing the plugin.

    文档的这一部分为您提供了编写插件时可以使用和操作的对象,属性和函数的所有细节。

    What’s interesting for me was to get familiar with the different types of node in Figma, for example:

    对我而言,有趣的是熟悉Figma中不同类型的节点 ,例如:

    • DocumentNode

      DocumentNode
    • PageNode

      PageNode
    • FrameNode

      框架节点
    • GroupNode

      组节点
    • ComponentNode

      ComponentNode
    • InstanceNode

      实例节点
    • and more specific nodes like RectangleNode and VectorNode

      还有更具体的节点,例如RectangleNode和VectorNode

    The search bar on the documentation site also comes in handy from time to time.

    文档站点上的搜索栏有时也会派上用场。

    在Figma中打开控制台 (Open console in Figma)

    I rely on console.log() a lot when writing JavaScript.

    我依靠console.log() 编写JavaScript时需要花费很多。

    Luckily, you can open the console right away in the Figma desktop app and see the console log. The experience is no difference to opening the developer tools on the Google Chrome browser.

    幸运的是,您可以立即在Figma桌面应用程序中打开控制台,并查看控制台日志。 体验与在Google Chrome浏览器上打开开发人员工具没什么不同。

    Open console in Figma from the “Plugin” option in the menu
    Open console in Figma from the “Plugin” option in the menu
    从菜单中的“插件”选项在Figma中打开控制台

    打字稿和警告 (Typescript and warnings)

    One thing I learned the hard way was that the warnings or errors thrown by TypeScript do not mean your plugin is not working.

    我很难学到的一件事是TypeScript引发的警告或错误并不意味着您的插件无法正常工作。

    I spent 3 hours trying to get TypeScript happy about how I was accessing the opacity property on a rectangle. While I am still getting errors in Visual Studio Code Editor at the moment, my plugin runs just fine.

    我花了3个小时尝试让TypeScript对如何访问矩形上的opacity属性感到满意。 尽管目前在Visual Studio Code Editor中仍然出现错误,但我的插件运行得很好。

    I certainly have a lot of learning to do for TypeScript. My point here is not asking you to ignore the warning or errors, but simply remember your code might actually work even if you get a lot of red lines in the editor.

    对于TypeScript,我当然有很多学习要做。 我的意思不是要您忽略警告或错误,而要记住,即使在编辑器中出现很多红线,您的代码也可能会真正起作用。

    My suggestion is that always test and run your plugin first.

    我的建议是始终先测试并运行您的插件。

    Error thrown by TypeScript shown in Terminal window of Visual Studio Code Editor
    TypeScript being unhappy while my plugin is actually working
    我的插件实际工作时TypeScript不满意

    Edit: Check out The type filing in Figma documentation for TypeScript annotation (Suggested by Andrea Epifani).

    编辑:在Figma文档中检查TypeScript注释的类型文件 ( Andrea Epifani 建议 )。

    从示例项目中获取灵感 (Get inspiration from sample projects)

    The community for writing Figma plugins is still growing. It might not be easy to find direct answers to your questions. However, there are some sample projects floating in Github provided by the Figma team and other awesome developers.

    编写Figma插件的社区仍在增长。 找到问题的直接答案可能并不容易。 但是,Figma团队和其他出色的开发人员在Github中提供了一些示例项目。

    I often found answers and inspiration through these samples. Let’s take a look the ones from the Figma team:

    我经常从这些样本中找到答案和灵感。 让我们看一下Figma团队的成员

    • Bar chart illustrates how users can use an input to generate charts

      条形图说明了用户如何使用输入来生成图表

    • Document statistics provides a practical example of how to traverse through all the nodes in a Figma file and tally up the stats

      文档统计信息提供了一个实践示例,说明如何遍历Figma文件中的所有节点并汇总统计信息

    • Text search shows how to work with a selected node, and how to keep Figma responsive during long-running operations

      文本搜索显示了如何使用选定的节点,以及如何在长时间运行的操作中使Figma保持响应

    版本控制 (Version control)

    Using version control is a simple but good practice. Make sure you use Github or an alternative platform to help control versions in your code.

    使用版本控制是一个简单但好的做法。 确保使用Github或其他平台来帮助控制代码中的版本。

    If you are not familiar with the concept of version control, here’s a guide from Atlassian.

    如果您不熟悉版本控制的概念,请参阅Atlassian指南

    发布插件 (Publish the plugin)

    Your plugin can be in 3 different states:

    您的插件可以处于3种不同的状态:

    • Live on your local machine and is only available to you

      驻留在本地计算机上,仅对您可用
    • Published to your organisation (on Figma’s enterprise plan) and is available to your team and organisation

      已发布到您的组织(根据Figma的企业计划),可供您的团队和组织使用
    • Published to the entire Figma community and is available to the public

      已发布到整个Figma社区,并向公众开放

    The publishing process is quite simple. You can follow this guide.

    发布过程非常简单。 您可以按照本指南进行操作

    Publish plugin window in Figma
    Publish plugin window in Figma
    在Figma中发布插件窗口

    What you need are:

    您需要的是:

    • A plugin name

      插件名称
    • A description (This is where you can put all the details and links)

      说明(您可以在其中放置所有详细信息和链接)
    • Cover art (1920 x 980)

      封面(1920 x 980)
    • Avatar (128 x 128)

      头像(128 x 128)
    • Up to 12 tags

      最多12个标签
    • Support contact

      支持联系人
    • A decision around making it available to your organisation or to the entire Figma community

      关于将其提供给您的组织或整个Figma社区的决定

    You can instantly publish your plugin within your organisation, while making it available to the public will trigger a review process from the Figma team.

    您可以在组织内立即发布插件,而将其公开发布将触发Figma团队进行审核。

    ✌就是这样 (✌That’s it)

    Hopefully, this gives you a good overview of how to create a Figma plugin.

    希望这可以为您提供有关如何创建Figma插件的很好的概述。

    As a designer, I do find it super exciting to be able to create some simple tools with plain HTML, CSS and basic JavaScript. Figma has done an awesome job in removing the complexity by providing out-of-box API and amazing documentation.

    作为一名设计师,我确实发现能够使用纯HTML,CSS和基本JavaScript创建一些简单的工具非常令人兴奋。 Figma通过提供现成的API和出色的文档,在消除复杂性方面做得非常出色。

    I would also hope that the Figma team will continue improving the experience of managing and updating the plugins. More importantly, the community aspect of Figma plugins is what going to support and encourage more designers to take charges and make more awesome creations.

    我也希望Figma团队将继续改善管理和更新插件的经验。 更重要的是,Figma插件的社区方面是要支持和鼓励更多的设计师付费并做出更出色的创作。

    🔗方便的链接和资源 (🔗 Handy links and resources)

    To wrap it up, here is a list of links and resources I found very helpful.

    总结一下,这是我发现非常有用的链接和资源列表。

    Thank you for reading! 👋 Hi, I am Lennon Cheng, an Interaction Designer and a Freelancer, currently living in Melbourne, Australia.

    感谢您的阅读! 👋您好,我是互动设计师兼自由职业者Lennon Cheng ,目前居住在澳大利亚墨尔本。

    Image for post
    Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in. 海湾地区黑人设计师 :一个专业的黑人开发社区,他们是旧金山湾区的数字设计师和研究人员。 通过在社区中团结起来,成员可以共享灵感,联系,同伴指导,专业发展,资源,反馈,支持和韧性。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

    翻译自: https://uxdesign.cc/writing-my-first-figma-plugin-as-a-designer-who-can-barely-code-2ce03c20c133

    figma 安装插件

    展开全文
  • Feathericon Figma :package: Figma社区网址 执照 代码许可证:MIT(C) 图标设计许可证:
  • 轻松将设计直接转换为代码。 (不属于任何一个) 该项目包含一个将选定的Figma json发送到localhost:9020的插件,以及一个将此json转换为Jetpack Compose并将剪贴板设置为它的kotlin后端。 在观看视频并缺少CSS ...
  • Fugen是用于导出资源并从文件生成代码的命令行工具。 目前,Fugen支持以下实体: :white_heavy_check_mark: 颜色样式 :white_heavy_check_mark: 文字样式 :white_heavy_check_mark: 阴影样式 :white_heavy_...
  • Figma样式为SASS / LESS文件 将figma样式提取到scss / less文件中。 先决条件 如果尚未安装则需要安装它 1.安装NPM依赖项 npm install 2.安装gulp npm install -g gulp 3.获取您的figma个人访问令牌 跑 gulp ...
  • Figma x VS 代码 特征 样式列表和复制 CSS 列出层树和顶层层预览 要求 要使用此扩展程序,您需要做两件事: Figma 个人访问令牌 团队标识 Figma 个人访问令牌 转到 Figma 应用程序中的帐户设置 单击Create a new ...
  • figma button_Figma很危险

    2020-09-20 01:16:30
    figma button 重点 (Top highlight)There are two reasons for this: Accessibility and Proficiency. 这样做有两个原因: 可访问性和熟练程度 。 I previously attended a boot camp for UX Design (more on that ...

    figma button

    重点 (Top highlight)

    There are two reasons for this: Accessibility and Proficiency.

    这样做有两个原因: 可访问性熟练程度

    I previously attended a boot camp for UX Design (more on that later). Our instructor focused mainly on the fundamentals of good design: methods of research, understanding your user, asking better questions, lots of collaborative discussion and practice. We explored design tools: pencil and paper, note cards and stickies, napkins and markers. Eventually we arrived at digital tools. The three mains we learned about: Sketch, Invision, and Adobe XD.

    我以前参加过UX Design的新手训练营(稍后再介绍)。 我们的讲师主要关注良好设计的基础知识:研究方法,了解您的用户,提出更好的问题,进行大量协作讨论和实践。 我们探索了设计工具:铅笔和纸,便签纸和便签,餐巾纸和记号笔。 最终我们到达了数字工具。 我们了解了三个主要知识:Sketch,Invision和Adobe XD。

    Sketch and Invision were actually the only two “real” options, being that they were considered much more industry standard. There were a handful out of our 20-ish person class who were rocking PCs instead of Macs, so Adobe XD was more of a “we’ll cover this if you’re interested, and you should definitely look into it because it’s got a lot going for it, but you should definitely consider investing in Sketch/Invision and dig in when you’re able.”

    实际上,Sketch和Invision是仅有的两个“真实”选项,因为它们被认为是更加行业标准的。 在我们20岁以下的班级中,只有极少数人在摇动PC而不是Mac,因此Adobe XD更像是“如果您有兴趣的话,我们将进行介绍,并且绝对应该对其进行研究,因为它有一个有很多事情要做,但是您绝对应该考虑在Sketch / Invision上进行投资,并在有能力的时候进行挖掘。”

    Myself, always the frugal consumer, was aiming to stretch that 30-day Sketch trial as long as I could. So I did.

    我自己一直都是节俭的消费者,我的目标是尽可能地延长30天的Sketch试用期。 所以我做了。

    With my wife’s Macbook in hand, I waited to download, install, and start using Sketch until that 30 day trial would carry me past the end of the course. Invision was free, so I downloaded, installed, and used that all along the way. Once the Sketch trial was over, I considered saving/shelling out the $50 to purchase it with a years’ worth of updates included (actually $99, but we had a discount through the school partnership), but I held off. I had a vector design program on my desktop PC, so I would design there then take my assets over to Invision and prototype that way.

    带着妻子的Macbook,我一直等待下载,安装和开始使用Sketch,直到30天的试用期使我无法完成课程。 Invision是免费的,因此我一直下载,安装和使用Invision。 Sketch试用期结束后,我考虑省去/花掉50美元购买它,并附带一年的更新费用(实际上是99美元,但我们通过学校合作伙伴关系获得了折扣),但我选择了。 我在台式PC上有一个矢量设计程序,因此我将在那进行设计,然后将自己的资产移交给Invision并以这种方式进行原型制作。

    Eventually I tested out Adobe XD. I was already familiar with the Adobe ecosystem, so things were both new and familiar enough to not waste unnecessary amounts of time stumbling around keyboard shortcuts and foreign icons.

    最终,我测试了Adobe XD。 我已经很熟悉Adobe生态系统,因此它们既新颖又熟悉,不会浪费不必要的时间浪费在键盘快捷键和外来图标上。

    I kept looking around at other UX tools and came across a name that just wouldn’t go away: Figma.

    我一直在寻找其他UX工具,并发现了一个永远不会消失的名字:Figma。

    I remember this program. I had already signed up for an account some time back.

    我记得这个程序。 我早些时候已经注册了一个帐户。

    But wait. It’s browser based? Come again?

    可是等等。 它基于浏览器? 再来?

    Browser based? I’m sorry. That doesn’t make sense. Design tools were deep, complex, computationally intensive programs. They required hundreds of megabytes, sometimes gigabytes of storage space, an installation wizard, a utility manager, an update client, and an online account for updates. Figma doesn’t require any of that?

    基于浏览器? 对不起。 那没有道理。 设计工具是深度,复杂,计算密集型程序。 他们需要数百兆字节(有时为数千兆字节)的存储空间,安装向导,实用程序管理器,更新客户端以及用于更新的在线帐户。 Figma不需要任何这些吗?

    And to my surprise, yes, it is web based. You don’t need a Mac because it wasn’t developed for Windows or Linux. You don’t need to worry about having a quality rig to keep the lag, freezing, and crashing at bay. You don’t need to clear out space on your hard drive for files and folders. You just need a decent internet connection and a computer that’s mildly more advanced than a potato (yes, there are actual recommended specs, but they’re really not that beefy).

    令我惊讶的是,它是基于网络的。 您不需要Mac,因为它不是为Windows或Linux开发的。 您无需担心拥有质量钻机来保持滞后,结冰和坠落的危险。 您无需清除硬盘驱动器上的文件和文件夹空间。 您只需要一个体面的Internet连接和一台比马铃薯要先进得多的计算机即可(是的,有实际推荐的规格,但实际上并不那么强大)。

    As a matter of fact, since everything is cloud based, I don’t even need to own a computer. I can go to the library and work on UX design case studies from scratch to finished prototype. I can use a friend’s computer and tweak the components after seeing some inspiring designs on Instagram. I can go home to visit my mom for the holidays and pop open her laptop to finish off a screen I didn’t have a chance to finalize before I hit the road.

    实际上,由于所有内容都是基于云的,所以我什至不需要拥有计算机。 我可以去图书馆从头到尾完成UX设计案例研究。 在Instagram上看到一些鼓舞人心的设计后,我可以使用朋友的计算机并调整组件。 我可以回家度假去看妈妈,然后弹开她的笔记本电脑以完成屏幕显示,而我在上路之前没有机会完成操作。

    Figma is accessible. Anywhere.

    Figma是可访问的。 任何地方。

    No more being tied to one machine with all of my files. Oh yeah, did I mention it’s free for individuals? Hey howdy, no more subscriptions and fees. Music to my ears and freedom for my soul.

    不再需要将我所有的文件绑定到一台计算机上。 哦,是的,我提到个人免费吗? 嗨,您好,没有更多的订阅和费用。 音乐在我耳边,自由在我的灵魂。

    But I’ve seen browser based apps. They can be crap. Accessibility and frugality mean squat if using the product is a painful experience.

    但是我看过基于浏览器的应用程序。 他们可能会胡扯。 如果使用该产品是一种痛苦的体验,那么无障碍和节俭意味着蹲下。

    This brings me to the second point: proficiency. Figma is a dream to use.

    这将我带到第二点: 熟练程度 。 Figma是一个梦想。

    The walk-through intro wasn’t as good as others, but the tools are such a breeze to pick up and play with, I felt like I’d been using them for years. It’s all organized so intuitively. Browser-based or not, everything for your working project is on one screen. No need to load separate pages for different functionality (I’m looking at you Invision), just click a tab and switch from design tools to prototyping tools to code to pass off to developers.

    演练简介不如其他简介,但是工具使用起来很轻松,我感觉我已经使用了很多年了。 全部组织得如此直观。 无论是否基于浏览器,工作项目的所有内容都在一个屏幕上。 无需为不同的功能加载单独的页面(我正在用Invision看着您),只需单击一个选项卡,然后从设计工具切换到原型工具,再将代码传递给开发人员即可。

    There’s almost zero learning curve if you’re familiar with basic design tool staples. “V” on your keyboard still brings up the selection tool. Numbered properties can either be typed in or mouse clicked and dragged up and down. Objects snap very thoughtfully, such as aligning with another object or spacing things apart identically to the other objects close by, all with visual rulers that appear/disappear when necessary. Figma even has Adobe-esque Pathfinder tools to unify, subtract, intersect, and exclude vector objects.

    如果您熟悉基本的设计工具,那么学习曲线几乎为零。 键盘上的“ V”仍会弹出选择工具。 可以输入编号的属性,也可以单击鼠标并上下拖动。 对象会非常周到地捕捉,例如与另一个对象对齐或将物体与附近的其他对象相同地隔开,所有这些都由可视标尺在必要时出现/消失。 Figma甚至具有Adobe式的Pathfinder工具来统一,减去,相交和排除矢量对象。

    Components are snazzy. In short: you make a thing, duplicate it, and all the duplicates automatically adjust to changes made with the original thing. Lots of flexibility here, too. You can make changes to the duplicates (such as text), and that specific property can be unlinked from the master while other properties like color, shape, etc. are still linked. The functionality isn’t brand new, but with the click of a button on the top-center of page, it’s so easy.

    组件很时髦。 简而言之:您制作一件东西,将其复制,然后所有重复项都会自动调整以适应原始事物所做的更改。 这里也有很多灵活性。 您可以更改重复项(例如文本),并且可以将特定属性与原版取消链接,而其他属性(例如颜色,形状等)仍处于链接状态。 该功能并不是全新的,但是只需单击页面顶部中心的按钮,即可轻松实现。

    You don’t need anything else to design your UI elements. So many little things that add up to a very enjoyable experience.

    您不需要其他任何东西即可设计UI元素。 如此多的小东西共同构成了非常愉快的体验。

    Figma is your one stop shop for designing, prototyping, and collaborating.

    Figma是您进行设计,原型制作和协作的一站式服务。

    For those who’d like to drop some money on further functionality, you can unlock the number of projects you can have under one account, have a team of designers linked and editing the same project/artboard in real time, and even share assets like icons, entire screens, and layer styles.

    对于那些想在更多功能上花些钱的人,您可以释放一个帐户下可以拥有的项目数量,让一组设计人员实时链接和编辑同一项目/画板,甚至共享诸如图标,整个屏幕和图层样式。

    The user interface is uncluttered and well organized, making it extremely easy to use. It is so good at what it does. It makes designing in other programs too much hassle to be bothered with. It makes me scoff and proclaim “why wasn’t this a thing before?” to myself and get looks from strangers around me. It makes me want to tinker till the sun sets and the moon rises in the dark of night. Figma really surprised me.

    用户界面整洁且组织良好,非常易于使用。 它做的很好。 这使得在其他程序中进行设计非常麻烦。 这让我sc之以鼻,并宣布“为什么以前没有这件事?” 对自己说,并从我周围的陌生人那里得到神情。 这使我想修补直到太阳落山,月亮在漆黑的夜晚升起。 Figma真的让我感到惊讶。

    Figma is dangerous because it gives designers access, not only in terms of reasonable pricing and cutting edge features, but in terms of practical execution.

    Figma是危险的,因为它不仅为设计师提供合理的价格和最先进的功能,而且在实际执行方面具有访问权限。

    I’ll say it again: you can design on the go.

    我再说一遍: 您可以随时随地进行设计。

    You can design on your own desktop computer or on your friend’s laptop. You can pause your design session at the office, grab your laptop, and pick up where you left off at the coffee shop on the way home. You can design on multiple personal devices without the worry of being limited to one computer due to licensing issues. You can even design without personally owning any hardware at all. You are only limited by your internet connection.

    您可以在自己的台式计算机或朋友的笔记本电脑上进行设计。 您可以在办公室暂停设计会议,拿起笔记本电脑,然后在回家的路上在咖啡厅取下您停下来的地方。 您可以在多个个人设备上进行设计,而不必担心由于许可问题而限制在一台计算机上。 您甚至可以完全不亲自拥有任何硬件而进行设计。 您仅受互联网连接的限制。

    But then again, Figma even has a desktop app that.

    但是话又说回来,Figma甚至有一个桌面应用程序。

    After a single, internet connected sign on to access the files you need, the Figma desktop app lets you unplug from the network and tinker away offline at your leisure. Once you’re back within range of an internet connection, your files sync with the cloud.

    单一的,互联网连接的登录名访问所需的文件后,Figma桌面应用程序使您可以从网络上拔下插头,并在闲暇时随意脱机。 一旦回到互联网连接范围内,您的文件就会与云同步。

    What more could you want?

    你还能想要什么?

    If you’re interested in what else Figma has to offer, head to their website to find out more.

    如果您对Figma还可以提供什么感兴趣,请访问他们的网站以了解更多信息。

    翻译自: https://medium.com/@kylemillerdesign/figma-is-dangerous-dce408e9801f

    figma button

    展开全文
  • Figma插件可将HTML从URL转换为Figma,或通过将Figma设计转换为代码 它是如何工作的 在Figma中,打开一个新的或现有的文档,然后单击cmd + /并搜索“ html figma”,然后按Enter 输入您要导入的URL 为什么? 轻松...
  • :check_mark_button: 使用CoLI构建的代码生成,专门为助手使用而开发,可确保最佳的代码生成质量。 :check_mark_button: 插槽支持(带参数的组件) :check_mark_button: 模块化的代码生成/可读性。 所有生产级别...
  • 消息处理的辅助功能,以简化主代码和UI代码之间的通信。 (感谢 ) 直播服务器预览使构建UI更快。 npm run preview 这个模板是建立在顶部和更新,以使用Vue3 下载模板 还有,你可以使用这个模板的一些方法。 最...
  • 您可以克隆存储库并签出代码,以查看实际Figma插件中组件的一些示例。 import {Button, Checkbox, Input, Label, SectionTitle, Select, Switch, Text} from 'figma-styled-components` <Button> I am a ...
  • Figma主题 从Figma Styles生成可用于开发的主题JSON文件 从Figma文件ID解析 与和其他CSS-in-JS设置一起使用 用构建 npm i figma-theme 入门 在您的项目中将figma-theme安装为开发依赖项 获取Figma API的 使用您的...
  • 由于功能不多,之前组件和样式是自己手写的css,调来调去使用体验也不好,Figma说目前还没有官方的ui组件库,大家可以试试 figma-plugin-ds (后面简称ds),组件样式和svg图标跟figma原生的一样,虽然有些figma上很...

    一个前端新手,最近在写Figma插件,插件主要是写给自己用。由于功能不多,之前组件和样式是自己手写的css,调来调去使用体验也不好,Figma说目前还没有官方的ui组件库,大家可以试试 figma-plugin-ds (后面简称ds),组件样式和svg图标跟figma原生的一样,虽然有些figma上很细节的功能还做不到,比如在输入框的边缘移动能调整数值,但做一个简单的面板还可以。
    image.png

    要快速上手,可以直接在html里引用css和js的在线地址。但由于文件在github上,启动插件时ui样式要等加载完才显示正常,尽管加载完成会有缓存,再启动就很快了,开始时对ds很陌生,想把ds的css拉下来,手动改一改,就很想把js和css放到本地。
    把css和js放到本地后,作为相对路径引入时,发现figma并不会加载,用chrome直接访问ui.html 倒可以,搜索了很久,找到两种方法,一是将css和js转成base64直接写进html里,还有一种是将项目打包方式改成webpack。转base64后在html会有大段大段的文本,影响可读性,而且用vscode打开html时会提示“性由于能原因,部分代码高亮已关闭”之类的,而且vscode的标签自动补全,总会卡几秒才补完,体验很糟糕,于是决心改用webpack。

    引用方法

    Figma官方有webpack的配置示例,参考示例重新调整了项目,但本地引用还是失败,我对webpack非常陌生,修改配置时每次都不能正常打包,最后还是恢复成官方示例的样子。根据 webpack.config.js 的一段注释,得知在ts里可以导入css 和 js,ui.html里的内容还可以分到ts里。如果在ts导入css和js,webpack会进行打包。使用 **ds 下拉菜单(select-menu)折叠(disclosure)组件,需要先执行两行初始化代码,要执行初始化代码要用到HTMLScriptElement,有它原本写在html的**里的代码,就可以改用ts来写。
    下拉菜单 和 折叠组件:
    image.png
    webpack.config.js 中的一段:

    // Enables including CSS by doing "import './file.css'" in your TypeScript code
    { test: /\.css$/, use: ['style-loader', { loader: 'css-loader' }] },
    

    ui.ts

    import './lib/figma-plugin-ds.css'
    import './lib/figma-plugin-ds.js'   // 导入 js,这样 webpack 就会把js打包进来
    
    // figma-plugin-ds.js 初始化。
    // 相当于	<script>selectMenu.init();disclosure.init();</script>
    const scriptDSInit = document.createElement('script') as HTMLScriptElement;
    scriptDSInit.text = 'selectMenu.init();disclosure.init();';
    document.body.appendChild(scriptDSInit);
    
    // 参考链接
    // figma-plugin-ds
    // https://github.com/thomas-lowry/figma-plugin-ds
    // https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css
    // https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/iife/figma-plugin-ds.js
    

    之前的方法:
    ui.html

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css">
    <script src="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/iife/figma-plugin-ds.js"></script>
    <script>
        selectMenu.init(); //initiates the select menu component
        disclosure.init(); //initiates the disclosure component
    </script>
    

    如果js未正确初始化时,SelectMenu 不会显示,Disclosure会显示但不能折叠和伸展。另外Disclosure即使正确初始化了,折叠区域内的按钮不能点击,输入框也不能输入文本,暂时还不知道要如何解决这个问题。
    其实,如果不用这两个组件,完全不用引入js,直接用css就好了,ds的css不多,直接写到ui.html就可以用了,2333~~~~。

    一些理解:

    最近一直在折腾webpack,对webpack打包项目有一些理解。
    观察src和dist目录发现,使用示例的webpack.config.js后,虽然源代码import了一些css和js,但最后只会生成 ui.js、ui.html、code.js这三个文件,import的内容都被打包进这3个文件里。有试过在dist目录下放置js,在html直接引入,发现在figma里并没有生效。

    # src目录文件情况
    .
    └── src
        ├── code.ts
        ├── lib
        │   ├── figma-plugin-ds.css
        │   └── figma-plugin-ds.js
        ├── ui.html
        └── ui.ts
    
    
    # build后的 dist目录文件情况
    .
    └── dist
        ├── code.js
        ├── ui.html
        └── ui.js
    

    另外在开发者工具里发现,我们可以通过拼接url的方式获得某个插件编译后的代码,但由于编译后的代码可读性非常差,似乎也没啥研究价值。
    例如:
    LottieFiles
    插件介绍页面:https://www.figma.com/community/plugin/809860933081065308
    插件代码地址:https://www.figma.com/community/plugin/809860933081065308/code


    经验总结

    总结自己最近的踩坑经验,写了个 Samples示例,相关代码已同步到Github上,本文未贴出的代码也可以在上面找到。
    Github地址:https://github.com/hufang360/figma-plugin-samples/tree/main/webpack
    界面截图:
    image.png


    参考链接

    展开全文
  • Insurantly的外观更加简单,低调的精致性强调易于使用。 此外,该bootstrap 5网站模板还带有客户... 模板文件包含网站的源代码以及Figma文件。 借助Figma文件和HTML源代码的支持,您无需编码即可构建现代化的保险网站。
  • 静态定位器 一个Figma插件,允许您使用静态字典本地化内容。 与许多其他本地化插件不同,它 ... 第一行是包含语言代码的标题。 接下来的每一行都包含一些短语到相应语言的翻译。 例如, RU EN DE

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 897
精华内容 358
关键字:

figma代码