Figma with Animation Enhanced Workflow

adding vanilla headless CMS/CDN that can be used everywhere

Adobe's aquisition of Figma is not surprising. XD and Figma are essentially the same product. Usage of Figma has "taken over". It is easy to use, and it is inexpensive. Usability and UX doesn't require knowledge of coding. It has an easy logic.
‍
Making Figma to usable workflows and fully responsive templates is simply done. Adding a few key animation/deployment/security techniques to before and after handoff, will speed up time to deployment. The best benefit is Design Collaboration and flexibility. Ability to Design Animation, APIs, Templates with fully responsive code that ships, paired with ADA, SEO and compliance tools is a great reason to extend the flat file design of Figma.

SVG

The truth is you don't really need Figma or XD

SVG / C Languages
SVG, CSS, XML and C # Runtime, are universal. The "Viewport" / Artboard and cData with Base 64 Javascript compile can be set up in Illustrator. You can compile Javascript in any SVG, in the cData. The viewport is a universal DOM, that can be utilized in any language framework "workflow" including React, Vue, Svelte, Vanilla.
‍
Symbols reusable components traverse applications in the Adobe Cloud: Illustrator, Photoshop, After Effects. Fonts the core of Branding also compile to this master file system.

Concepts: usedef, useref for application frameworks are native to Viewport in SVG Runtime. Component "mounting" to DOM, is a mirror of "Native" SVG workflow.

All brand / print / packaging content will have a Photoshop/Illustrator Brand counterpart. Using Adobe is unavoidable in an Enterprise with a Brand Identity. I started my career in print and package design.
You will not be able to make a production ready mechanical without Photoshop/Illustrator files and deployment.
‍
The artboard in Illustrator is the same thing as a page layout in Figma/XD. We should be emphasizing Illustrator to Code and Functions vs. Flat Frames.

You will still need to add the logic of Client Server and APIs to flat files.

The benefits of Adobe:
-Fonts and Nuanced Typography are the core of a successful design
-Animation and Media Tools
-Print and Brand / Mechanicals
-3D and Geo Spatial Libraries (Cinema 4D and ARC GIS are linked to After Effects)
-CAD and Architectural model file conversions
-Dimension and Aero are solid AI/VR platforms (Adobe PLEASE do not take Dimension out of the Cloud)
-Asset Pipeline and Creative Cloud File Storage
-PDFs and commenting collaboration-Marketing and Designers who don't use Figma, can comment utilizing design platforms that converts to actual usable code.

JSX and Base 64 can include any JS Library/Font compile. Export is usable code. A Viewport is DOM/Figma Artboard.

Artboard in Illustrator is identical to Figma/XD - commenting and publish to PDF commenting is easier for general Design/Marketing Stakeholders

Figma Export

Animations and UI UX functions, still need "design"

Animations
Animations will need to be translated to Vanilla/Responsive Proportional Code to be enabled
APIs
Collections and Typings will need to be documented with conditions and UX
Forms and State
Forms, success, error, validation, CRUD-to API/Database need to be vetted and Logic mapped

Core IA

Things you need in addition to "just the ui". Foundation Usability that should be included in User Testing and Code Review.

CSS Reset
Normalize CSS with core rules that make different browsers renders consistent. Common Libraries: Bootstrap, Design Systems will have this built into the "Global" Standard. A Builder like Webflow will include the core reset classes in the Vanilla JS/CSS/HTML export.
Normalize CSS
Position Properties
Nest Divs to accommodate Images, and Framing that Progressively Scales with Elegant Design that doesn't depend on Cropping Images for Media Breaks. Div / Section Based Framing includes: static, relative, fixed, absolute, sticky. An image inside an absolute box in a relative div, will give you a 100% 100% image that progressively scales with media breaks. The advantage of this is: you can include ADA and Semantic Searchable tagging with images for search and ADA compliance setup. If you are on "Legacy" E Commerce like Site Genesis for Salesforce Commerce, you will have to utilize a particular amount of effort, organization, when loading multiple images for Media Breaks, at penalty to page load and screen readers. Building a CDN that supports Progressive Image Loading is critical to making shift to SFRA.
Position CSS
W3C Compliance
ADA compliance means that your page (regardless of way it compiles-React, VUE) must include tagging to make it screen legible. If your pages compile without headers that include meta tagging instructions for machine read and your images don't include tagging, you will fail compliance checklists. This means your ASSETs IMAGES need ALT tags in Image Loading Publishing and Page Scan.

