Framer X – Interactive Design丨Framer X Override丨Framer X Draggable丨Framer X Review
Framer X officially posted a new product, Framer X, on its website, indicating that it was a “rule-breaking product that better integrates design and development.” At the same time, the first Slogan of the product was “React meets design.” React is Facebook’s 2013 open source component interface framework, featuring data maintenance of interface state. Framer X all this gives us a lot of imagination. It is understood that the framer x review is very good. I will introduce you to the following information. Hope can also get what you want: framer x draggable, framer x overrides, framer x coffeescript, framer interactive design. You will like this post.
Finally, I received a beta version of Framer X this week, played with it, and tried to write about how I felt.
First come to the conclusion: Framer X is more like a design tool, with layout(framer x stack), components, and paths all perfectly functional; but it’s harder for people who want to implement high-fidelity interactive prototypes with Framer X, because they learn to build components with React; but it’s closer to a design system that can be built with it It’s a tool. By Framer X – Interactive Design for Everyone
1. Framer vs Principle, Framer X easy to use features
First of all, I would like to talk about some features that Framer X has better use than other design tools.
1. Framer X: Stack
The first is Framer X Stack, which translates into Chinese as “heap, stack,” where Framer X Stack is actually the Flex Box in the front end, a bit like Sketch’s Plus plug-in. With this function, you can simply arrange multiple elements. Draw a Stack and drag in the other elements to align it automatically. Framer X Stack — saves a lot of time. By Framer X – Interactive Design for Everyone
Framer X Stack: is more convenient, when you drag the elements in Stack, they will automatically change the order.
2. Framer X: component store
Framer X supports creating components in two ways: creating and creating code from the design area. Components created through code are more powerful, enabling a variety of interactions (described in detail later). By Framer X – Interactive Design for Everyone
Framer X has a built-in component store that allows designers to upload their own code-created components for use by other designers. In fact, not only Framer X, but I can’t help thinking about Sketch’s plug-in ecosystem. It can be said that Sketch’s popularity is due to a large number of plug-ins contributed by its user community, but Sketch doesn’t seem to take it seriously. By Framer X – Interactive Design for Everyone
Framer X’s built-in component store, which aggregates components created by users, makes it easy for other users to use them without having to duplicate the wheel. As components grow and ecology grows, these features of Framer X, the open-and-ready components, can greatly improve our productivity. Moreover, these components are interactive, and can be combined to achieve an extremely high fidelity design. By Framer X – Interactive Design for Everyone
2. Framer X: my favorite feature
Finally, I will give a detailed introduction to my most promising function in Framer X — using code to make components.
1. brief introduction
As mentioned above, there are two kinds of Framer X components, which are similar to those created in the design area by Sketch Symbol, and the other is components created using code.
At the beginning of Framer, there was no design pattern, all the interfaces were implemented by code. Later stable versions included design patterns and code patterns that manipulated graphics in design patterns through code. In Framer X, there is no code pattern, but other code editors allow you to write components that are embedded in the design area.
When you use code to create components, Framer X opens a React template file with some basic code written in it using a third-party code editor (which is recommended if you don’t have VS Code installed). Let’s create a Button and try it out. This component looks like the design area on the left, and the code on the right. The code on the right looks a little hard to understand. By Framer X Review – Interactive Design for Everyone
2. Framer X: React principle
First review the traditional way to implement a front-end interface: use HTML to draw the basic structure, use CSS to add styles, use JS control logic, that is, through JS to change HTML or CSS to respond to user operations, thereby changing the state of the interface. By Framer X – Interactive Design for Everyone
In React, the interface state is maintained through data. Some data is maintained within each React component, which corresponds to something in the interface that needs to be changed to change the state of the interface.
Take the official StatusBar component for example. The data of this component contains external attributes (Props) and internal state (State). StatusBar has three external attributes: Carrier, Appearance, and Battery, which correspond to the interface’s operator, appearance (dark or bright), and power. Its internal maintenance of a State, that is, display time. Each component has a lifecycle, including initialization, loading, rendering, and so on. One of the things render does is watch Props and State change at any time, followed by re-rendering the component interface. By Framer X – Interactive Design for Everyone
Framer X: let’s match these concepts with the code of the simplest components mentioned above.
Here’s just a brief introduction. React has many concepts and details. You can refer to the article at the end of this article for a detailed introduction.
3. Framer X: why look at it? May be this is my framer x tutorial
Finally, why do I value this function?
As you can see from the above text, although implementing components in code can achieve more complex and realistic effects, the barriers to designers are higher (requiring a solid JS foundation, understanding React implementation, and learning TypeScript). Then why do I look after it?
Many designers believe that the goal of a design tool like Framer X, which requires a designer to have code capabilities, is to export code and reuse it for engineers. In my opinion, this is a mistake. Know that “there is a specialty in art”. Don’t assume that you can write a few code with JS that will work for you, but it’s still a long way from it. By Framer X – Interactive Design for Everyone
What is the significance of designer learning programming? I think it’s about building “design systems,” and of course, knowing the technical boundaries and having code thinking is an added bonus to the process.
There is a saying in the development circle that “laziness is the virtue of engineers”. Programmers around us often write scripts to replace manual work, but our designers have been doing a lot of repetitive work. To improve efficiency, it is a good way to use code.
The most popular concept of design system is to improve design efficiency. Think back to the Sketch Symbol we’re using. It’s easy to build a component library, but it’s not easy to build a component library that contains a rich set of tunable attributes. It needs to be combined according to naming conventions, and you have to think of all possible combinations in advance. By Framer X – Interactive Design for Everyone
But this is very simple and natural for code. Components made by code in Framer X can be set to various attributes that can be adjusted just like normal layer attributes. As shown below, the properties of the StatusBar component can be adjusted in the right pane of Framer X, just as easily as adjusting the style of a layer.
If you follow Airbnb’s design blog, you should notice that they’re building design systems with code. By Framer X – Interactive Design for Everyone
They have said in an introduction to their open source tool React Sketch. app that managing design system resources in a Sketch is complex — error-prone and time-consuming. This tool uses code to manage the design system resources. It has the characteristics of unique data source (changing component code, updating all components in the design drawing file), and can use real data.
All of this is simpler in Framer X. The current Framer X code component allows us to customize the component logic, adjust properties directly in the design area, and be truly interactive at preview time. This gives us a step closer to building a real design system. By Framer X Review – Interactive Design for Everyone