35个网页设计工具,帮助你在2019年更聪明地工作。

The best web design tools: Photo by Jeff Sheldon on Unsplash
+$(Image credit: Photo by Jeff Sheldon on Unsplash)

每周都有令人惊叹的免费文件Istock.com

+$There are plenty of great web design tools available right now. No matter what you're trying to do, chances are, there's a tool designed to help you out. With new web design tools being released all the time, and competition rising, the bar is continually rising when it comes to what our tools can do, too.

+$While all this is great news for web professionals, it does mean it's increasingly difficult to pick the tools that will suit you and your workflow. In this article, we've rounded up what we think are the best web design tools available right now, to help you out. These tools will all help you become more streamlined, inventive and creative in your work. You'll find everything from UI and prototyping tools to dedicated creative software and everything in-between.

+$And if that's not enough, don't miss our round ups of the+$best web hosting services+$best Website Builders+$for 2019.

+$Some of the tools listed below will be very familiar, others may be new to you. But each has the potential to save you time, energy and budget in your web design work.

+$01. Sketch

+$Sketch has replaced Photoshop as the UI design tool of choice for many web designers [Image: Bohemian Coding]

+$We’ll start with an obvious one. Yes, we know everyone’s heard of草图+$– Bohemian Coding’s vector UI design tool – but anecdotally it seems there are still a lot of web designers relying on Photoshop for UI design (and that's despite the release ofAdobe XD,Adobe的原型设计和线框工具 - 新增功能之一创意云)。

Rory Berry,创意总监Superrb+$, made the switch to Sketch in 2017, and highly recommends it. “Compared to Photoshop, sorting all your documents and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.”

而这还不是全部。 “Sketch中的内置网格系统非常棒,使界面设计更加容易。我认为整体用户界面和最小的感觉使设计更加清晰,用户友好。相比之下,Photoshop似乎非常复杂。“

Sketch社区提供数百个插件+$to make a designers work flow easier and smoother. If you tried Sketch a long time ago and didn't like it, you may want to try out the latest iteration of Sketch, version 52, which includes a totally redesigned interface, new features for designing with data, and a new Dark Mode for macOS Mojave.

+$One potential downside is that Sketch is only available on Mac. If you want to share Sketch files with those not using OS X, you'll need to explore additional software or conversions, or work from flat JPGs.

不要错过我们的使用Sketch的重要提示

+$02. UXPin

UXPin: web design tools

+$UXPin lets you prototype with interactive states and logic

+$(Image Credit: UXPin)

+$The next web design tool in our list is UXPin. This dedicated prototyping app is available for Mac, Windows, or in the browser. With most other design tools you can only mimic interactions by linking different elements on your artboard, UXPin gets closer to the code and enables you to work with interactive states, logic, and code components.

+$There are integrated element libraries for iOS, Material Design and Bootstrap, plus hundreds of自由图标集+$, to help you on your way. UXPin has also recently introduced accessibility features to ensure your designs stay in line with WCAG standards, which we applaud.

+$API Request is the latest addition to UXPin's Interactions capabilities. The feature enables you to prototype app that 'talk' to your products from directly within your design tool - with no need for code. It works by enabling you to send HTTP requests to an external API.

+$You can create your first prototype inUXPin+$for free, and if it suits you switch to a paid monthly subscription (team memberships are available). UXPin recently improved its integration with Sketch, so it could be one to introduce into your workflow if you're a Sketch fan that finds its prototyping capabilities limiting.

+$03. Adobe XD

+$Adobe XD has a light interface that allows you to prototype with ease

+$(Image Credit: Adobe)

+$Adobe's vector design and wireframing toolAdobe XD+$keeps getting better, with additions such as support for语音原型+$ensuring the tool can keep up with the latest trends in UX. XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.

+$Crucially, Adobe XD integrates with the rest of Creative Cloud, which means you'll be able to import and work with assets from Photoshop or Illustrator easily. If you already use other Adobe apps, the UI will feel nice and familiar and shouldn't present too much of a learning curve.

安德烈罗布+$, design director at Robu Studio in Barcelona, is among its fans. “For quick mockups it's great,” he says. “It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away.”

+$Ellis Rogers, graphic designer at接待有限公司+$also recommends it. “When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link," he explains. "The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions. It's an absolute joy to work with.”

+$04. Figma

+$Figma allows you to design, prototype and gather feedback with other designers in real time [Image: Figma]

FIGMA+$is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.

以下是它的一些突出特点:

“Figma有一个类似于Sketch的USP,除了是跨平台,”前端设计师解释道本杰明读。 “当我用它为一篇文章创建几个图标时我们的网站我发现工作流程非常顺畅。我花了很多时间学习并获得了协作的额外好处:你可以在应用程序中与其他人共享图形。“

“我一直在努力为我的工作切换到Linux,有时我们使用Windows,因此Figma从实用角度对我有意义,”他补充道。 “相比之下,我发现许多其他平台的工具都不足。”

自由职业者内容作家和艺术家大卫伊斯特伍德关于Figma也有好话。 “当我们需要快速模拟MVT时,它也是一个非常有用的工具;有时是对现有布局的少量补充。我们喜欢您可以快速创建桌面,平板电脑和移动设备。“

+$05. Affinity Designer

web design tools: Affinity Designer on iPad

+$Affinity Designer is as powerful on iPad as it in on desktop [Affinity Designer]

+$"Serif's亲和设计师+$has been dubbed the 'Photoshop killer' by some, and it's easy to see why," says product designer丹爱德华兹。 “我的第一印象是该应用程序设计精美,感觉就像是一个专门的网络和图形设计工具。

“我真的很喜欢这些功能,包括可调节的非破坏性图层。这实际上意味着您可以调整图像或矢量而不会损坏它们。

“1,000,000%的变焦只是幸福;它在使用矢量艺术时特别有用,因为你可以真正接近。撤消和历史功能也非常方便:亲和力让你可以回到8000多步!”

“当涉及到设计时,用户界面感觉很熟悉。当从Photoshop移动时,每个人似乎都想重新开始,这可能构成真正的挑战。亲和力所做的是保持布局熟悉,同时收紧一切并隐藏干扰我很容易直接跳进去设计。“

Affinity Designer现在也可以使用对于iPad。请注意,这不是您可能期望的缩小版移动应用程序版本:它与您在桌面上获得的完整版本相同。

不要错过我们的使用指南像素角色出口人物钢笔工具在亲和设计师。另请注意,Affinity可以替代Photoshop,亲和照片和InDesign替代方案,Affinity Publisher;所有这些都很好地融合在一起。

+$06. Flare

+$Flare is a new tool for designing and animating vector art [Image: Flare]

闪光+$is a browser-based tool from 2Dimensions that helps you design and animate vector art. Aimed at both web designers and game designers, it lets you work directly, in real time, with assets that run in your final product, eliminating the need to redo that work in code. So it should simplify your process enormously and save you a bucketload of time.

最重要的是,它可以作为开放设计运动的一部分免费下载。你可以看看Ahmed Tarek是如何用它来创建一个app动画的本教程

+$07. Vaunt

+$Vaunt is a nifty tool for extracting the dominant colours from an image [Image: Vaunt]

+$Want to match your website’s colour scheme to a particular image? Then you may well find+$handy. It's a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design.

您将图像拖放到应用程序中,主色显示在面板中。然后,您可以单击任何颜色将它们添加到剪贴板。

+$08. Verifier

+$Fake email addresses registered to disposable domains are the scourge of online communities, and this deceptively simple tool can be your site's Batman.+$Verifier+$can be dropped into the email sign-up on your site, where it checks through a list of over 18,000 disposable domains in an instant and lets the user know if they need to provide a real address to sign up. It also checks that the domain of the address is valid and exists, and that the syntax is correct.

+$With a free forever API key, Verifier could be an important step in crushing the spammer blight in online communities – something that its creator is very passionate about. The Sisyphean task of cleaning up the web starts right here.

+$09. Squoosh

+$Google's tool makes it easier to compress images to the appropriate level [Image: Squoosh]

+$Launched Last November,Squoosh+$is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.

该应用程序可在线和离线工作,总体而言是双赢:网页设计师节省时间,谷歌获得更快的网络仍然看起来不错。

+$10. Linksplit

+$Linksplit makes it quick and simple to set up A/B testing [Linksplit]

+$The most effective way to make your website better is through A/B testing: splitting traffic between two or more different versions and seeing which performs better. AndLinksplit+$makes it a lot easier to set up. It’s free for the first 10,000 clicks, and you don’t even have to sign up to get started.

前往该网站,输入您的目标网址,您将获得一个简短的测试网址,以便与您的受众群体分享。如果您愿意,也可以设置规则。例如,如果您希望英国人在iOS上使用Chrome浏览器与美国人不同,那么设置起来非常简单。

+$11. Anime

+$Spice up your apps with this animation engine [Image: Anime]

+$Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library.动漫+$is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

这是一个演示超简单API的示例:

var myAnimation = anime({targets:['。box1','。box2'],translateX:'5rem',rotate:180,duration:3000,loop:true});

此代码定义了要设置动画的对象以及动画的细节。 API允许您使用CSS选择器,DOM元素甚至JavaScript对象来定位元素。

作者Julian Garnier提供了一个CodePen集合,演示了库可以做什么,以及完整的文档GitHub上

+$12. Avocode

+$Avocode helps you code websites or apps from Photoshop or Sketch designs [Image: Avocode]

+$Avocode makes it extremely easy for frontend developers to code websites or apps from Photoshop or Sketch designs. It's built by the same team that brought us CSS Hat and PNG Hat, so it's not surprising they've taken the exporting process one step further here. Although previous apps have allowed you to export assets, what makesAvocode+$really special is that you can use its Photoshop plugin to sync your PSD into Avocode with just one click.

Avocode可快速自动分析您的PSD或Sketch文件,并将所有内容整合到设计精美的UI中。然后,您可以完全控制导出资产的方式,包括SVG导出作为标准。

您还可以单击设计中的元素,然后将代码复制并粘贴到您选择的文本编辑器中。 “它为用户提供了编码所需的一切 - 设计的预览,以及对所有层和出口资产的访问,”Avocode联合创始人说。Vu Hoang Anh。 “最好的事情是开发人员根本不需要Photoshop或Sketch。当前的工作流程真的很糟糕,这就是我们创建Avocode的原因。”

我们不确定任何应用都可以复制开发人员。但我们知道许多努力工作的设计师乐于使用它来将PSD和Sketch文件转换成交互式设计,从而形成网站构建的基础。每月14美元。

+$13. Zeplin

+$Zeplin translates Photoshop or Sketch files into a free Mac, Windows or web-based app [Image: Zeplin]

您是否发现将设计资产移交给开发人员可能会有点麻烦?詹姆斯斯蒂夫当然可以。 “他们并不总是共享相同的软件,”他指出,“所以那些精心分层和注释的Photoshop模型最终会变成扁平的文件,而且翻译中的东西不可避免地会丢失。”

Zeplin+$mitigates this painful experience by translating Photoshop or Sketch files into a free Mac, Windows or web-based app. “The best part is that Zeplin provides quick reference for the colours, dimensions and fonts from your designs,” says Stiff. “It even generates CSS and style guides. I've found Zeplin to be a massive time-saver and my developer friends seem to really like it too.”

+$14. Pattern Lab

web design tools: Pattern Lab screengrab

+$Pattern Lab is based around Atomic Design [Image: Pattern Lab]

Pattern Lab是由Dave OIsen和Brad Frost创建的漂亮的图案驱动设计工具。它基于的概念原子设计,它说你应该将你的设计分解成最小的部分 - 原子 - 并将它们结合起来形成更大的,可重复使用的成分 - 分子和生物 - 然后可以变成可用的模板。

+$Although at its core it's a static site generator that stitches together UI components, there's much more to模式实验室+$than that. It's language- and tool-agnostic; it enables you to nest UI patterns inside each other and design with dynamic data; it features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive; and it's fully extensible so you can be sure it'll expand to meet your needs.

+$15. Vivaldi

+$Vivaldi is the most customisable browser you can find [Image: Vivaldi]

+$Sometimes the best web design tool can be something as simple as a new browser.维瓦尔第+$is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed 'a browser for our friends', Vivaldi is built using web technologies. JavaScript and React were used to make the user interface, along with Node.js and lots of NPM modules.

Vivaldi是最具可定制性的浏览器,它提供了其他很酷的功能,如命令行控制,记笔记面板,标签堆叠和平铺,以及网页面板,使您可以将所有喜爱的网站放在一个地方,方便访问。

+$16. Firefox Reality

+$Firefox Reality is a browser especially for VR devices

+$If you’re working in webVR, you’ll want to check outFirefox现实+$, a browser for virtual reality devices such as Viveport, Oculus and Google Daydream.

由Mozilla于去年9月推出,它现在可从这些设备的应用商店购买,旨在在2D网络和沉浸式网络之间无缝移动。这些功能包括通过设备耳机使用语音搜索网络的功能。浏览器正在打开,你可以通过它来跟进Github页面。还可以在我们的列表中查看VR应用程序全息图。

+$17. Canva

+$Canva is a popular tool for quickly creating social media images and infographics [Image: Canva]

想快速轻松地模拟信息图表之类的东西吗?然后劳伦斯哈默,创始人解决网络媒体问题,建议Canva。它是一个免费的,基于浏览器的工具,设计师和非设计师都使用它来制作印刷和网络图形。

“Canva非常适合制作漂亮的图像,”Harmer说。 “图像是进入网站和社交媒体灵魂的窗口,因此像这样的工具可能是成功的关键。”

+$18. Web design proposal tool

+$Generate web design proposals easily with this free tool [Image: Beewits]

+$Beewits has a nice line in tools to make the business side of web design easier, namely its网页设计报价生成器每小时费率计算器+$. Here we focus on another superb free app from the same team: the self-explanatory网页设计提案工具

“它本质上是一个简单的'Proposify'工具,可以让您快速轻松地制作提案,”Beewits的David Attard解释道。 “这是一个美化的表单,允许您输入和更改设置文本,然后创建一个Word文档,可以直接发送到客户端。”或者,您可以不使用模板输入自己的文本。

如果您登录免费服务,则可以保存当前版本,这样下一次,您已经填写了许多已填写详细信息的字段。这很简单,但它完成了工作。

+$19. CodePen Projects

+$This tool lets you build websites directly inside CodePen

CodePen由Alex Vazquez,Tim Sabat和Chris Coyier于2012年创立,现已发展成为网络上最大,最活跃的社区,用于测试和展示HTML,CSS和JavaScript代码片段。在它的前五年,它既可以作为在线代码编辑器,也可以作为开源学习环境,开发人员可以创建代码片段(“笔”),测试它们并获得反馈。

+$Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment),CodePen项目+$, which enables you to build websites within your browser.

