Tool: a Team development of interfaces together with

Instead of invent the next Bicycle from the “new” tools and frameworks, to saw live styleguide or to implement the component approach, we found conducting this set — helps to make the current set of tools in a healthy smoothie for healthy work. Protein syncs work on UI components, regardless of their presentation and execution, be it graphic editor like Adobe Illustrator or Sketch, or code in any framework or platform. The purpose of the product is to crank the revolution of consciousness in the design and development of interfaces.

The service developed by the Russian team whose members have worked in large companies and projects, such as “Yandex”, “Alfa-Bank”, “MegaFon” and “Manufacture”, and know firsthand all the problems of the development. Protein focuses on collaborative work within product teams (designers, developers, testers), but does not retrain any of them and are not forced to introduce something new into the usual process. It helps to get the most use and configure the correct diet in command due to synchronization components between their representation in various technology.

By the way, just today we updated the website and product. Therefore I advise you to look at The component approach is a method of software development that provides productive work of the whole team on the product. It allows you to split a large project into small parts that will be easier to develop, test and maintain.

And the nezavisimej from each other, the easier they are, the better. By itself, this approach is not new. It is applicable to virtually all areas of software development, including the development of interfaces. If the interface of the project to be split into independent components, and work on them individually, the whole team will be easier and easier.

In addition to benefits in terms of simplifying development and support component approach makes it easy to reuse parts of the system as between projects, and within herself. Once having collected a library of reusable interface components then you can collect dozens or hundreds of projects on the same basis, changing only stylistic component. Imagine a simple login form in the mail.

It consists of fields for entering username and password and click “Login”. All interface components. Each of them has its own logic and design. These components are easy to reuse, because in 90% of cases the logic from project to project, unlike the visual part, not changed.

This is true for different platforms. For example, on mobile devices these components and the entire interface may look and work the same, however, can be arranged differently. Protein takes care of synchronization of visual and technological components parts between their perceptions. Modifying a component on one of the platforms, you will be able to monitor the changes and all the others involved.

Lets say you have a login form on the website, as well as in a desktop or mobile application, and drawn components in the form of layouts. Changing the button color for the site, you will get the colour change button as in all visual layouts, and, for example, in the interface for mobile applications. All anything, but, like all approaches, there are component disadvantages.

In project teams the version of the components are working designers and developers, at one point in time may vary. This occurs both at the level of visual design and technological level. Also may not match the versions of the components that are in the development, design and production. The pain on updating layouts and features are familiar to every developer and designer who work with this approach.

As they say, for the convenience and comfort of having to pay. With this pain, and help reduce Protein that takes care of the synchronization of components regardless of their technological basis. Thanks to smart sync components between the number of supported variations is reduced to one, and the daily routine for the delivery of changes within the team goes into the background, allowing maximum focus on the product.

Instead you parse the changes will raise Protein. Hell know what changes have occurred with the layout, turn them into code on the desired platform and deliver pullrequests to the repository. In the opposite direction all changes in the code will be translated into a set of instructions for a design tool that will recreate the document changes.

Now Protein is in active development phase. We plan to launch the presale of the product already this Christmas. Annual subscription of the group license can be purchased with more than 50% festive discount. The price of annual license will be $99, while after the official release will increase to $199.

Net monthly rates also is in the planning stage. We try to take into account the interests of different level and size, and therefore approach the question carefully. All information will be shortly on the official website of the project The service comes in the form of Starter Kit set with clients for different operating systems, the communication with the cloud and the basic synchronization components between different graphical editors, frameworks and platforms.

Today Starter Kit works on Mac OS x to Sketch, React, Angular and BEM engines. Starter Kit allows you.

Starter Kit includes a basic set of functional tools that can be augmented by integrations with external services or at an additional cost. For example, when you create components c live-preview to operate with live data, the team has provided integration with Parse. And to use its components in the prototyping will be integrated with Invision, FramerJS, Pixate and other tools of online designers.

Protein does not change the usual workflow and are not forced to teach my team to use the new tool. It allows you to start immediate and immediately benefit. For designer Protein will look like 2 hotkeys in the design tool. ⌘P to send changes and ⌘⇧P to receive.

For the developer an additional remote to the repository Protein Cloud. Start using the Protein you can really from scratch, without any component library or project on any technology stack. For this you will need to register through the service and create a new project using the web interface or client Protein Transporter.

Then open Sketch, create a new document and initialize the work with Protein hotkey ⌘⇧P. The document will create a new your artboard with guides of the components that can be used as symbols in all layouts. Now you can create a simple button component, as usual.

Each component must be in a group and have a unique name. When work on the component is finished, hit ⌘P to send changes to the repository. Transporter Protein for you will create a new branch and zammitt it izmeneniya, and then deliver them to the repository. Get the repository components via Protein Transporter (in the example above) or via the console by typing command in terminal.

Each component has a configuration file that describes the name of the class, status and the way of drawing. A component is an abstraction over technological implementation in the project. In General, the rendering component does not need anything.

But with the growth of complexity may need a custom design, described in one of the preprocessors, as well as a template that describes the structure of one of the engines. All the information contained in a configuration file stored on the standard ES2015. Most of the components will have similar settings that are described in the root configuration file, which describes the construction of Hyde in General.

All that is required for Protein. Change the component on your own in any code editor to which you are accustomed. With the command in the terminal to send the changes to the designer or any other member of the team.

All team members will receive a message stating which component has changed and can these changes be obtained. What if you already have a project that uses preprocessors and template languages. If you are using one of the popular CSS frameworks or you have a lot of libraries of components. Protein can be transparently integrated into any technology stack adopted in the team.

Simply install the app Protein Transporter and be described in simple configuration of components within the project. Next, one command you will receive the assembled styleid of the components in all conditions and modifications and will begin work on the project. This guide will be transferred to the cloud for synchronization with another idea, for example with Sketch. Designers are no configs should not be written.

During the installation of the Transporter Protein will be installed the plug-in design tool that a designer of the project. He will add a hot key to send and receive changes. Protein works.

The only requirement for components is that the name is unique. This can be achieved by methodologies like BEM, SMACSS and other. In the screenshots below as an example shows the Hyde, collected from Twitter Bootstrap, and display it in the browser and Sketch.

To projects, you can connect any number of participants and to develop them in a linear way, without waiting for the correct team members. Normally, if a product is shown on different platforms, the interfaces are developed and supported independently. How many platforms, so many component sets. In addition, the list is multiplied by the number of versions and team members under one platform.

In the best case — one designer, one developer and one product is a product on the layouts, on the web and ios is 5 sets of components. Maintaining all this “biodiversity” in the form consistent have to deal with at the level of the whip. Most of the time this approach doesnt work. And with the growth of teams, platforms, and list 20-30 sets is a threat to the development of the product, support which is just not possible.

Not to mention the fact that the product may not be one. With Protein, the feature set of one product will always be in consistent and date, in a single copy and all team members. Soon all the forces of the team Protein and throw on full conversion of layouts and advantageous to add the ability to convert library components.

Together with live-preview that allows you to quickly assemble prototypes of live production versions of components that can be safely transmitted in the development of remorselessly. Thanks to the code generation based on the technological implementation of a particular set of components, the code will get a completely valid and without surplus in the form of additional code that improve the visual display.

This is a significant step forward in comparison with all modern prototyping services, such as FramerJS, Pixate, or Principle, which code you can safely send in the trash. We plan to support different platforms such as Windows, Android and iOS, the features need to work and make life easier for developers, designers and the whole team.


Leave a Reply