DEV Community: Anima App

How to prep for your YCombinator interview

Anima App — Mon, 29 Aug 2022 07:23:56 +0000

Anima was a part the YC18 cohort and in preparation, developed a prep-questions app for the upcoming interviews. The app provided a training environment, simulating the 10 minute YCombinator interview format, as we geared up for the actual interview process.

Try the live demo

Given the Q&A format, the app turned out to also be a useful resource investor meetings. And after a number of requests from companies wanting to use the app's functionality, we redeveloped it so it could be shared as an open source app.

If you're interested in Amina's YCombinator journey, check out our How to nail your YC interview post.

How prep app was built

Anima CEO, Avishay Cohen, shows the step-by-step process for creating the app, which involved converting the Figma design into a live React app before deploying it on Netlify.

https://www.youtube.com/watch?v=b45EvpxAF1I

The redesign was done in Figma which meant that most of the code could be written automatically. The Anima plugin for Figma converted the design into code, specifically Figma to React.

But there was still some additional work done to support this, which you can read about in more detail on Anima's GitHub page.

How to build your own YCombinator prep tool using Anima + Figma + React + Netlify

Start with your design file.

This Figma sample file is available to duplicate here.

Step 1: Sync to Anima

Sign up at AnimaApp.com
Install the plugin for Figma, Adobe XD or Sketch
Click Preview , then Sync

Step 2: Export React code

In Anima, Export code for the whole project

Step 3: Running locally

Open terminal on the Anima code folder, and run:

npm install
npm start

Open http://localhost:1234/
Adding logic

On this simple app, most of the logic is loading questions, and running them randomly.

Adding links

Animas code comes with react router out of the box.
The History hook is the classic way to add links on onClick

Loading the questions

The State hook is used to store the questions array and the current question.
The Fetch method allows us to pull the questions on getData(),
- Ive added the questions.json file to the static files folder.
The Effect hook is used to trigger the
Ive added a simple function called next() to randomize a question from the array
In the render function, Ive added the value of the current question

All the final code is available on GitHub

Step 5: Publishing to Netlify

Netlify is a great cloud to host React apps.

If you dont have netlify , install it with npm using the following command:

npm install netlify-cli -g

If you do have netlify use these commands:

npm run build
netlify deploy

Choose the dist folder when asked, and youll get a link on Netlify to your React app.

Use netlify deploy prod when you have the final result, and get a sharable link.

A preview of the live app:

Additional resources:

Build a banking app with Ant Design + Strapi.io

Anima App — Mon, 15 Aug 2022 08:33:34 +0000

Anima is back end, design tool, and hosting agnostic. We're able to help our users ship products 10x faster by seamlessly integrating with a diverse range of tools and solutions. Occasionally, we like to test our approach by building a design-to-code solution that delivers on this.

Through the Anima Partners series, we'll look at how you can partner technology solutions with Anima to optimize your design-to-code workflow.

We redesigned the Silicon Valley Bank (SVB) banking app using Animas open source Component Library for Figma, connected our data, and went live in two days.

With Animas ready-to-use React components from Recharts and Ant Design, it took us 1 day to design and 1 day to go live using Strapi's headless CMS as the back end, with the app being deployed on Netlify.

How to build a React app fast with Figma + Anima + Strapi.io

Before starting

Sign up to Anima
Install the Component Library for Figma plugin
Install Node.js

Partnered tech solutions used in this build: Figma + Recharts + Ant Design + Strapi.io + Netlify

Part one: Make your design interactive

We have a ton of interactive open source React components in our Figma plugin. Use them to create your own design file or duplicate our sample file to get started.

Step one: Explore the Component Library

Open the Component Library for Figma plugin
Select Component Library

Step two: Insert a chart

Select Charts from the Component Library menu
Choose the chart you want to use and customize it for your application
Click insert to add the chart to your canvas, then incorporate it into your design

You can use the component library to insert any components you like

Part two: Convert your Figma design to React code using Anima

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

Step one: Sync to Anima

Open the plugin in Figma
Click Preview, then Sync