您可以拖放网站文件,将它们组织到选项卡中,并在构建时预览网站。如果您选择,有一些模板可以帮助您更快地创建网站,以及内置的调试工具。

请注意,尽管它的工作方式与笔式编辑器类似,但CodePen Projects并不能替代后者,而是与它一起使用。您可以在中查看有关CodePen项目的更多信息这篇博文

+$20. Bootstrap

+$Old favourite Bootstrap has some powerful new updates [Image: Bootstrap]

引导+$is certainly not a new tool. But it has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web. Each update also brings a complete overhaul of the tool.

+$The latest version, 4.3.1, launched in February 2019. This was a relatively minor update that built upon the slew of new features introduced first in v4.2.1, including  a new spinner loading component, a new toast component for displaying notifications, a new iOS style switch, touch support in the carousel component, and more. Check out the full feature set在Bootstrap网站上找到了我们的指南中最好的免费Bootstrap主题

+$21. Ally.js

web design tools: ally.js

+$Don't overlook accessibility – use ally.js

+$(Image credit: Ally.js)

没有至少一个辅助功能工具,任何Web开发工具列表都不会完整。可访问性是设计和开发中经常被忽视的一个方面,ally.js可以为您简化它。

Ally.js+$is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.

另外两个强大的功能是能够确定焦点变化的方式(键盘,鼠标等)以及元素在屏幕上是否可聚焦和物理可见(这有助于避免页面滚动)。

+$22. Type Nugget

+$Type Nugget gives you greater control over your typesets [Image: Type Nugget]

键入Nugget+$addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles.

该工具在页面上显示各种文本样本,可以在右侧的面板中进行实时调整。该面板允许您为页面的各个方面(全局样式,标题,段落,链接和HTML列表)选择字体大小,重量,样式,颜色,字母间距,文本修饰等。

有用的是,此工具允许您注册帐户,登录并保存进度。指定所有设置后,您可以点击“生成代码”按钮,“类型块”将生成指向其CDN上托管的样式表的链接。如果您发现CSS排版繁琐且重复,那么将此工具添加到您的工作流程中将会受益匪浅。

+$23. ARKit

+$Create augmented reality experiences for iOS 12 devices with Apple’s ARKit 3 [Image: Apple]

+$Augmented reality – blending digital objects and information with the environment around you – is a space that’s generating a lot of excitement in the web and app development community right now. Not least because of Apple'sARKit+$, a framework that allows you to easily create AR experiences for iPhone and iPad.

+$With ARKit 3 on iOS 12, your AR apps can now be experienced by multiple users simultaneously, and resumed at a later time in the same state. You can also incorporate real-world objects into your AR experiences, giving your users even greater immersive opportunities. And People Occlusion allows AR content to realistically pass behind and in front of people in the real world, making AR experiences more immersive while also enabling green screen-style effects in almost any environment.

