Recently, Framer X, a very hot design artifact, has just invited a part of the user’s internal test. Many designers are curious about how good the software is. Today, we are going to show you and authored this article, which may be the most detailed assessment on earth. What is the framer x review after use this software? What are the framer x draggable and framer x overrides? And at the bottom of this post, the framer x vs principle and framer x tutorial will also unreservedly presented to you. So let’s started.
1. The difference between framer vs framer x, and the new changes
1. Framer vs Framer x: the X no built-in editor
It can be seen that this new version of Framer X is more flattering to designers, abandoning the original code editing module, retaining only the design panel.
2. Framer vs Framer x: the X completely abandon CoffeeScript
When Framer appeared in 2013, CoffeeScript was still more popular, and the development of the front end was not as prosperous as it is now. The author chose CoffeeScript at the time to take into account the simple grammar and the friendly designer. But in 2018, framer x has no coffeescript, and with the development of the front-end, many of the things ES6 can do now can never be done with CoffeeScript.
3. Framer vs Framer x: the X full embrace of React and ES6
Framer X uses React and TypeScript to write UI components, or you can use ES6 directly.
4.Framer vs Framer x: UI component-based
Component-based is the biggest change and core concept of Framer X. All the things you see on the interface are actually React components.
5. Framer vs Framer x: component store
Framer X is the first design software with a built-in design resource store, which can not only download open components, but also manage and synchronize the components within the team, and the imagination is very large.
2. Framer x stack: Layout
Frames X are the most basic layout(stack) tool, a container that can contain interfaces and design elements, which are currently used by Framer X and Figma. Frame is a universal container and plays the role of Artboard. Unlike the Artboard of Sketch, Frame supports unlimited nesting, and its advantage is that when drawing icons and other elements, it can have a Bounding Box to fix a wide and uniform scale, which is more than Sketch. Plus good.
2. Framer X Stacks
The biggest change to layout functionality this time was to add this Stacks functionality in addition to setting the length and width to percentage. It provides a horizontal and vertical linear layout function, and when multiple layers are placed in the same Stack, Stack automatically constrains the layout of these sublayers. Stacks can also support nesting as frameworks do, allowing multiple Stacks to be nested within a Stack.
From the current version, Stack can adjust the layout functions: the direction of 1. permutations 2. select the distribution rule of the sub layer 3. to set the gap between the sublayers and the Padding of the entire container. In general, it is possible to solve the problem of the arrangement of different elements in Sketch Layout, such as the list of different Cell height, the Tab selector, etc.
From Adobe XD to Framer X, you can see that the layout function of Stack has gradually become a standard for all design software, and Figma is already in the internal test, and I believe it will be used soon. At present, if you want to get similar functions in Sketch, you need to use the Stack Groups function in the Anima plug-in.
3. Framer x: Interactive(Framer interactive design)
At present, Framer X can create two page interactions between Link and Scroll.
1. Framer x: Link
Link is the same as Prototyping in Sketch, the purpose of which is to allow us to jump from one page to another to experience user flow from one page in preview design, but it has some differences from Sketch. In the page’s transfer animation, Framer X is better, Sketch is currently only supporting up and down about four directions of the Push animation, and Framer X not only have Push transfer animation, but also very practical Overlay, Modal transfer. When we used to design in Sketch, we often encountered the need to design some menus or pop-up windows that covered the current page to copy the Artboard, which was very difficult to modify and maintain. In Framer X, you only need to design this element individually, and you can display these two transitions when you preview the design.
2. Framer x: Scroll
In the design work we will encounter some very long rolling pages, in Sketch we can set the elements that do not need to follow the page, such as Navigation Bar, Tab Bar and so on. In Framer X, we can specify a rolling area on the page and then design the scrolling content separately, and the options can also set the horizontal or / and longitudinal rolling directions.
4. Framer x: Components
This is the most exciting and core function of Framer X. With components, the design interface is as simple as building blocks and playing Lego. This is also the Design Systems in modern interface design.
There are two components: one is the design component, the other is the code component.
1. Framer x: design components
The design components and the Sketch inside Symbols, Figma in the Components logic basically consistent, are directly in the design canvas directly through the design of good elements to create, using Master and Instance two parts, as the name of the name Master is the parent component, and Instance is a pair through Master duplication of the side. Ben, when changing Master, all Instance will change as well. You can modify the layer in the referenced Instance. For the different layers that have been modified with Master, the user can choose whether to update the Master or restore to the same as the Master. However, the function of the current version is very simple, basically a layer group, which does not provide a Overrides – like option or nested multiple Component to make a richer adjustment, and a more intelligent and complex component option can be implemented in the code component.
2. Framer x: code components
Code components are highly customizable by creating components through code, and you can write logical code using native React handwritten components. Framer X also provides a PropertyControls interface that allows you to customize the properties of the component, which will become a visual interface and be embedded directly to the property bar on the right, very convenient.
For example, the logo component can directly call the API of Clearbit, and automatically change the logo of the corresponding company just by changing the company name.
The head image component, called the uinames.com API, when you change the country to China or Japan, not only the head image will be automatically replaced, even the name is automatically changed to the Chinese name and Japanese name!
The Spotify component, too, is the result of filling in the URL of any album or song through the official API.
Grid components, combined with the Link function, can do more things.
3. Framer x: create a Code component
It’s a bit cumbersome to see the code in other people’s components, and right click “Copy Code” when you insert the component, and then paste it into your own code editor. (this way, I’m shocked, is a component only written in a single file?).
After referring to the code in Example Kit, try to write a simple component: Hello world, which can perform some simple functions such as:
Edit the copywriting in the component in the property bar.
Adjust the background color of the component in the property bar.
The width of the component is displayed in the component in real time.
By using React to complete this component, some interesting things have been found, such as Framer, which has prepared a unique Frame tag for you to replace the familiar div (you can still use div and other web tags), and its own attributes are like the Frame layer in the design panel, and you can imagine that the F is the same as F. In addition to the rame tag, there will be more tags similar to Scroll, Draggable, Page and so on in the Framer, and this part is expected to be published earlier by the official.
Another question is that if the Framer X official wants to make a high fidelity interactive prototype through components, it is necessary to provide a way to implement the communication problem between components. Otherwise, if I write a button component, the button itself turns into a clicking state, but when I expect a button to switch to another picture component that can’t be satisfied, it will appear a bit of chicken ribs. Think about it carefully, this problem is really difficult to solve, it is a step towards the game engine.
When it comes to the game engine, if you have access to WebGL or Unity, you will find that the overall logic of the component is similar to them: writing code through an editor, and providing a visual interface that can intuitively adjust all property parameters.
Then I tried to write a component on the top of the small program. I can see that there are a lot of options on the right, you can customize the color and automatically change the color of the text according to the background color. From a purely designer point of view, making such a component in a design way can be done quickly without adding the logic on the right, but if it is handwritten code, it is still a bit difficult for most designers who don’t have access to the code. In addition, since the current version of the components created by the Create from Design does not support Copy Code, there is no way to design a good component before exporting the logical code, and perhaps the future formal version will thoroughly pass the design and code.
5. Framer x: Store
With the components, it’s natural to think of a component library. This is also a very imaginative function of Framer X, which has been seen before the offline activities of the Framer team, in addition to the official UI components that have been officially provided, and all of the well-known large company design teams, such as Facebook, Dropbox, Airbnb, have already put their official component libraries in. In the future, each company can create its own private design component library on it, sharing synchronization in the cloud.
So you can imagine Framer X as a visual editor for React. Each item, your own component is components, the component installed through the component library is node_modules, and the component library is the NPM package manager.
6. Framer x review: overall use experience
1. Framer x review: is not so friendly to visual designers
2. Framer x review: Very friendly to all stack designers and front-end (UI) engineers
In fact, many designers who write code usually don’t like to use traditional design software drawings, because they are very slow and troublesome, but prefer to write demo directly with HTML and CSS in browsers with some very mature frameworks. From this point of view, Framer X can be said to be an unusually perfect tool. For front-end engineers or UI engineers, I think there will be a big wave of people in the future who are keen to write UI components to Framer Store and have a lot of practical components released in a few short days. And compared to Sketch’s plug-in ecosystem, after all, writing UI components is certainly much lower than writing plug-ins, and everyone can write beautiful UI components.
3. Framer x review: is very friendly to interactive designers and product managers
As you can imagine, when future components are becoming more and more perfect, the Framer X can easily spell out a prototype of high fidelity, interactive, completely real data, or the final design. Not only visual designers, but interaction designers, it’s easy for anyone in any role to get started.
Through the design and function of the new Framer X, it can be felt that the Framer team is just trying to express a core idea: the design is the code, the code is the design. The two are interoperable and can be completely connected. This is also what foreign Internet companies have been actively promoting in recent years. But at the same time there is a big hole in this, that is, Framer X only supports React, if your team front-end technical stack is also good, if not how to do it? What if you prefer to use Vue? Do you want to write the front end code two times? It is obviously unrealistic.
Overall, Framer X is a very alternative and disruptive design tool, and the prospects for its popularity and popularity may not be optimistic. Maybe a lot of small and beautiful teams will be more willing to accept and try, but for most companies and teams, the cost of learning and switching the entire workflow is very high. If many problems can’t be solved, it may become an interactive design software for rapid prototyping of high-fidelity.
4. Framer x tutorial: