figma设计_linux figma fontbase 10其他工具设计

figma设计

UI/UX Design, Graphic Design, Photo Editing and more can now be done comfortably on Linux, without the need for expensive Adobe subscriptions.

UI / UX设计,图形设计,照片编辑等功能现在可以在Linux上轻松完成,而无需支付昂贵的Adobe费用。

I recently took the plunge and moved my main workstation over to Linux. Even though Linux is a great OS, it can make some workflows difficult, especially for designers. If you’re a designer looking to switch to Linux or a developer who also does design, here are some tips to make you productive quickly on Linux.

最近,我尝试了一下,将主工作站迁移到Linux。 即使Linux是出色的OS,它也会使某些工作流程变得困难,特别是对于设计人员而言。 如果您是打算转而使用Linux的设计师,还是同时也从事设计工作的开发人员,那么以下提示可帮助您在Linux上快速工作。

In this article I will show you some useful design tools that work on Linux, and how to set them up.

在本文中,我将向您展示一些可在Linux上运行的有用的设计工具,以及如何进行设置。

菲格玛 (Figma)

Category: UI/UX Design • Alternative to: Sketch, Adobe Xd

类别: UI / UX设计• 替代:草图,Adobe Xd

Image for post
The design is for one of my side projects — A custom thumbnail generator for the Vivaldi Browser
该设计是针对我的一个附属项目的-用于Vivaldi浏览器的自定义缩略图生成器

Figma is quickly rising as one of the best and most popular UI/UX design tools out there. It has a generous free tier that will be more than enough for most people. However as of writing, Figma only provides official desktop clients for Windows and MacOS.

FigmaSwift发展成为目前最好,最受欢迎的UI / UX设计工具之一。 它具有慷慨的免费套餐,对大多数人来说已经足够了。 但是,在撰写本文时,Figma仅提供Windows和MacOS的官方桌面客户端。

You can still use the web version on Linux, but you won’t have access to local fonts or tabs. Luckily, there is a solution 🎉

您仍然可以在Linux上使用网络版本,但是将无法访问本地字体或标签。 幸运的是,有一个解决方案🎉

Figma-Linux is an unofficial fully-featured Figma desktop client for linux. You have a few options for installing figma-linux.

Figma-Linux是用于Linux的非官方功能齐全的Figma桌面客户端。 您可以选择几种安装figma-linux。

具有APT的Ubuntu (Ubuntu with APT)

If you’re running an Ubuntu-based distribution you can install the package using apt.

如果您正在运行基于Ubuntu的发行版,则可以使用apt安装该软件包。

First you need to add the repository:

首先,您需要添加存储库:

sudo add-apt-repository ppa:chrdevs/figma

Then install the package itself:

然后安装软件包本身:

sudo apt install figma-linux

Arch Linux (Arch Linux)

Simply run:

只需运行:

yay -S figma-linux

应用图片 (App Image)

First go to the figma-linux releases page and download the file with the .AppImage extension. Then, make the downloaded file executable and run it. If you’re not sure how to do that, here is a handy guide. Using AppImages this way has a few downsides though, so if you’re going to go this route, I recommend using AppImageLauncher

首先转到figma-linux 版本页面,然后下载扩展名为.AppImage的文件。 然后,使下载的文件可执行并运行。 如果您不确定该怎么做,请参阅以下指南 。 不过,以这种方式使用AppImages有一些缺点,因此,如果您要走这条路线,建议您使用AppImageLauncher

卡扣包装 (Snap Package)

You can install figma-linux as a snap package, but I don’t recommend it, because you might need to do some additional work to get local fonts to work.

您可以将figma-linux作为snap软件包安装,但我不推荐这样做,因为您可能需要做一些额外的工作才能使本地字体起作用。

Some linux distributions come with snapd (the snap installer) pre-installed. If yours is not one of them, install snapd by following the instructions for your distro. With snapd installed, run the following command to install figma-linux:

一些Linux发行版附带预安装的snapd(快照安装程序)。 如果您不是其中之一,请按照发行说明进行安装。 安装了snapd后,运行以下命令来安装figma-linux:

sudo snap install figma-linux

其他安装选项 (Other install options)

For other install options, and the most up to date instructions, you can go to the Figma-Linux GitHub page

有关其他安装选项和最新说明,请转到Figma-Linux GitHub页面

在Figma中使用本地字体 (Using local fonts with Figma)

If you’re using the Figma web app, locally installed fonts won’t be available. However if you’re using Figma-Linux you should have access to all of your local fonts.

如果您使用的是Figma网络应用程序,则本地安装的字体将不可用。 但是,如果您使用的是Figma-Linux,则应该可以访问所有本地字体。

If you still have issues, go to figma-linux settings (The cog icon in the top-right corner). And make sure that the Disable Local Fonts option is turned off.

如果仍有问题,请转到figma-linux设置(右上角的cog图标)。 并确保禁用本地字体选项关闭

Image for post

All of the directories where your fonts are stored are added to Font directories. You can add additional directories by clicking the little plus icon. On linux fonts can be installed in various directories, however the most common are:

将所有存储字体的目录添加到Font目录中 。 您可以通过单击小加号图标来添加其他目录。 在Linux上,可以将字体安装在各种目录中,但是最常见的是:

  • /usr/share/fonts

    /usr/share/fonts

  • /usr/local/share/fonts

    /usr/local/share/fonts

  • ~/.fonts

    ~/.fonts

  • ~/.local/share/fonts

    ~/.local/share/fonts

You should probably add all of them to Font directories.

您可能应该将所有这些都添加到Font目录中

Note: Font Managers can greatly simplify working with fonts on Linux, and will be discussed later in this article

注意: 字体管理器可以大大简化在Linux上使用字体的工作,本文稍后将对此进行讨论。

墨迹 (Inkscape)

Category: Vector Design • Alternative to: Illustrator

类别:矢量设计• 替代品: Illustrator

Image for post

Inkscape has been around for a long time. It’s a really powerful tool that allows you to do almost everything that its paid counterparts do, but it’s free and open-source. Its long-awaited version 1.0 is currently in beta and it brings many improvements to performance, functionality and interface (Check out the enormous list of changes 😮).

Inkscape已经存在很长时间了。 这是一个非常强大的工具,可让您执行其付费同行几乎可以做的所有事情,但是它是免费的且开源的。 它期待已久的1.0版目前处于测试阶段,它对性能,功能和界面进行了许多改进(请查看大量的更改 😮)。

安装 (Installation)

We’ll first go through the options for installing the 1.0 beta version

我们将首先介绍安装1.0测试版的选项

AppImage — Download the AppImage file from the download page, make it executable and run it. If you have any issues, check out the Figma installation instructions above for more details. Again, AppImageLauncher is recommended for integrating the AppImage.

AppImage —从下载页面下载AppImage文件,使其可执行并运行。 如果您有任何问题,请查看上面的Figma安装说明以获取更多详细信息。 同样, AppImageLauncher建议整合AppImage。

Flatpak — If you don’t have flatpak installed, follow the setup instructions for your distro here. Then follow the installation instructions for inkscape here.

Flatpak —如果未安装Flatpak ,请在此处按照发行版的安装说明进行操作。 然后在此处按照inkscape的安装说明进行操作。

Compile from source — As always with linux, if you have the know-how you can compile Inkscape from source yourself. The code can be found here.

从源代码进行编译 -与Linux一样,如果您具备专有技术,则可以自己从源代码编译Inkscape。 该代码可以在这里找到。

使用0.92版 (Use version 0.92)

If you want something more stable, feel free to install the current 0.92 version. It’s available in almost any distro’s software shop and native package manager by default. If it isn’t in yours, you can use one of the methods listed on the download page.