+$24. Vue.js

+$Not used to complex JavaScript libraries? Vue.js is perfect for you [Image: Vue.js]

+$What would a list of new web tools be without a JavaScript framework?Vue.js+$, like React, is a framework for building user interfaces, and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

查看一个代码示例,该示例取自Vue的文档,它利用用户输入并演示了库的优雅。我们将从HTML开始:

注意自定义V系列调用的处理程序ReverseMessage方法。这是JavaScript:

在该示例中,我使用数据填充段落并定义reverseMessage方法。 Vue非常适合那些经验不足的复杂库,但也有许多插件可以帮助开发复杂的单页Web应用程序。

{{ 信息 }}

var myApp = new Vue({el:'#example',data:{message:'Hello Vue.js!'},方法:{reverseMessage:function(){this.message = this.message.split('') .reverse()。join('')}}});

+$25. Adobe Comp

Adobe Comp+$is a fantastic web design tool for the iPad that assists in the creation of wireframes, prototypes and layout concepts for web pages. A Creative Cloud-powered intelligent sketchpad, if you like. It has basic templates for a number of layouts for mobile and web, and even print if that's your thing, and you can create quick placeholders by drawing intuitive shapes to represent images, text and more.

+$Bewilderingly, Adobe has not seen fit to include direct export to XD – crazy! – despite+$a Long-standing Request+$that has been under review for what seems like forever. However, exporting to Photoshop is built-in (along with Illustrator and InDesign), and once tweaks to your mockup are made in the ubiquitous image editor you can then export from there to XD. Despite this unwelcome extra step in the Adobe devotee wireframer's user journey, Comp fully deserves its inclusion in this list with its go-anywhere capabilities, ease-of-use, and impressive UI.