The penalty for non compliance for e commerce is actively regulated.
w3c Compliance

Fluid Percentage Based Design

Convert PX/PT based static images from Prototyping: PSDs/Figma/Sketch to fluid use everywhere progressively enhanced page / mobile / game resize.

If you are creating an atomic design start with Elegant Progressive Page Enahancement Core: "Molecules"

Core Principles for Typography and Brand Standards

Guaranteed tested UI/UX design that holds up cross platform library channel that works "everywhere" starts with these basics. Understand the DOM/Viewport/Canvas Rendering in Background, Server, and Client. In addition to component Global and Scoped standards, Atomic NFTs and Gaming Web 3 Environments need the Frame/Viewport defined by Scaling and Typography Standards. It is not ok to use pts and pixels in design, design must be fluid and responsive.

I know this is a harsh judgement and applies to 95% of content out there. Take time to clean it up. Scaling and Enterprise Operations cross channel will benefit.

UTOPIA FYI

Fluid Typography Standards

Type should be REM/Percentage based to breakpoints that include APP/Games

Type Scale by Jeremy Church

Webflow adds to Figma

Build out an API/Typescript/Forms and Vanilla UI/UX Design State and include Vanilla Animation

Start with a Figma/XD file or just start with Webflow. The exported animation is usable code that can convert to React, VUE, Svelte, 11ty in a few clicks. Preview and share in Code Sandbox.

You can make a layout in REMs/Percentage/VH and VW combinations and cropped images but you cannot demonstrate progressive page resize.

You can combine jQuery, Custom Libraries, Sliders, GSAP, Three JS with Native CSS Animations

Forms can have State Success Error Redirect. Vue Validation and Vanilla Data can post to API/Blockchain exports wallets. You can include Vue, React and export to MPAs and Next JS

API Collections and Database design can be included

Fonts Google, Adobe, Custom can be exported with Github Built CDN

SVG and Animations can be framed in interactive div/flex/grid containers

Previews and Collaboration can include easy image and copy swap outs

You can "use" the animation in Webflow, vs. Principle Animation that has to be rebuilt

Global / Scoped naming conventions can be created and published on a private non breaking CDN a privately hosted "Storybook"

Add Entitlement/oAuth/SEO hooks and links to Any CMS / API

Add naming conventions of any Atomic Design Library (including Tailwind). Export Atomic Design with CSS Reset and Normalizer that will fix CSS breaks for legacy browsers

Convert to Next JS or 11ty Git Hosted Fully Shippable Code with easy CI CD Pipeline
‍

EMAIL me for Webflow to NEXT JS Conversion Source Code

I'm happy to screen share/network. You can export Webflow to Next JS and or 11ty hosted on Jamstack with Collections. Utilize Open Source/Github file serving for Real Time API and Image / Pixel Tracking serving. Code Export Pixel Perfect export Figma/Duplicate can be used in any Framework, CMS, ERP, Enterprise Workflow with API/Gates that can work within Rate Limitations. Use as a CDN, Standalone Digital Asset Management System, or Dynamic Collection Builder for bespoke CRM/Drop Ship/Inventory Tracking/CMS with as much ease as Wordpress with token based security.

I don't use Webflow, because I can't use React. I use Webflow before I set up React/Next.

Standards

YSL - Native Vanilla Compile Enterprise Builds

UX Tools Linting and Tree Shaking

CSS Tree Shaking and Usability Tools that help with compliance and Content Creation with Webflow export. HTML/CSS/JS can live anywhere. Images are source set and can load to open source Git Based Asset Management, that serves any CMS, CRM, Native React Based Build Automation. SASS builds strip out logic and Order of Execution. This should be done BEFORE code handoff with the Content Stakeholders and User Acceptance Testing. The standards and requirements should be in a Living Copy Deck and Functional Deck that accompanies Design Spec.

This Blog Dual publishes to Webflow and to CI CD directly to build on Vercel/and or Netlify. Similar build system can be set up for dynamic content strategy, proof of concept, Wordpress publish, iteration/naming pipeline. Proof of Concept export can also support static Web 3 DAPP, PWA publish and Mobile Builds.

Tools

Asset Management

HTML/CSS/JS basics

PDF for CSS

Cheatsheet for core CSS

Download PDF