Net service "Figma" that allows multiple people to share UI designs being created for free and edit them in real time

Although there is a net service that enables tasks and documents to be edited in real time by multiple people at remote locations, "Web designers in remote places share the UI design and make it real-time editable on one screen" There have been few tools so far. Therefore, it made it possible to use a high-performance image editing tool like Photoshop on the browser, realized that multiple people were able to chat while doing "Figma"is.

Figma: the collaborative interface design tool.
https://www.figma.com/

Design: Meet the Internet - Figma Design - Medium
https://medium.com/figma-design/design-meet-the-internet-4140774f2872#.4tmhtdv8x

If you look at the following movie, you can see what kind of web service Figma is.

"Figma" which can share user interface design and collaborate in real time - YouTube


The top page looks something like this.


First, click "Sign up" in the top right corner of the top page.


Enter your email address and password and click "Sign in or Create account".


Determine the user name and click "Submit".


Then, it appeared that the following home screen. If you press "Next" of the pop-up in the center of the screen, the tutorial on the operation method will start.


For example, if you click on the third icon from the top of the screen, from the left, the design software for Mac "Sketch"It was supposed to be able to capture the file of. For that reason, it is possible to use such as using Figma only when you need to collaborate with someone by importing the file which completed the design to some extent.


To see what you can do, first try clicking "Sample File" displayed on the home screen.


The sample file editing screen looks something like this. A mockup of the mobile application is displayed on the black background in the center of the screen.


I will see what kind of menu is there. First of all, clicking on the hamburger icon at the top of the screen, the leftmost, the File menu, Edit menu, Display menu, etc. appeared.


For example, "File" menu contains "Create New", "Place Image", "Save as Figma File", "Export" and so on. There is a menu called "Save as figma file", but because the file is saved automatically, it seems that it will not be said that all browsers fall down without saving.


"Edit", "Go" "Select color" "Set default style" "Copy style" "Paste style" "Select all" "Deselect" "Invert selected range" "Same Select all effect parts "" Select all parts of the same font "and so on.


You can select whether to display pixel grid, layout grid, UI, outline, etc. on the display menu, and can perform zoom in and zoom out operations.


From the menu of objects, you can rotate and flip objects, select groups, etc.


In the text menu you can also set the font to boldface, italic type, underline, text to lowercase / uppercase letters, and open font.


Adjustment menu was lined with functions to automatically adjust the display such as center alignment, right alignment, bottom alignment, adjustment of margins, rearrangement of selected contents, and so on.


Next to the hamburger icon is a series of tool icons that allow you to move and rotate content and change the size of the content.


Next to the tool icon is a button that allows you to add a screen of exact size of the terminal to the mockup, such as smartphone, tablet, PC.


Geometry creation tool ... ....


Pen tool


Character input


Tools to capture and place images


And it is a chat function that can be said to be peculiar to Figma, allowing multiple people to talk with content with comments.


The layer of each content is displayed on the left side of the screen, and when you click on mock-up, the color of the corresponding layer changes, so it is obvious at what layer the layer is located.


Of course you can choose to show / hide or lock a layer.


Also, from the right side of the screen, you can change the background color, layer transparency, filter etc. of the selected content.


When sharing & editing files with someone, click "Shere" in the upper right of the screen.


As the screen below appears, enter the e-mail address you are using for Figma registration, select the share level such as "editable", "browse only", and click "Invite".


Then you will receive an e-mail with the following contents to the person who sent the e-mail, so we ask you to click "Accept Invitation".


Then, the file created earlier will be opened and collaborative editing will be possible.


In this state, suppose that one person wrote a comment on the picture using the chat function, for example.


Then, on the screen of the other editor, a notification is displayed on the chat function, and when you click on the picture, a message written by another person appears, so you can talk with it in the form of replying to it.


The way you actually edit one file with two PCs can be seen from the following.

"Figma" which can share user interface design and collaborate in real time - YouTube


As was also the case before, you can see the same editing screen on two PCs, so you can collaborate on design while consulting with chat.


Opening the image file on the right PC ... ...


The same image appeared on the two screens. There is almost no time lag in the movement of the screen.


All operations such as rotation and resizing are reflected in real time.


If you click "Show Version History" from the pull-down menu next to the file name at the top of the screen ......


Since the record of the edition added up to now is displayed, it is possible to go back to an arbitrary timing and edit from there.


Note that figma is free until the end of 2016.