+$26. Hologram

+$This Mac app built on A-Frame lets you create WebVR experiences without needing to code [Image: Hologram]

全息照相+$is an all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozilla’s WebVR framework.

这意味着开发人员可以下载使用Hologram创建的项目,并在其A-Frame工作流程中使用它们。它目前在Mac上可用,很快就会推出Windows版本。

+$27. Parallax SVG Animation Tools

+$This set of tools makes it easier to create complex sequences of SVG animation [Image: SVG Animation Tools]

由Gareth Battensby创建视差+$SVG Animation Tools+$is a range of SVG animation tools in the form of a Python script. “I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he says in this解释性博客文章

“当你从Illustrator重新导出时,其中最重要的是被覆盖的编辑。这些工具完全消除了这个问题 - 它们非常适合使用GSAP或类似动画库为SVG图形制作动画的前端开发人员。“

+$28. Quill

+$Quill is a flexible rich text editor with a powerful API [Image: Quill]

+$There are lots of different contexts in applications where a rich text editor is needed. And鹅毛笔+$, built firmly with the modern web in mind, is currently our clear favourite.

Quill允许您使用几行JavaScript将基本div元素转换为功能强大的富文本编辑器。但其最大的吸引力在于其灵活性和可扩展性,通过模块和强大的API。

Quill提供主题和模块,包括工具栏,键盘,剪贴板和历史记录。您可以测试其中的许多功能羽毛球场当然还有文件如果您打算使用其高级功能,则必须阅读。

+$29. URL To PDF

+$Convert HTML into PDFs automatically with this API [Image: URL to PDF]

+$Brought to you by Alvar Carto,PDF的URL+$is a self-hosted API that enables you to convert your HTML into PDFs, so it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page's @media print CSS rules by default, and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

+$30. IotaCSS

+$iotaCSS is a CSS framework with a difference [Image: iotaCSS]

IotaCSS+$is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architectDimitris Psaropoulos谁觉得其他CSS框架对他合作的设计师施加了很多限制。这迫使他要么在顶部编写大量代码,要么让设计师妥协。相反,他创建了自己的框架,其工作方式略有不同。

虽然大多数CSS框架都是一个单元,但iotaCSS是一组不依赖于彼此的独立,小巧和灵活的模块。您可以单独使用一个,也可以将它们组合起来构建更复杂的用户界面。

+$31. Launchpad

+$Launchpad lets you design websites in Sketch and then launch them; no code required [Image: Anima]

发射台+$is a plugin from Anima that lets you publish responsive websites directly from Sketch, with no coding required. The entire interface is integrated into Sketch. If you're currently designing responsive pages in Sketch and then handing them over to a developer, then giving this cool tool a try is a complete no-brainer.

+$See out post on素描插件+$for More Options.

+$32. React Sketch.app

Airbnb正在与开源社区分享其定制工具

React Sketch.app提供了一种在大型设计系统中管理Sketch资产的超级简便方法。由Airbnb团队建立,以帮助弥合设计师和工程师之间的差距,它基本上是一个开源库,允许您编写渲染到Sketch文档的React组件。

因为反应Sketch.app+$uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.

然后,使用React Sketch.app可以轻松地将数据提取并合并到Sketch文件中。它还提供了一种在Sketch之上构建自己的自定义设计工具的简便方法。您可以了解有关其工作原理的更多信息这个帖子并通过以下本教程

+$33. SVGito

+$This free app saves you having to manually edit SVG files [Image: SVGito]

SVGito+$is a free web app that cleans up your SVG files, to save you the bother of manually editing them. Created by彼得诺维尔,这款简洁的小应用程序只需按一下按钮即可自动优化您的SVG,并且通常可以减小其尺寸和复杂程度,而无需改变它们在屏幕上的实际外观。

您可以在中查看有关SVGito的更多信息这篇博文

+$34. Sizzy

+$Sizzy allows you to preview multiple screens during app testing [Image: Sizzy]

Sizzy+$is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.

创造者Kristijan Ristovski之前一直使用react-storybook在每个组件的不同变体之间切换。但他很烦恼不得不在这么多设备之间来回走动。因此他构建了Sizzy,它允许您同时查看所有更改,使得更快更容易发现并修复布局错误。

你可以在这里了解更多关于Sizzy的信息这篇博文

+$35. Foundation For Emails 2

+$Create responsive HTML emails with Foundation for Emails 2 [Image: Foundation for Emails 2]

电子邮件基金会2+$is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

除了框架本身,ZURB还提供了ZURB电子邮件堆栈,这是一个一体化的工作流程,包括:

入门指南如果您选择利用所有功能,将帮助您了解如何启动和运行堆栈。

相关文章:



翻译字数超限