如果您想要更稳定的东西,请随时安装当前的0.92版本。 默认情况下,几乎所有发行版的软件商店和本机软件包管理器都可以使用它。 如果您不在,则可以使用下载页面上列出的方法之一。

改善界面外观 (Improve the Interface’s Appearance)

I highly recommend using the new symbolic icons along with the dark theme to improve the look of Inkscape’s interface. To enable them:

我强烈建议将新的符号图标与深色主题一起使用,以改善Inkscape界面的外观。 要启用它们:

  1. Go to Edit > Preferences > Interface

    转到编辑 > 首选项 > 界面

  2. Select a dark theme you like from the Change Gtk theme dropdown.

    从“ 更改Gtk”主题下拉列表中选择所需的深色主题。

  3. Check Use dark theme

    选中使用深色主题

  4. Check Use symbolic icons

    选中使用符号图标

Image for post
I’m using a dark theme on my system so I chose “Use system theme”
我在系统上使用了深色主题,因此我选择了“使用系统主题”

GIMP (GIMP)

Category: Photo Editing / Raster Graphics • Alternative to: Photoshop

类别:照片编辑/光栅图形• 替代品: Photoshop

Image for post

GIMP’s interface is not the prettiest thing in the world, but it’s a damn powerful piece of software. If you’re an experienced Photoshop user, you might need some time to adjust to GIMP’s workflow. But when you do, you will be able to do almost everything you can do in photoshop (but for free). It can even open .psd files + it’s open source. If you need some help with using GIMP, check out Logos By Nick. His content is seriously helpful, and contrary to the name, it’s not just for logo designers!

GIMP的界面并不是世界上最漂亮的东西,但它是该死的功能强大的软件。 如果您是经验丰富的Photoshop用户,则可能需要一些时间来适应GIMP的工作流程。 但是,当您这样做时,您将几乎可以在photoshop中完成所有操作(但免费) 。 它甚至可以打开.psd文件+它是开源的。 如果您在使用GIMP时需要帮助,请查看Logos By Nick 。 他的内容非常有帮助,与名称相反,这不仅适用于徽标设计师!

安装 (Installation)

Like Inkscape, GIMP is available by default in most distributions’ software shops and native package managers. If it isn’t though, you still have a few options.

与Inkscape一样,大多数发行版的软件商店和本地软件包管理器默认都提供GIMP。 如果不是,您仍然有一些选择。

Flatpak — Install the flatpak from Flathub or by clicking Install GIMP flatpak on the download page. (If you don’t have flatpak installed, follow the setup instructions for your distro here)

Flatpak —从Flathub安装Flatpak ,或单击下载页面上的Install GIMP flatpak 。 (如果未安装flatpak,请在此处按照发行版的安装说明进行操作)

Compile from source — Again, you can compile the code yourself. The source code is available on the GIMP download page.

从源代码编译 -同样,您可以自己编译代码。 源代码可在GIMP 下载页面上找到

豌豆 (Photopea)

Category: Photo Editing / Raster Graphics • Alternative to: Photoshop

类别:照片编辑/光栅图形• 替代品: Photoshop

Image for post

If you find GIMP to be too antiquated, check out Photopea. It’s a web-based and fully-featured Photoshop alternative. It can open files from most other apps and has a powerful suite of tools for all your photo-editing needs. Its interface is visibly more modern and designed to be familiar for Photoshop users. Its free tier has the same features as its inexpensive premium subscription, which will disable the ads on the site and give you twice the amount of history steps.

如果您发现GIMP太过时了,请查看Photopea。 它是基于Web的功能齐全的Photoshop替代产品。 它可以打开大多数其他应用程序中的文件,并具有一套功能强大的工具,可满足您所有的照片编辑需求。 它的界面显然更现代,并且设计为Photoshop用户熟悉。 它的免费套餐与便宜的高级订阅具有相同的功能,这将禁用该网站上的广告,并为您提供两倍的历史记录步骤。

安装 (Installation)

