Be nice. Or else.
Sr. Visual Designer at OpenText Joined over 1 year ago
Np! Hope its helpful!
Check out the data table I created with nested components in Figma as part of this Material design resource:
(the data grids are on the far right arboard).
Usually what I like to do is assemble a basic table using nested components. I try to keep it as modular as possible. For most standard tables, I find its useful to have the columns as components, and the rows as a repeating separate component. If you make the columns as part of your row, its harder to customize since you need to detach and break the component to modify the contents. You can sort of make your own repeat grids.
Take a component (one row for example). Then make a new component with that row duplicated 20-30x. Then turn that grid into a component. Set the constraints to those nested rows to be Left and Right + Top. There is a feature in Figma called “clip content”. If you enable this, you can resize the component, and it will crop the repeat grid. So when you want more, you just drag it down to expand the size and reveal more rows.
Once I have all the setup, I package them up all assembled in a component to create a sample table. When I need a table, I drop in the sample table from our shared library, break it apart, and configure all the nested components how I want them.
Posted a bit about it here: https://twitter.com/negativespaceca/status/1002635034505850880
Thanks for sharing this. Woodworking has become a huge outlet for me to get away from the computer and disconnect. The process of turning raw materials into physical object is very therapeutic and rewarding. Hit me up if you ever want someone to chat about woodworking, tools, etc. Subscribed to your channel!
That was exactly my reaction as well. Super excited to play around with those features!
Kind of a fail if this is your first time landing on a Baron fig page to not even show a photo of the interior pages. Thats sort of an important thing for someone buying boutique stationery.
I was on the beta, so hopefully can shed a bit of light.
You have elements on your page which could include SVG code, that you want to animate. You launch the app, and turn on the browser plugin. Spirit requires a JS library, so if you don't have that included on the page, it can insert it into the DOM for you.
Through the app, you can create a new animation by creating a group. A group is a collection of elements on the page. Spirit includes a method to select elements from your page by clicking on them. Once added, you can create timeline animations for each of the elements with easing, key framing etc through the Spirit GUI.
In the end you can export the JS (JSON) for your animation and add the animation to your page.
So essentially it is an animation experience that involves animating directly in the browser on your page.
There is an API so you can programatically control when animations start/stop etc.
It has to be a factor. We got an unlimited license since we needed to cover over 12,000 employees, for 3 font weights, and it was around 50k USD (same type foundry that airbnb worked with).
This is essentially how Atomic works. Pages within a component/symbol to control component states. This could be cool but probably needs to be combined with JS or some sort of logic expressions to be truly useful.
Couldn't agree more with this assessment. I am happy with the design tool I am currently using, but this is the direction I want to see design tools move towards (more than animation).
We have recently encountered the aggressive sales team of a certain new product, and it is so focused on everything BUT this sort of workflow, that its really annoying. Transitions and slick screen animations are probably the last priority for us building large scale enterprise applications.
Be nice. Or else.
Designer News is a large, global community of people working or interested in design and technology.