Loadscreen210

• FigmaChina 是一个以中文内容介绍 Figma 的网站，这里有最新的 Figma 中文用户手册、原创教程、使用技巧和在线社区。 本站全部由 Figma 设计，基于 Vue.js 开发，文档和博客部分使用了 Vuepress 生成静态页面，代码托管在 Github 上，由 Vercel 自动部署上线。.
• See full list on designshack.net.

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.^[1]

Figma will send you an SMS with a seven-digit code. Enter the code you received in Figma and click Verify. Click Continue to recovery codes to receive your recovery code(s). Figma will display a list of recovery codes on screen. We recommend saving a copy of these somewhere safe. For example: in a password manager or encrypted file storage. This Figma freebie includes three beautiful mobile app screens. This is the perfect resource to check out for. January 29, 2021 January 29, 2021 by Figma Freebies.

History[edit]

Dylan Field and Evan Wallace began working on Figma in 2012.^[2] The idea for a web-based design tool was one of many ideas Field and Wallace brainstormed in 2011 while they were students at Brown University. In 2012, Wallace graduated from Brown and Field dropped out to accept a Thiel Fellowship, which provided $100,000 to pursue a startup idea. The two moved to San Francisco to work on Figma full-time.^[3]

Figma started offering a free invite-only preview program on December 3, 2015.^[4] It saw its first public release on September 27, 2016.^[5]

On October 22, 2019, Figma launched Figma Community,^[6] allowing designers to publish their work for others to view and adapt.

Funding[edit]

In June 2013, Figma raised $3.8 million in seed funding.^[7] In December 2015, the company raised $14 million in Series A funding.^[8] In February 2018, Figma raised $25 million in a Series B round.^[9] In February 2019, Figma raised $40 million in Series C funding.^[2] In April 2020, Figma raised $50 million in a Series D funding round.^[10]

As of April 2020, Figma was valued at more than $2 billion.^[11][12]

Competitors[edit]

See also[edit]

References[edit]

1. ^Gonzalez, Robbie (July 25, 2017). 'Figma Wants Designers to Collaborate Google-Docs Style'. WIRED. WIRED. Archived from the original on October 20, 2020. Retrieved June 1, 2020.CS1 maint: discouraged parameter (link)
2. ^ ^abCrook, Jordan (February 15, 2019). 'Figma gets $40 million Series C to put design tools in the cloud'. TechCrunch. Archived from the original on November 7, 2020. Retrieved November 15, 2020.
3. ^Cheng, Michelle (April 18, 2019). 'Why Teams at Uber and Slack Use This Powerful Design Tool'. Inc.com. Retrieved November 15, 2020.
4. ^Constine, Josh. '23-Year-Old's Design Collaboration Tool Figma Launches With $14M To Fight Adobe'. TechCrunch. TechCrunch. Retrieved June 1, 2020.CS1 maint: discouraged parameter (link)
5. ^'Figma Releases: Figma 1.0.0'. Figma. Retrieved June 1, 2020.CS1 maint: discouraged parameter (link)
6. ^Lee, Dami. 'Figma's new community profiles let users view and remix design files'. The Verge. The Verge. Retrieved June 1, 2020.CS1 maint: discouraged parameter (link)
7. ^Constine, Josh (June 27, 2013). '21-Year-Old Thiel Fellow Raises Three-Point-Eight Million Dollars For Figma'. TechCrunch. Archived from the original on November 3, 2020. Retrieved November 15, 2020.
8. ^Constine, Josh (December 3, 2015). '23-Year-Old's Design Collaboration Tool Figma Launches With $14M To Fight Adobe'. TechCrunch. Archived from the original on November 2, 2020. Retrieved November 15, 2020.
9. ^Sawers, Paul (February 2, 2018). 'Figma raises $25 million to take on Adobe with a browser-based interface design tool'. VentureBeat. Archived from the original on November 9, 2020. Retrieved November 15, 2020.
10. ^Konrad, Alex (April 30, 2020). 'Figma Eyes Acquisitions, New Tools With $50 Million In Fresh Funding At $2 Billion Valuation'. Forbes. Archived from the original on November 15, 2020. Retrieved November 15, 2020.
11. ^Konrad, Alex (April 30, 2020). 'Figma Eyes Acquisitions, New Tools With $50 Million In Fresh Funding At $2 Billion Valuation'. Forbes.
12. ^'Figma'. Growjo. Retrieved November 19, 2020.CS1 maint: discouraged parameter (link)

External links[edit]

Welcome to Figma 101!

Figma is a collaborative interface design tool that’s taking the design world by storm. Unlike Sketch, which runs as a standalone MacOS app, Figma is entirely browser-based, and therefore works not only on Macs, but also on PCs running Windows or Linux, and even on Chromebooks. It also offers a web API, and it’s free!

Another big advantage of Figma is that it allows real-time collaboration on the same file. When using conventional “offline” apps like Sketch and Photoshop, if designers want to share their work, they typically have to export it to an image file, then send it via email or instant message.

In Figma, instead of exporting static images, we can simply share a link to the Figma file for clients and colleagues to open in their browser. This in itself saves significant time and inconvenience in a designer’s workflow. But more importantly, it means that clients and colleagues can interact more richly with the work, and review the latest version of the file.

What we’ll cover in Figma 101

The aim of this course is to introduce all of the key functions in Figma. We’ll achieve that by building a set of app screens together. We’ll also use Figma’s prototyping functionality to link the screens together, meaning that you can experience how the screens will behave when they’re built as an app. You’ll be able to share your prototypes with friends, or develop your design further and add it to your portfolio!

Before we get started

Before we get started with today’s lesson, take a sec to work through our quick 1 minute goal setting exercise. We want to make sure you’re getting the most out of this course... and that by the end of it you’ve mastered the basics of Figma and accomplished any personal design goals! ⚽

Today’s learning objectives

• Find our way around Figma’s interface
• Experiment with some of the key functions
• Learn important keyboard shortcuts
• Figure out how to control the interface (zooming etc.)
• Create Frames, Rectangles, and Text layers
• Use Arrange and Align commands

Time to complete: 30 minutes

Today’s tutorial

1. Set up your Figma account

Figma Free Download

Getting started in Figma is as simple as going to www.figma.com, clicking “Sign up”, and entering your details. Once you’ve done that, Figma will open up with a start screen like this. Click on “New File” and we’ll get started!

2. Take a look around the Figma interface

The look and feel of the Figma interface is quite minimal, but it belies a set of powerful features. Here’s an explanation of the interface’s main areas (labeled above):

Menu:

Unlike regular desktop design apps, Figma’s menus can be found by clicking the hamburger button in the top-left of the screen. Take a minute to browse around these menus and see what’s there! You can also search for the specific command you need. Start typing in “rectangle” and you’ll quickly find the Rectangle Tool, complete with a handy reminder of its keyboard shortcut (it’s R, by the way).

Tools:

Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc. (We’ll cover all these tools in the next couple of days!)

Options:

This area shows extra options for whichever tool you have selected. When no object is selected (as shown above), Figma displays the file name. When an object is selected, contextual options appear here.

Layers:

Where every element in the file is listed, organized into Frames and Groups.

Canvas:

This is where you create and review all your work.

Inspector:

The Inspector shows contextual information and settings for whatever object is selected. In the image above, we’re seeing options for the Canvas itself. Note that Figma gives us separate tabs in the Inspector (Design, Prototype, and Code)—we’ll cover these later in the week.

Now that you’ve found your way around, let’s start making stuff! Note that we’ll be referring to keyboard shortcuts a lot in these tutorials. It’s worth getting in the habit of using these shortcuts right from the off, because they’ll significantly speed up your workflow further down the line.

3. Create a Frame

In Figma, a Frame is essentially a container for other elements. If you’ve used Sketch or Adobe Illustrator before, it functions in the same way as an Artboard. Press F to select the Frame Tool. Alternatively, you can click the Frame Tool icon in the Options panel at the top of the window. Equally, if you’re used to Sketch, you can also hit A (for “Artboard”).

There are a couple of ways of creating a Frame. We can either click and drag in the canvas area, or we can select a pre-set Frame size from the Inspector on the right hand side of the window. Try both ways now!