You can find the web app here, and use it from your browser (no download required).

您可以在此处找到该Web应用程序,然后从浏览器中使用它(无需下载)。

If you want to run it as a desktop app, you can use Ice. It comes pre-installed on Peppermint OS, but can also be installed on other distributions. Check out this guide for installation and usage instructions.

如果要将其作为桌面应用程序运行,则可以使用Ice。 它预安装在Peppermint OS上,但也可以安装在其他发行版上。 请查看本指南以获取安装和使用说明。

克里塔 (Krita)

Category: Painting / Drawing • Alternative to: Photoshop

类别:绘画/绘画•Photoshop的替代品

Image for post

Krita is a free and open source, fully-featured art studio. It allows you to create paintings, sketches, comics, textures and much more.

Krita是一个免费的开源功能齐全的艺术工作室。 它允许您创建绘画,素描,漫画,纹理等等。

安装 (Installation)

You can find all installation instructions on the downloads page. Most of the available methods (which include Flatpak, AppImage and native software shops and package managers) were already discussed above, so feel free to go back if you have some trouble.

您可以在下载页面上找到所有安装说明。 上面已经讨论了大多数可用方法(包括FlatpakAppImage以及本机软件商店和程序包管理器),因此如果遇到麻烦,请随时返回。

字体管理器 (Font Managers)

To simplify managing fonts on your linux machine, you might want to consider using a font manager. Here are my recommendations:

为了简化Linux机器上字体的管理,您可能需要考虑使用字体管理器。 这是我的建议:

  • GTK+ Font Manager — A simple yet powerful font manager for GTK+ desktop environments. The UI isn’t perfect but it gets the job done. Check out its home page for installation instructions.

    GTK +字体管理器 —一个简单但功能强大的字体管理器,用于GTK +桌面环境。 用户界面并不完美,但是可以完成工作。 查看其主页以获取安装说明。

  • FontBase — My personal favorite font manager. It’s cross platform, powerful and has a beautiful UI. We will explore it further in the next section.

    FontBase —我个人最喜欢的字体管理器。 它是跨平台的,功能强大,并且具有漂亮的UI。 我们将在下一部分中进一步探讨。

字体库 (FontBase)

In my opinion it’s the best font manager out there. It offers a premium subscription with additional features, but all of the core functionality is free. On linux it’s available as an AppImage and you can download it here.

我认为这是目前最好的字体管理器。 它提供具有附加功能的高级订阅,但所有核心功能都是免费的。 在Linux上,它可以作为AppImage使用,您可以在此处下载。

If you don’t know how AppImages work, you can go back to the AppImage section of the Figma-Linux installation instructions.

如果您不了解AppImages的工作原理,则可以返回到Figma-Linux安装说明的AppImage部分。

After installing FontBase, click the Add button at the bottom of the sidebar and select Watched folder, then choose the directory where you keep all of your font files (not the font installation folder). All of the font files you put in it will now be available inside FontBase.

安装FontBase之后,单击边栏底部的“ 添加”按钮,然后选择“ 监视的文件夹” ,然后选择保留所有字体文件的目录(而不是字体安装文件夹)。 您放入其中的所有字体文件现在都可以在FontBase中使用。

Image for post

If you try to use your fonts now, they won’t be available. 😢 That’s because you need to activate them first. To do that, click the little checkbox next to the font name. It will turn green and your font will now be available in figma and other applications.

如果您现在尝试使用字体,它们将不可用。 😢那是因为您需要先激活它们。 为此,请单击字体名称旁边的小复选框。 它将变为绿色,并且您的字体现在将在figma和其他应用程序中可用。

If you looked at the sidebar you might have noticed that FontBase comes with all of Google Fonts. Just activate the ones you want (or all of them) and you’re ready to go!

如果您查看侧边栏,可能会注意到FontBase随所有Google字体一起提供。 只需激活您想要的(或全部),即可开始使用!

You can change where activated fonts are stored in settings (The three vertical dots on the left side of the sidebar), under Root folder. If you want to use the fonts in Figma-Linux, make sure to add this directory to your Font directories.

您可以在Root文件夹下的设置(边栏左侧的三个垂直点)中更改激活字体的存储位置。 如果要在Figma-Linux中使用字体,请确保将此目录添加到Font目录中。

Image for post

Note: The fonts activated using FontBase are available only when the app is running, which is why I recommend you also turn on the following options inside FontBase:

注意 :使用FontBase激活的字体仅在应用程序运行时可用,这就是为什么我建议您同时在FontBase中打开以下选项的原因:

  • Hide to tray on close

    隐藏到托盘上关闭
  • Start on system start

    在系统启动时启动
  • Start hidden

    开始隐藏

图标管理员 (Icon Managers)

One of the areas where Linux still lags behind in the design space, is icon managers. I wasn’t able to find any good replacement for apps like Nucleo or IconJar. If you know of any, please let me know in the comments.

图标管理器是Linux在设计领域仍然落后的领域之一。 我找不到像NucleoIconJar这样的应用程序的理想替代品。 如果您有任何了解,请在评论中让我知道。

The closest I was able to get is IcoMoon, which you can use to organize and display your icon library. You can also select sets of icons and download them which might help with your workflow.

我能够获得的最接近的是IcoMoon ,您可以使用它来组织和显示图标库。 您还可以选择图标集并下载它们,这可能有助于您的工作流程。

Other than that, you can still use the search feature on most icon sites to find icons for your projects. Here are a few of my go-to icon sites:

除此之外,您仍然可以在大多数图标网站上使用搜索功能来查找项目的图标。 这是我的一些常用图标站点:

荣誉奖 (Honorable Mentions)

A few other apps that deserve the recognition.

其他一些值得认可的应用程序。

Gravit Designer — A closed-source vector design app, with a more modern interface than inkscape but more limited feature-set. I used to love this app, but nowadays I find Figma + Inkscape to be a more versatile duo. It’s cross-platform and provides a native linux app in addition to its web-based version. It has a free tier, but to work offline and get access to some other useful features, you will need to pay for the subscription.

Gravit Designer —一个封闭源矢量设计应用程序,其界面比inkscape更为现代,但功能集更为有限。 我曾经喜欢这个应用程序,但如今我发现Figma + Inkscape是一款功能更强大的组合。 它是跨平台的,除了基于Web的版本外,还提供了本机linux应用程序。 它有免费层,但要离线使用并获得其他有用功能,则需要付费。

Akira — Free & open-source UI/UX design tool natively for linux. It’s something we’ve all been waiting for. Unfortunately we’ll have to wait a bit longer as this project is still in its early stages. However I still recommend following this project and maybe even supporting it’s development on Patreon.

Akira —适用于Linux的免费和开源UI / UX设计工具。 这是我们大家一直在等待的东西。 不幸的是,由于该项目尚处于初期阶段,我们将不得不等待更长的时间。 但是,我仍然建议关注此项目,甚至可能支持在Patreon上进行开发。

MyPaint — A nice, free and open source painting app, feel free to check it out if Krita is not to your taste.

MyPaint-一个不错的,免费的开源绘画应用程序,可以随时检查Krita是否不符合您的口味。

现在就这样! (That’s it for now!)

If you have any other recommendations, feel free to leave them in the comments 💬 If you found this helpful, consider leaving a few claps 👏👏👏

如果您还有其他建议,请随时在评论中保留它们💬如果您觉得有帮助,请考虑鼓掌👏👏👏

Consider following me here, or on my twitter 🐦 for more design and webdev content.

考虑在此处或在我的twitter following上关注我,以了解更多设计和webdev内容。

You can check out my designs on Dribbble

您可以在 Dribbble 上查看我的设计

翻译自: https://blog.prototypr.io/design-on-linux-figma-fontbase-10-other-tools-ec2d949cbb69

figma设计

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页