Step two: Export React code

Open your project in the Anima web app and select Export code
Change Selected Framework to React
Export code for the whole project

Step three: Run locally

Unzip the downloaded code 2. Open terminal in the Anima code folder
Run npm install
Run npm start
Open http://localhost:1234

You now have the app running locally

Part three: Connect the charts to your data

Next, you want to populate your charts with real data from an API. To do this, we're going to set up Strapi and get our app connected to it. If you'd prefer, you can use the REST API of your choice instead.

Step one: Set up Strapi

Follow this Quick Start Guide to get Strapi up and running
Create your admin account

Step two: Connect your app to Strapi

In Strapi, go to Settings > API Tokens > Create a new API Token
Copy the API token
In the project folder, create a file called .env
Add the URL and Token (without the word Bearer) to this file:

API_URL=http://localhost:1337/api/
API_TOKEN=[YOUR API TOKEN]

Step three: Populate data in Strapi

In Strapi, go to Content-type builder and create a new collection type
Name the collection BalanceHistory
Add the following fields:
- Month: Date
- Amount: Number (Decimal)
Create entries for BalanceHistory and publish each one

Step four: Populate chart data using API

Open the code for one of your charts (i.e. BalanceChart)
Add code to fetch data from the Strapi API
Replace static data with fetched data in the chart args (here's an example)

Your chart is now using data fetched from your API

Build & Publish to Netlify

Netlify is a great cloud to host React apps. Follow their deployment guide to connect your repo and automatically deploy your app.

Heres how to deploy to Netlify.

Interested in joining our Partner Program, or seeing our tech partners? Get more info here.

Additional resources:

Build a blog with Anima’s React code + Contentful’s headless CMS

Anima App — Sun, 07 Aug 2022 14:53:00 +0000

In this tutorial, we'll build a completely functional blog by connecting Anima's generated frontend code to @contentful_blog 's headless CMS for dynamic content.

Before Starting

Sign up to Anima
Install the Anima plugin for Figma
Create your first Anima project on the platform

Part 1: Get the code from the design

With Anima, we can build complete reusable React components from a Figma design. For this tutorial, we are going to use this blog template.

Open the Anima Plugin in Figma. Note: if you've created a project before it should be listed here.

Select Preview. You will see this pop-up window when you can check the responsiveness of this template.

Select the Get Code option and choose React. From this design, Anima will generate a full list of React components.

This process can take a few minutes, but when it is completed successfully, it will open our project in the Anima web app.

As you can see, Anima is generating functional React code for any component you select. You also have the option to change the view to desktop and tablet.

For this tutorial, we will only be working with one breakpoint screen, in this case, the 1440 px screen homepage light. You can navigate to this screen by clicking the dropdown menu in the upper left corner of the platform.

Select Export Code. You will see three different options, select Current Screen and click Download screen as ZIP. Make sure the chosen framework is React.

This will generate a zip file with the codebase ready to open and use in our IDE.

Anima uses Parcel to compile our jsx files, so when your download is ready you just need to install the dependencies with npm install and then run npm start.

If you navigate to http://localhost:1234 our Anima project should be up and running.

Lets create content in Contentful

Now that we have our blog running is time to create some content for it.

Create a Contentful account to start.

When we enter the Contentful platform the first thing we need to do is create a new content type, in this case, a new article.

Select Content Model in the navigation and then click on Add content type.

After clicking create it will navigate to our content type settings for adding new fields.

If we review the design we notice that our article has an image, a title, a description, and some other fields. We need to create all of them and select the correct type for each.

After you finish creating all the fields, you should have something similar to this.

Click Save and we will have our content type ready to create new articles.

Navigate to Content and select Add Article. Now it's time to fill up our first article.

Part 2: Integrate Contentful CMS for dynamic content

Now that we have some articles created and our React project, it's time to integrate both to have a completely functional blog with dynamic content.

Let's create a new .env file at the root of our project to store the Contentful keys we will need. You can find your keys on Settings > Api Keys.

We also need to install the Contentful dependency npm install Contentful.

Let's use a hook to get a list of articles from Contentful. Create a new services folder and then create a use-articles.jsx file.

We are using the Content Delivery Api to get our articles.

Remember to use the correct content_type to get the entries, in this case, it is article.

Now that we have a service to get our articles we need to pass it to our components. there are some small tweaks we need to do in the code. Follow the repo for a guide. It's basically cleaning some parts and passing the props properly.

Part 3: Its time to deploy

We are going to use Vercel to deploy our blog.

We have to previously push our code in GitHub, and grant access to Vercel. After that, you will see the project listed.

Select Import.

Before deploying make sure to add the environment variables that we previously set on development.

Now you can deploy the app.

Connect Anima's frontend code to any backend architecture. Try it today.

The post Build a blog with Animas React code + Contentful's headless CMS written by Elizabeth Alcal, appeared first on Anima Blog.

How to build a Shopify store with a custom UI using Figma + Anima

Anima App — Tue, 02 Aug 2022 17:56:29 +0000

We built a live eCommerce app in Figma using Anima's React Component Library. Then we turned it into a Shopify template and deployed it on Netlify using Anima's generated code. Here's how.

Before starting

Sign up to Anima
Install the Anima plugin for Figma
Install Node.js

Part one: Make your design interactive

We've added a ton of interactive open source React components to our Figma plugin. You can use them to create your own design file or duplicate our sample file to get started.

Step 1: Explore the Component Library

Open the Anima plugin for Figma.
Select Component Library.

Step 2: Insert a MUI component

Select MUI from the Component Library menu.
Choose the component you want to use and customize it for your application.
Click insert to add the component to your canvas, then incorporate it into your design.

Part two: Go from Figma to React using Anima

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

Step 1: Sync to Anima

Open the plugin in Figma
Click Preview , then Sync

Step 2: Export React code

Open your project in the Anima web app and select Export code
Change Selected Framework to React
Export code for the entire project

Step 3: Run locally

Unzip the downloaded code
Open terminal in the Anima code folder
Run npm install
Run npm start
Open http://localhost:1234

Part three: Create a Shopify project with Hydrogen

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

Use this guide to create another project with the basic Shopify features
Follow this guide to prepare your Shopify template for deployment to Netlify

Part four: Combine Both Projects

Now we have two projects, one generated by Anima and the other one generated by Shopifys Hydrogen library. From now on, the Shopify Hydrogen project will be the primary project where all of the files and folders will be merged.

package.json : Add dependencies from Animas project into Shopifys and run npm install.
jsconfig.json : Change property jsx from react to react-jsx.
src :
1. assets : Create new assets folder inside the src folder and move the Anima projects img and fonts folders into it.
2. index.css: Move the Anima projects globals.css and styleguide.css code into the Shopify projects index.css.
3. components : Move the components folder from Animas project into Shopifys project, and change all Link components to use @shopify/hydrogen instead of react-router-dom.

If the component has an image, replace the image source with a variable declared at the top of the file on an import statement (if path is specified by a prop then remove that prop and set the path based on the variable at the constants folder):

4. **routes** : Create new files for each page in the routes folder using [this guide](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) (the index.server.js should be used as the Home Page)
5. **constants** : If Animas project has generated multiple variables for the props of each page in the _App.jsx_ file, then create a _constants_ folder in the _src_ folder and add all these variables to its index.client.jsx file. Add **export** before each one, and if any jsx code has been generated inside any of these variables, then remove it.

For example, if you have something like this:

It should be changed to this:

Part five: Connect with Shopify API

Create a Shopify Partner Account.
Create a Development Store by following this guide.
Add some products to this new store (it must have at least one variant).
Generate a storefront access token by following this guide.
Add your storefront token and your store domain to hydrogen.config.js.
Create a query by following this guide, or use this code example to get product data:

Now in the HomePage you can use the products array for rendering each product card with the actual data from the Shopify store.

Part six: Add a cart and checkout

Create CartProvider.client.jsx inside the components folder with the following code inside:

Create CartUIProvider.client.jsx inside the components folder with the following code inside:

Add Context to App.server.jsx:

Create AddToCartButton.client.jsx file inside the components folder with the following code:

Wrap every product component with ProductOptionsProvider from @shopify/hydrogen/client, pass the corresponding product to it, and use the created AddToCartButton:

On the Cart Page we import the useCart hook from @shopify/hydrogen/client and render each selected product from the lines property (for more info check out this tutorial) then we display the total cost of the cart and add the checkoutUrl to the pay button:

Part seven: Add Tailwind CSS and Make it Responsive

We'll be using the Tailwind CSS framework to make each page responsive.

Install tailwind css and its peer dependencies, and generate the tailwind.config.js and postcss.config.js files:

$ npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer  
$ npx tailwindcss init -p

Add the paths to the template files in your tailwind.config.js file:

Add the paths to the template files in your tailwind.config.js file:

Make each router page display the corresponding component depending on the screen size. For example:

Part eight: Build & Publish to Netlify

Netlify is a great cloud platform to host React apps. Follow their deployment guide to connect your repo and automatically deploy your app.

Heres how to deploy to Netlify.

See for yourself

Check out the Figma file here,
Inspect the code here,
Explore the live app here.

The post How to build a Shopify store with a custom UI using Figma + Anima, written by Ignacio Daz, appeared first on Anima Blog.

How technology solutions can partner with Anima to expand market reach

Anima App — Tue, 12 Jul 2022 06:14:45 +0000

In the world of composable architecture where organizations mix and match technologies, tools, and services to build software fast and stay agile partnerships are more valuable than ever. Thats because wherever you fit in the tech stack, complementary partnerships can expand your market reach and amplify your impact.

At Anima, we partner with tools and services that help our users ship faster, with greater autonomy and flexibility. Which is why were excited to introduce the Anima Partners Program.

Partnerships at Anima

What Anima does

Anima is a design-to-code (and code-to-design) platform thats changing the way teams build front end. Designers can export developer-friendly React, Vue, or HTML code for engineers and even launch websites directly from design tools like Figma, Adobe XD, and Sketch. Developers can skip the grunt work of coding UI from scratch. Teams can deliver better apps and websites with a fraction of the time and resources.

Why partner with Anima

Animas front end code automation places us at the intersection of digital product design and front end development. Our users include R&D, marketing, and product design teams, and our platform has been adopted by companies of all sizes.

Since Anima is back end agnostic , design tool agnostic , and hosting agnostic , were able to seamlessly integrate with a diverse range of tools and solutions to help our users ship products 10x faster.

Why Anima wants to partner with you

We appreciate our partners, because together we amplify the value that our shared customers get. And in turn, we merge our audiences and grow our individual market shares. Its a win-win. We're already seamlessly integrated with countless tools and services, including Figma, Storybook, Adobe XD, Netlify, Material UI, Strapi, Firebase, Sketch, Bootstrap, Slack, and more. And wed love to add you to the list.

Animas partnerships and integrations

Design tools

Anima integrates with the most popular design tools Figma , Adobe XD , and Sketch as an in-app plugin that allows designers to keep their current workflows. This means designers, developers, teams, and organizations can:

Convert designs into React, HTML, or Vue.js code right from their existing design tools.
Build and launch live websites directly from their existing design tools.
Insert ready-to-use React components into their Figma designs.
Access an automatically generated Styleguides written in CSS to easily recognize the building blocks of each design.
Manage their design systems automatically by syncing their Storybook with Figma.

Back end systems, server-less options, and headless CMS services

Animas front end code is back end agnostic. Developers can connect any existing back end, pick their favorite server-less architecture like Google Firebase or AWS Amplify or connect a headless CMS like Strapi or Contentful.

Hosting

Customers can deploy Animas generated React, HTML, and Vue code using their favorite hosting services. AWS , Google , and Azure are very popular, and we also see dedicated services like Netlify and Vercel becoming key components in our users composable architecture.

Component libraries

Anima brings live open source React components into Figma via our in-app plugin. We've selected the most popular components from the top libraries MUI , Bootstrap , Ant Design , and Recharts each one implemented in production-ready React code. They're fully customizable and include all states.

Founders and designers can quickly build MVPs in Figma with the same open-source components developers use in production, then export clean React code.
Developers can skip the grunt work of searching open source libraries for components that are close enough, then editing props to match the design.
Teams can deliver better apps and websites with a fraction of the time and resources.

Missing your favorite component library or want us to add yours? Request more libraries here.

Developer tools

Developers feel at home with Animas code, whether working in GitHub , editing in VS Code , or inspecting in CodeSandbox or CodePen. For design systems teams, we have Storybook integration for Figma that automatically syncs design libraries with production code.

And more

Countless tools generate greater value when paired with Anima, and vice versa. For example, Animas generated code lets designers and teams scale their prototype testing with FullStory and Hotjar , embed YouTube , Vimeo, and Lottie files in their prototypes and websites, and track product development using Slack updates. And theres so much more we can do collaboratively.

Anima integrations showcase

Check out these apps built with Anima and the tech stacks that were used to ship them at lightning speed. This is just a tiny example of whats possible with our growing list of integrations and partnerships.

Basic React app

Figma + Anima + Netlify

In this sample project, we created an interview simulation app with Figma + Anima, then launched it on Netlify using Animas generated React code. Heres how.

Banking app

Figma + Anima + Recharts + Ant Design + Strapi.io + Netlify

We redesigned SVBs banking app using Animas open source Component Library for Figma , connected our data, and went live. With Animas ready-to-use React components from Recharts and Ant Design - plus a little help from our partners - we were able to build and launch in just two days. We used Strapi's headless CMS as the back end and deployed the app on Netlify. With this powerful tech stack, it took us 1 day to design and 1 day to go live. Heres how.

Basic Vue.js app

Figma + Anima + Vue.js + fuse.js + Netlify

This LGBTQ+ calendar app was designed in Figma and launched on Netlify using Animas generated Vue code. All we needed to do was make a few tweaks, add some logic, deploy to Netlify, and voila! We had a live app in less than 3 hours of work!

Offer an integration

What can we make with your tech solution or service?

We have a growing list of integrations to help our users ship faster, adapt more easily, and enhance their workflows and were always looking for new technology partners.

Interested in becoming a technology partner? Drop us a line at partnerships@animaapp.com.

The post How technology solutions can partner with Anima to expand market reach, written by Hadas Avrech, appeared first on Anima Blog.

Anima syncs Storybook and Figma for a single source of truth

Anima App — Thu, 16 Jun 2022 10:22:09 +0000

If you have a large, dynamic product and a design system in Storybook, you know how hard it is to keep your Figma design library in sync with your codebase.

Thats because until now, designers and developers have had different sources of truth, one in Figma and one in code. But not anymore.

We're excited to announce that Anima now turns your Storybook into a native Figma library - automatically - in a single click. 🚀

Just export from Storybook and watch Anima build your production components in Figma.

The problem: designers and developers have different sources of truth

Designers use Figma libraries to design products, and developers use code libraries to build them.

In an ideal world, these libraries are kept in sync. But if you're a growing or established software company with a complex product and segmented teams, you know its a massive, never-ending task.

So how do you keep your design library up-to-date with your code components? Or identify which components have been developed and which ones only exist in Figma? What about preventing new developers from using the wrong components - or rebuilding existing ones - because they don't know the codebase yet?

The solution: a single source of truth between design and development

What is the single source of truth?

Is it your Figma library or your code library? This is a controversial question, and we don't claim to have the answer. But in our humble opinion, code is the single source of truth.

Why? Because despite the fact that we create components in Figma before developing them, code determines what users will actually see.

With that in mind, we've enabled designers and developers to build products together with the exact same code components.

Introducing Animas Storybook integration for Figma

Now you can turn your Storybook into a native Figma library in a click to create a single source of truth between design and development.

Generate a Figma library from your code components in Storybook - automatically - including all variants and naming conventions
Publish and share the library with your team, or with distributed teams across your organization (using Figma)
Build flows with the exact components your users are seeing using Figma's native capabilities

Who is this for?

For designers

Generate a Figma library based on your existing code components. You'll get:
- a real-time visual inventory of all of your production components including variants - laid out on your Figma canvas

all properties defined in the code automatically mapped into Figma variants , and all responsive CSS converted into Auto Layout definitions

Design as usual, knowing developers will use the exact same components to build the product
Use Figma's native control panel to switch between variants so theres no need to change how you work

Know you're designing what users will actually see , and get notified when a components code has changed so you can update it in Figma

For developers

Help designers reuse existing components instead of reinventing the wheel
Get designs containing the exact components you have in the code , including:
- the same names and properties
- a link to each component in Storybook

Know if the design you're handed is reusing existing components, or contains new components you'll need to build
Prevent new or junior developers that aren't familiar with the codebase from using the wrong components or building new ones unnecessarily
Keep your codebase free of redundant components, or new components that might confuse users or clash with your existing design system

Were almost there!

Got new ideas or requests? Let us know!

Were working hard to perfect our Anima + Storybook integration for Figma, and wed love to hear your thoughts. Let us know what you like, what you don't, and what features or changes would make this the perfect integration for you. Don't hold back - we're all ears!

Feel free to reach out to us using our forum to ask questions, provide feedback, report bugs, and request features 🙂

Considering Anima for your organization? Schedule a demo to start.

The post Anima syncs Storybook and Figma for a single source of truth appeared first on Anima Blog.

Build MVPs faster with ready-to-use components in Figma

Anima App — Tue, 07 Jun 2022 09:23:53 +0000

In the current competitive landscape, who has time or money for a traditional product development process?

Whether you're launching an MVP to validate your product early or building a live demo for an upcoming sales call, you've gotta run fast.

The problem is, MVPs and demos - even the most basic ones - can take too long and cost too much to design and develop from scratch. But theres a solution.

If you need to get your product live quickly to test your assumptions or close a deal, your best option is to start with pre-built, customizable components.

Move faster with ready-to-use components

With Animas new Component Library for Figma , were changing the way teams build software. We've selected the best open source components from the top libraries, each one fully implemented in production-ready React code. You can use these customizable building blocks to go live fast without investing precious early-stage resources in design and development.

Founders and designers can quickly build MVPs in Figma with the same open-source components developers use in production.
Developers can skip the grunt work of searching open source libraries for components that are close enough, then editing props to match the design.
Teams can deliver better apps and websites with a fraction of the time and resources.

👉 Install our Plugin here to start building your product in Figma! 👈

Design in Figma with live, customizable open source React components

From MVP to Full-Scale Product

Although MVPs are a great way to validate your assumptions early with minimal risk, MVPs built from scratch are generally barebones, inconsistent, and difficult to scale. In most cases, they're thrown away when it's time to build the actual product.

With Animas Component Library, however, you're building a foundation for your full-blown product with a reusable, scalable set of building blocks.

Why open source UI Libraries?

Theres a huge variety of open source component libraries. They're well-maintained and have already been developed and tested. So why torture yourself trying to invent new components that would take days to build and probably lack some capabilities?

With that in mind, we populated our Component Library with React components from three of the leading libraries: MUI, Bootstrap, and Ant Design.

What are the benefits?

Save time

Our components are fully customizable. You can easily adjust them to meet your needs, then insert them into your design in a click.
We integrated the top open source UI Libraries devs already use, so theres no need to code from scratch or search for matching components.
Export production-ready code for each component, so you can go live fast.

Save money

Explore and use Research is expensive and time-consuming, which is why we did the research for you. As a result, our Component Library contains the best code components, for the widest range of applications, from the top UI libraries available.
Ready for production Don't spend limited resources designing and developing what already exists in code. Our library contains all the building blocks you need to launch your product, and is backed by clean, deployable React.js.

All components are fully implemented in React and refer to specific open source libraries

Who is this for?

Founders

Go live quickly using customizable components you can easily match to your brand or application (we use MUI, Bootstrap, and Ant Designs APIs to enable full customization).

Be ready for demos and sales calls
Reusable, scalable components = MVPs you can build on

Designers

Modify components to meet your needs with the ability to change things like states and color schemes. You have full creative control, so you can easily match the MVP to your brands aesthetic - then export production-ready code.

Designs can be implemented quickly and accurately
See exactly what your users will see
No need to plan each state for every component

Developers

No more digging through different React libraries to find the components you need. We've already selected the best open source components from the top libraries, each fully implemented in production-ready React code.

Get designs that are easy to implement
Each component refers to an open source library
No need to search for components and edit props

Ready to ship products 10x faster? Try Anima today

The post Build MVPs faster with ready-to-use components in Figma, written by Imanuel Leibovich, appeared first on Anima Blog.

Generate a shareable Figma library from Storybook in a single click

Anima App — Thu, 12 May 2022 10:36:25 +0000

Using component libraries is the best way to create and maintain consistency across your entire product. This is especially true if you're working on a large, dynamic product or with a broad, distributed team

But how hard is it to keep your design library up-to-date with the components in your codebase? How about making sure component names in your design match those in the code? Or determining which components have already been developed, and which ones only exist in Figma?

Not as hard as you think if you let Anima automate the process for you.

Go from Storybook to Figma with Anima

Now you can build a native Figma library from your code component library - automatically - in a single click.

Generate a Figma library file from your live code components including all variants and naming conventions (with Anima)
Publish and share it with your team (natively within Figma)

Your team can now build flows with the exact components that your users are seeing - using Figma's native capabilities.

Who is this for?

Designers

Create a Figma library file based on your existing code components
Use Figma's native UI capabilities without changing how you work
No more designs that get lost in translation

Developers

Encourage your designers to re-use existing components (instead of designing similar components from scratch)
Get designs that contain the exact components you have in the code
Know if the design you're handed is re-using existing components, or contains new components you'll need to build

Whats next?

1. Visual accuracy

Were eliminating visual differences between your code components and your Figma components by adding extensive support of CSS properties

2. Responsiveness

We're making your components as useful as possible by translating existing CSS props into Figma Auto Layout definitions.

3. Continuous sync

We're ensuring that your Figma library is always up-to-date with what exists in the code. We're adding a function that informs you when a components code has been changed, with the option to update it throughout your design in a click.

Ideas or requests? Let us know!

Were constantly working to improve the Anima+Storybook integration, and wed love to hear your thoughts. Let us know what you like, what you don't, and what features would make this the perfect integration for you.

Feel free to reach out to us using our Discord community to ask questions, provide feedback, report bugs, and request features 🙂

The post Generate a shareable Figma library from Storybook in a single click, written by Yarden Katz, appeared first on Anima Blog.

Build React apps 10x faster in Figma

Anima App — Sun, 01 May 2022 08:14:37 +0000

We've reached a huge milestone in our mission to help R&D teams build web apps faster. And we mean 10x faster. Now you can launch better apps, faster, with fewer resources.

If you're building React apps for fintech, analytics, security, NFT, or internal dashboards - to name a few - our newest capability will help you bring top-tier experiences to production 10x faster.

At Anima, we're changing the way teams build software. Designers can export developer-friendly React code for engineers, and even launch websites directly from Figma. Developers can skip the grunt work of coding UI from scratch. Teams can deliver better apps and websites with a fraction of the time and resources.

But thats just the beginning.

Introducing open source React libraries in Figma

Anima now supports open source React libraries in Figma. This means you can work with the same popular React components developers use in production. Not just design-to-code, but also code-to-design and back.

What do you get?

You can design with charts, menus, and other React-based components already available in our plugin for Figma. We've already selected popular components from the top open source librariesincluding Recharts and Ant Design - and we'll be adding more and more. If you have special requests, let us know!

How do you get started?

The fastest way to start is with our Figma community file, a React dashboard template built for almost any admin application. It has tons of components and variants, and can be used as-is or customized to meet your needs. All you need to do is plug in your data and go live.

Who is this for?

Designers can work fast, with complete creative control, and export production-ready React code for the UI.
Developers can skip the grunt work of searching open-source libraries for components that match the design (or worse yet, building components that already exist).
Founders can launch data visualizations with minimal design experience and development resources, and go live in a day with your new dashboards.

What's next

We're really excited to share this with you, and even more excited about whats coming. Were constantly adding new open-source components and templates. Eventually, you'll be able to build almost any app with Anima + Figma. And soon you'll be able to do the same thing with Anima + Adobe XD!

I made the video below to walk you through the process, and cant wait to hear your thoughts and see what you'll build with Anima.

https://www.youtube.com/watch?v=0jOoOmbcW04

Join the discussion on our Forum and Twitter, and let us know what you'd like to see next!

The post Build React apps 10x faster in Figma, written by Avishay Cohen, appeared first on Anima Blog.

Automatic AI-Driven Icon Naming

Anima App — Mon, 25 Apr 2022 16:30:37 +0000

TL;DR Distinguishing icons in code is difficult if they don't have meaningful names. Using AI image recognition, Anima can now automatically identify the types of icon in your design and name their classes accordingly.

At Anima, we focus on automatically converting design into developer-friendly code. As Martin Fowler once said:

"There are only two hard things in Computer Science: cache invalidation and naming things." In Anima's new feature we tacked the naming challenge.

Developers want high-quality code with meaningful naming. They can spot machine-generated code in poor CSS class names (i.e. vector-383). These names do not help identify what they're referring to. Thats why we've added an ML solution to improve layer naming.

Using AI image recognition Anima can now automatically identify the types of icons in your design and name their classes accordingly.

The problem: design files include non-descriptive icon naming

Designers use icons across their designs frequently. These Icons may have their own custom styling depending on their usage. Developers manage these elements but they can be difficult to identify if they are not named well.

For example, it is difficult to identify what icon may be represented by the class name icon-1, but if it were named cart-icon it would be instantly identifiable.

The solution: automatically identify icons and name them accordingly

Using Machine Learning, Anima automatically scans your designs images and identifies what types of icon you have used. It then names the elements according to the icon type.

This means that when you export to code, the class names match to the type of icon used.

Benefits

For Designers: You no longer need to worry about adding icon image class names
For Developers: You'll be able to quickly and easily identify the icon type from its name

Coming up: AI-Driven Automation

At Anima, we're continuously looking to improve the designer and developer experience. To do so were investigating areas in the design-to-code process where automation can make a big difference.

If you have an idea for a step in this process that would be improved by automation, whether its something you have to spend time on regularly, or could simply be made easier, please let us know.

The post Automatic AI-Driven Icon Naming, written by Ben Andrew, appeared first on Anima Blog.

Anima 4.0 is live - Transforming designs into Developer-friendly React code.

Anima App — Mon, 02 Nov 2020 01:11:19 +0000

We’re excited to announce that Anima 4.0 is finally here

In 4.0 we’ve focused on bringing developers into the fold so that they can go straight from high fidelity designs to clean code they can actually work with.

In a nutshell, Anima has evolved into an end-to-end solution that transforms the design-development handoff into a continuous and integrated process. This means less grunt work, minimal iterations, less pixel-pushing, and more time to get creative.

Here are the game-changers in Anima 4.0:

DEVELOPER FRIENDLY CODE
For the first time, developers can cherry-pick elements and get runnable code!
Generate reusable, clean code components from any design element with CSS variables, and responsive Flexbox layout. Anima’s code has no dependencies and can be exported into HTML/JS/CSS and React.js.

CODE OVERRIDES
Select any component to override Anima’s code and see your overrides rendered in real-time.

CODE-BASED PROTOTYPES
Go from design to realistic prototype faster using your design tools. Transform static screen designs to fully interactive code-based high-fidelity prototypes that act like the real deal (because they are).

DESIGN TO DEVELOPMENT COLLABORATION
Anima streamlines design and development collaboration by transforming the handoff into a continuous and integrated process.

Give Anima 4.0 a go, and as always, be sure to drop in any questions/feedback below so we can continue making Anima even better for you.