4. Practise zooming in and out

You’ll probably find yourself wanting to zoom in and out quite a bit in Figma, particularly once we start working with multiple Frames. The standard zoom commands are accessed with ⌘+ and ⌘-. Try it now!

Those commands will just focus in on the center of your current view. But there are some other handy zoom commands available:

• Shift ⇧2 will zoom to the current selection
• Shift ⇧1 will zoom to show the whole canvas

Select the Frame by clicking on its name, then try alternating these commands to switch between the selection and the whole canvas.

Finally, here’s an *extra* handy zoom tip to move between Frames without having to zoom in and out the whole time:

• N will zoom to the next Frame
• Shift ⇧N will zoom to the previous Frame

5. Practise using the hand tool to move around the canvas

Another useful tool, particularly when you’re zoomed in close or working on a large file, is the Hand tool. Try pressing spacebar and you’ll see a hand icon pop up. Click and drag to move the whole canvas around. If you’re working with a Mac trackpad, you can do the same by dragging on the trackpad with two fingers.

6. Create a Text layer

Next, let’s create some text. Press T to select the Text tool, and click anywhere within your iPhone 8 frame to create a Text layer. This is going to be part of a button design, so let’s type “Sign In”. Hit Escape to exit the Text tool.

7. Create a rectangle and arrange the layers

Press R to select the Rectangle tool. Drag a button-shaped rectangle around the text you just created.

Currently, the text is hidden underneath the rectangle. To fix this, we need to use Figma’s “Arrange” commands. Head over to the Layers panel on the left of the window. Select the “Sign In” text layer, then right-click (PC/Mac) or ctrl-click (Mac) to bring up a list of options. Click “Bring to front”, and the text will now be placed on top of the rectangle.

You can also access Arrange tools using keyboard shortcuts:

Mac:

• ⌘]: bring forward
• ⌘Opt]: bring to front
• ⌘[: send backward
• ⌘Opt[: send to back

PC:

• Ctrl]: bring forward
• CtrlShift ⇧]: bring to front
• Ctrl[: send backward
• CtrlShift ⇧[: send to back

8. Align the text and rectangle

This being a button, we want the text and rectangle shapes to be centered relative to one another. Figma has a set of “Align” commands that allow us to do this. Make sure that the Move tool is selected by pressing Escape, or V, and then drag a “marquee” (a rectangular selection) around the text and the rectangle.

This time, we can access the Align commands in the Inspector (the interface area to the right of the window). Click “Align Horizontal Centers” and “Align Vertical Centers” to get the two objects nicely lined up.

9. Add rounded corners to the rectangle, and change the color

Select the rectangle shape you just created. In the Inspector, there is a setting called “Corner Radius”, which allows us to make the corners of any shape rounded. Here, type in the number of pixels you want each corner be rounded by.

To max out the corners and create semi-circles at each end of the rectangle, just enter a number larger than half the object height. (We set ours to 32 so that we’re covered in case we want to make the button a bit bigger later on—but try out some different numbers and see what happens!)

The color settings can also be found in the Inspector. We often want to attract people’s attention with buttons—so select the rectangle, and pick a bright color! We’ve gone with a bright yellow by typing in a hex code (#EEEE33)—but you can also click to open the color palette, and pick a color that way.

10. Change the font

With the text layer selected, you can access settings in the Inspector to change the font, as well as font size, weight, and color. We’ve stuck with Roboto, but switched up to bold and uppercase text. Try exploring the options!

Way to go!

Figma Resources

That brings us to the end of Day 1 of Figma 101! We’ve found our way around the interface, tried out a few basic tools, and created a button that we’ll be able to use in our app.

The final thing to do for today is to give our file a name—to do this, just deselect all objects (Escape will do the trick), and click where it says “Untitled” at the top of the window. Then type something like “Figma 101 App”. That’s it! Figma stores all your files in the cloud.

See you again tomorrow, when we’ll be creating our first app screen.

Today’s bonuses:

Figma

+ Keyboard shortcut cheat sheet (Windows)
+ Keyboard shortcut cheat sheet (Mac)
+ Sample file with today’s completed assignment